WEB 3D技术 three.js 包围盒

news2025/1/12 12:11:19

本文 我们来说 包围盒

如下图所示 就是一个方框 框住我们整个物体
在这里插入图片描述
它的作用 比较明显的就是 当用户点击某个物体 我们用包围盒套住 用户能够很直观的知道自己当前选中的物体是哪一个
还有就是 比如 我们物体做的比较复杂 是非常多顶点构建的 那么 我们判断它有没有和其他物体接触就很麻烦 但 有了包围盒 我们只需要判断包围盒有没有接触即可

然后 我们官网搜索 BufferGeometry
在这里插入图片描述
包围盒是所有几何体都有的属性

这里 我们有两个 一个是 包围盒 另一个是 包围圈
简单说 一个是包围成立方体 另一个是成球形包围
在这里插入图片描述
默认情况 例如我们自己创建的几何体 是不会有这个属性的 我们需要自己通过 computeBoundingBox 去计算
在这里插入图片描述
我这里 先写成这样的代码

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

//创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角 视角越大  能看到的范围就越大
    window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
    0.1,
    1000
);
const scene = new THREE.Scene();

const gltfLoader = new GLTFLoader();
gltfLoader.load(
    // 模型路径
    "/gltf/scene.gltf",
    // 加较完成同调
    (gltf) =>{
        gltf.scene.traverse((child) => {
            if (child.isMesh) {
                child.frustumCulled = false;
                child.castShadow = true;
                child.material.emissive = child.material.color;
                child.material.emissiveMap = child.material.map;
            }
        });
        scene.add(gltf.scene);
    }
)

//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const controls = new OrbitControls(camera, renderer.domElement);

let rgbeloader = new RGBELoader();
rgbeloader.load("/xhdr/Alex_Hart-Snow_Pano_2k.hdr",(texture) =>{
    scene.background = texture;
    texture.mapping = THREE.EquirectangularReflectionMapping;
})

function animate() {
    controls.update();
    requestAnimationFrame(animate);
    /*cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;*/
    renderer.render(scene, camera);
}
animate();

这里 就是简单引入了 hdr场景贴图 和一个 glb 车的3D元素
在这里插入图片描述
那么 现在 我们要给这台车 做一个包围盒

首先 我们需要拿到它的几何体对象 先在代码中 控制台打印gltf对象下面的 scene
在这里插入图片描述
然后 下面有两个比较重要的内容 它的name 和 id
在这里插入图片描述
getObjectById 通过id获取元素对象
getObjectByName 通过name属性获取元素对象
我们肯定是用name 会更方便一点

我们的name 叫 webvrmodel_Scene
我们改写代码如下

const gltfLoader = new GLTFLoader();
gltfLoader.load(
    // 模型路径
    "/gltf/scene.gltf",
    // 加较完成同调
    (gltf) =>{
        gltf.scene.traverse((child) => {
            if (child.isMesh) {
                child.frustumCulled = false;
                child.castShadow = true;
                child.material.emissive = child.material.color;
                child.material.emissiveMap = child.material.map;
            }
        });
        scene.add(gltf.scene);

        let webvrmodel = gltf.scene.getObjectByName("webvrmodel_Scene");
        console.log(webvrmodel);
    }
)

通过 getObjectByName 寻找name 为 webvrmodel_Scene的对象
然后 下面用console.log 输出在控制台上

运行结果如下
在这里插入图片描述
这里 虽然拿到了 但其实 我们也不需要这么麻烦
可以直接这样改

const gltfLoader = new GLTFLoader();
gltfLoader.load(
  "/gltf/scene.gltf",
  (gltf) => {
    gltf.scene.traverse((child) => {
      if (child.isMesh) {
        child.frustumCulled = false;
        child.castShadow = true;
        child.material.emissive = child.material.color;
        child.material.emissiveMap = child.material.map;
        const geometry = child.geometry;
        geometry.computeBoundingBox()
        let duckBox = geometry.boundingBox;
        console.log(duckBox);
      }
    });
    scene.add(gltf.scene);
  }
);

拿到 geometry 几何体对象字段
然后 通过对象 调用 computeBoundingBox计算出 包围盒对象
然后 通过 geometry.boundingBox 获取他的包围盒对象 并在控制台打印
这里正常的几何体对象都可以调用computeBoundingBox 取 boundingBox
是因为 我们这是导入的gltf资源 所以还要想办法去拿这个几何体的对象

运行如下
在这里插入图片描述
包围盒对象 给了两个属性 max和min
两个三维向量 但是 两个形成一个包围盒 这是为什么呢？

它的两个向量 其实就是两个点的坐标
因为 他是一个很规整的立方体 包围盒 所以 它只需要如下图的两位点的位置 就可以拉出一个立方体
在这里插入图片描述
那么 既然已经拿到最小和最大两个值 那么 我们就可以拉出这样一个包围盒工具
我们可以将代码改成这样

const gltfLoader = new GLTFLoader();
gltfLoader.load(
  "/gltf/scene.gltf",
  (gltf) => {
    gltf.scene.traverse((child) => {
      if (child.isMesh) {
        child.frustumCulled = false;
        child.castShadow = true;
        child.material.emissive = child.material.color;
        child.material.emissiveMap = child.material.map;
        const geometry = child.geometry;
        geometry.computeBoundingBox()
        let boxHelper = new THREE.Box3Helper(geometry.boundingBox, 0xffff00);
        scene.add(boxHelper);
      }
    });
    scene.add(gltf.scene);
  }
);

THREE.Box3Helper 需要两个参数 第一个是 需要处理的包围盒对象 就是我们从gltf几何体对象上拿到的 boundingBox属性 第二个为一个颜色属性
然后将这个包围盒对象 add到场景中

运行代码如下
在这里插入图片描述
我们外面这个包围盒的线就出来了

几何体 则更简单 我们编写代码如下

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
//创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角 视角越大  能看到的范围就越大
    window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
    0.1,
    1000
);
const scene = new THREE.Scene();
let uvTexture = new THREE.TextureLoader().load("/textUv.jpg");

const geometry = new THREE.BufferGeometry();
// 创建顶点数据
const vertices = new Float32Array([
    -1.0,-1.0 ,0.0,
    1.0 ,-1.0, 0.0,
    1.0 ,1.0 ,0.0,
    -1.0 ,1.0, 0.0
])
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0 ,1 ,2, 0, 3, 2]);
const material = new THREE.MeshBasicMaterial({
    map: uvTexture,
    side: THREE.DoubleSide
})
const uv = new Float32Array([
    0, 0, 1, 0, 1, 1, 0, 1
])
geometry.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
const normals = new Float32Array([
    0, 0, 1,
    0, 0, 1,
    0, 0, 1,
    0, 0, 1
])
geometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
console.log(geometry);
const cube = new THREE.Mesh(geometry, material);
scene.add(cube)

//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const controls = new OrbitControls(camera, renderer.domElement);

let rgbeloader = new RGBELoader();
rgbeloader.load("/xhdr/Alex_Hart-Snow_Pano_2k.hdr",(texture) =>{
    scene.background = texture;
    texture.mapping = THREE.EquirectangularReflectionMapping;
    material.envMap = texture;
})

function animate() {
    controls.update();
    requestAnimationFrame(animate);
    /*cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;*/
    renderer.render(scene, camera);
}
animate();

在这里插入图片描述
然后添加代码

geometry.computeBoundingBox()
let boxHelper = new THREE.Box3Helper(geometry.boundingBox, 0xffff00);
scene.add(boxHelper);

在这里插入图片描述
我们外面的包围盒就出来了
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1361644.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

轻松玩转书生·浦语大模型趣味Demo

轻松玩转书生·浦语大模型趣味Demo

轻松玩转书生浦语大模型趣味Demo 大模型及InternLM模型介绍InternLM模型全链路开源 InternLM-Chat-7B智能对话Demo模型介绍模型部署webDemo运行 Lagent智能体工具调用DemoLagent介绍 浦语灵笔图文创作理解Demo通用环境配置模型下载 大模型及InternLM模型介绍 人工智能领域中 参…
阅读更多...
LauraGPT

LauraGPT

git：https://github.com/alibaba-damo-academy/FunCodec 文章目录 model archAudioTokenizermodel init model arch text-embedding 用千问的模型参数初始化；AudioEncoder用asr-conformer的参数初始化；所有的参数都参与更新，除了C…
阅读更多...
Squish创建测试脚本

Squish创建测试脚本

1、打开Squish IDE 2、创建TestSuit File-New TestSuit，输出TestSuit Name,选择路路径，点击Next按钮，ToolKit选择Qt,Scripting Language选择Python，选择AUT（Application Under Test），点击Fish完…
阅读更多...
第10课 实现多对多音视频会议功能

第10课 实现多对多音视频会议功能

在前两节课，我们将推流端与播放端合并为一对一音视频聊天功能并解决了关键的回声问题，在此基础上，我们可以进一步改进实现多对多的视频会议功能。 1.备份demo9并修改demo9为demo10。 2.打开工程文件，修改mfc为四分屏画面。 界面…
阅读更多...
Typora设置 “图片自动保存到文档对应目录下” 的方法（亲测有效）

Typora设置 “图片自动保存到文档对应目录下” 的方法（亲测有效）

众所周知，typora是程序员非常喜爱的一款笔记软件，但它也有缺点 如：当我们要将旧电脑的写好的文件转移到新的电脑上时，如果简单的将图片文件放在一起，那么文件就会不好对应，那么如何让笔记中所包含的照片自…
阅读更多...
Beauty algorithm（三）腮红

Beauty algorithm（三）腮红

查阅资料了解到腮红位于苹果肌处，同样使用关键点确定目标区域，然后对该区域进行渲染达到美妆效果。考虑到如果使用简单的RGB是很难做到特效，本篇采用模板方式进行区域融合。 一、skills 前瞻 1、png图像读取 cv::imread(imgPath, cv::IMREAD_UNCHANGED) IMREAD_UNCHANGE…
阅读更多...
一张照片来跳舞，AI带去你跳科目三

一张照片来跳舞，AI带去你跳科目三

大家好我是在看，记录普通人学习探索AI之路。 重生之我是秦始皇，起猛了看见兵马俑在跳舞。 最近，随着社交媒体上热议的科目三话题热度持续飙升，阿里集团旗下的通义千问项目团队精准把握住了这一社会潮流，借势推出了一…
阅读更多...
设计模式学习2

设计模式学习2

代理模式：Proxy 动机 “增加一层间接层”是软件系统中对许多复杂问题的一种常见解决方案。在面向对象系统中，直接食用某些对象会带来很多问题，作为间接层的proxy对象便是解决这一问题的常见手段。 2.伪代码： class ISubject{ pu…
阅读更多...
Windows 10系统用Xlight FTP搭建SFTP服务器

Windows 10系统用Xlight FTP搭建SFTP服务器

步骤： 1.安装SFTP服务器 刚开始我使用的是freeSSHd，后面发现由于公司网络原因，打不开这个软件，改成了使用Xlight FTP， 官网下载链接：Xlight FTP 服务器 - 下载免费的windows FTP 服务器 Xlight FTP有30…
阅读更多...
【数据结构和算法】字符串解码

【数据结构和算法】字符串解码

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 什么情况会用到栈 2.2 方法一：辅助栈法 三、代码 3.1 方法一：辅助栈法 四…
阅读更多...
走出WPF应用程序第一步

走出WPF应用程序第一步

了解WPF 体系结构 下图说明了 WPF 的主要组件。 关系图的红色部分（PresentationFramework、PresentationCore 和 milcore）是 WPF 的主要代码部分。 在这些组件中，只有一个是非托管组件 - milcore。 milcore 是以非托管代码编写的&#xff0c…
阅读更多...
【本科生通信原理】【实验报告】【北京航空航天大学】实验四：模拟信号的数字化及编码

【本科生通信原理】【实验报告】【北京航空航天大学】实验四：模拟信号的数字化及编码

目录 一、实验目的二、实验内容三、实验程序四、实验结果五、实验分析六、参考文献 一、实验目的 1、掌握低通信号的抽样及重建过程； 2、掌握PCM的编码及译码过程。 二、实验内容 共2问： 三、实验程序 1、 function q1() dt 0.001; % 时间分辨率…
阅读更多...
macOS 老版本系统恢复中出现“MacBook Pro无法与恢复服务器取得联系”

macOS 老版本系统恢复中出现“MacBook Pro无法与恢复服务器取得联系”

macOS 老版本系统恢复中出现“MacBook Pro无法与恢复服务器取得联系” 网络问题系统时间问题镜像索引问题 网络问题 系统时间问题 镜像索引问题 恢复模式的 “实用工具 > 系统终端” 里执行如下 nvram IASUCatalogURLhttps://swscan.apple.com/content/catalogs/others/i…
阅读更多...
Android 13.0 SystemUI状态栏居中显示时间和修改时间显示样式

Android 13.0 SystemUI状态栏居中显示时间和修改时间显示样式

1.概述 在13.0的系统rom定制化开发中，在systemui状态栏系统时间默认显示在左边和通知显示在一起，但是客户想修改显示位置，想显示在中间，所以就要修改SystemUI 的Clock.java 文件这个就是管理显示时间的,居中显示的话就得修改布局文件了 效果图如下: 2.SystemUI状态栏居中显…
阅读更多...
如何配置 VS Code 实现 git 密码免输入

如何配置 VS Code 实现 git 密码免输入

目录 问题描述尝试过的失败方法问题分析最终采用的解决方案：利用 ssh key 提供密码免输入功能安装 git windows 命令工具在windows本地生成 ssh key将公钥安装到 git 服务器第一种方法第二种方法调试方法 参考资料: 问题描述 在 Windows 上，使用 Visual…
阅读更多...
西电期末1025.平滑滤波

西电期末1025.平滑滤波

一.题目 二.分析与思路 别光看公式，读题干：“位置i的输出为距离i最近的三个输入的平均值”，再看示例，输入几个，输出几个，所以就是输出每个位置距离最近的三个输入的平均值，中间没什么问题&…
阅读更多...
高可用分布式部署Spark、完整详细部署教程

高可用分布式部署Spark、完整详细部署教程

前言 Spark 是 UC Berkeley AMP Lab 开源的通用分布式并行计算框架。 Spark基于map reduce算法实现的分布式计算，拥有Hadoop MapReduce所具有的优点；但不同于MapReduce的是Job中间输出和结果可以保存在内存中，从而不再需要读写HDFS&#xff…
阅读更多...
DoIP学习笔记系列：（八）车厂一般关于DoIP的相关测试分析

DoIP学习笔记系列：（八）车厂一般关于DoIP的相关测试分析

文章目录 1. 前言2. 基本项测试2.1 协议版本默认值2.2 车辆标识请求报文格式2.3 带EID的车辆标识请求报文格式2.4 带VIN的车辆标识请求报文格式2.5 否定响应码0x002.6 否定响应码0x012.7 否定响应码0x022.8 否定响应码0x042.9 路由激活应答码0x002.10 路由激活应答码0x012.11 路…
阅读更多...
RMAN-03002 RMAN-06059 ORA-19625

RMAN-03002 RMAN-06059 ORA-19625

有个现场经理反馈，每天的rman备份异常，登录系统查看rman的log日志，报错信息如下 RMAN> run{ 2> backup filesperset 50 archivelog all format /backup/ARCHBAK_%d_%T_%s tag arch_bak delete all input; 3> } 4> Starting …
阅读更多...
粒子群优化pso结合bp神经网络优化对csv文件预测matlab(3)

粒子群优化pso结合bp神经网络优化对csv文件预测matlab(3)

1.csv数据为密西西比数据集，获取数据集可以管我要，数据集内容形式如下图： 2.代码 这里参考的是b站的一位博主。 数据集导入教程在我的另一篇文章bp写过，需要的话可以去看一下 psobp.m close all clc%读取数据 inputX; outputY;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023