淘宝客导购网站怎么做宝安专业手机网站设计公司
几何体
边缘几何体
可以作为一个辅助对象来查看几何体的边缘。
gltfLoader.load("./models/building.gltf", (gltf) => {console.log(gltf);//隐藏后就可以直接看到线框// scene.add(gltf.scene);//这个模型是由多个几何体组成的，所以需要遍历gltf.scene.traverse((child) => {if (child.isMesh) {//获取几何体const geometry = child.geometry;// //获取边缘const edges = new THREE.EdgesGeometry(geometry);//创建线条材质const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });//创建线条const line = new THREE.LineSegments(edges, lineMaterial);//将线条添加到场景中scene.add(line);}});
});
EdgesGeometry 构造函数用于创建边缘几何体，接受一个几何体对象作为参数。
LineBasicMaterial 构造函数用于创建线条材质，接受一个对象作为参数。
LineSegments 构造函数用于创建线条，接受两个参数：
-
geometry： 线条几何体。
-
material： 线条材质。
traverse 方法用于遍历场景中的所有对象，接受一个回调函数作为参数。
线框几何体
let edges = new THREE.WireframeGeometry(geometry);
WireframeGeometry 构造函数用于创建线框几何体，接受一个几何体对象作为参数。
模型解压
在 Three.js 中，模型解压是指将压缩的模型文件解压缩为 Three.js 可以直接使用的模型对象的过程。通常，模型文件在压缩后可以减小文件大小，加快加载速度，但是解压缩过程需要消耗一定的计算资源。
正如上面加载的 building.gltf 模型是压缩过的，如果正常加载会报错，所以需要解压。
DRACOLoader
DRACOLoader 是 Three.js 提供的一个用于加载和解压缩 Draco 压缩格式的模型文件的加载器。Draco 是一个开源的 3D 图形压缩库，可以有效地减少 3D 模型的文件大小，加快加载速度，并保持较高的图形质量。
使用步骤：
- 引入 DRACOLoader
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
- 创建 DRACOLoader 实例
const dracoLoader = new DRACOLoader();
- 设置 DRACOLoader 的解析器路径
dracoLoader.setDecoderPath("./draco/");
注意： 解析器路径是相对于当前 HTML 文件的路径，所以需要把 three/examples/jsm/libs/draco 文件夹拷贝到项目public中。
- 设置加载器 draco 解码器
gltfLoader.setDRACOLoader(dracoLoader);
包围盒
包围盒（Bounding Box）是一个用于描述物体体积的几何体，用于计算物体的位置、大小和碰撞等属性。在三维图形学中，包围盒通常用于加速物体的碰撞检测和渲染。
Box3
objLoader.load("./models/1.obj", (obj) => {scene.add(obj);obj.children[0].material.map = new THREE.TextureLoader().load("./models/nezha.png");//获取模型，可以直接根据数据找，也可以使用getObjectByName方法// const nezha = obj.children[0]const nezha = obj.getObjectByName("texture_v100");//获取几何体const nazhaGeometry = nezha.geometry;//计算包围盒nazhaGeometry.computeBoundingBox();//获取包围盒const nazhaBox = nazhaGeometry.boundingBox;//创建包围盒辅助线const nazhaBoxHelper = new THREE.Box3Helper(nazhaBox, 0xff0000);scene.add(nazhaBoxHelper);
});
getObjectByName 方法用于获取指定名称的对象，返回值为对象本身。
.computeBoundingBox() 方法用于计算几何体的包围盒，返回值为包围盒对象。
.boundingBox 属性用于获取几何体的包围盒，返回值为包围盒对象。
Box3Helper 构造函数用于创建包围盒辅助线，接受两个参数：
-
box： 要显示的包围盒对象。
-
color： 辅助线的颜色。
因为生成的包围盒是一个立方体，所以可以直接通过 min 和 max 属性获取立方体的最小和最大坐标。可快速生成包围盒。
Sphere
objLoader.load("./models/1.obj", (obj) => {scene.add(obj);obj.children[0].material.map = new THREE.TextureLoader().load("./models/nezha.png");const nezha = obj.getObjectByName("texture_v100");//获取几何体const nazhaGeometry = nezha.geometry;//计算包围球nazhaGeometry.computeBoundingSphere();//获取包围球const nazhaSphere = nazhaGeometry.boundingSphere;//创建包围球const sphereGeometry = new THREE.SphereGeometry(nazhaSphere.radius, 16, 16);const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);sphere.position.copy(nazhaSphere.center);scene.add(sphere);
});
.computeBoundingSphere() 方法用于计算几何体的包围球，返回值为包围球对象。
.boundingSphere 属性用于获取几何体的包围球，返回值为包围球对象。
多物体包围
//创建球
const sphere1 = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32),new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
sphere1.position.set(2, 0, 0);
scene.add(sphere1);
const sphere2 = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32),new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
scene.add(sphere2);
const sphere3 = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32),new THREE.MeshBasicMaterial({ color: 0x0000ff })
);
sphere3.position.set(-2, 0, 0);
scene.add(sphere3);let box = new THREE.Box3();
let sphereArr = [sphere1, sphere2, sphere3];
for (let i = 0; i < sphereArr.length; i++) {//计算包围盒sphereArr[i].geometry.computeBoundingBox();let box3 = sphereArr[i].geometry.boundingBox;//更新世界矩阵sphereArr[i].updateMatrixWorld(true, true);//应用矩阵box3.applyMatrix4(sphereArr[i].matrixWorld);//获取包围盒box.union(box3);
}
const boxHelper = new THREE.Box3Helper(box, 0xff0000);
scene.add(boxHelper);
.union() 方法用于合并两个包围盒，返回值为合并后的包围盒对象。
注意： 这里涉及到物体的合并，那么需要先更新世界矩阵，再应用矩阵。
//简易方法
for (let i = 0; i < sphereArr.length; i++) {//第一种sphereArr[i].geometry.computeBoundingBox();let box3 = sphereArr[i].geometry.boundingBox;sphereArr[i].updateMatrixWorld(true, true);box3.applyMatrix4(sphereArr[i].matrixWorld);//第二种简易方法let box3 = new THREE.Box3().setFromObject(sphereArr[i]);box.union(box3);
}
.setFromObject() 方法用于从物体中获取包围盒，返回值为包围盒对象。
扩展
.getCenter() 方法用于获取包围盒或包围球的中心点，返回值为向量对象。
Geometry.center() 几何体居中，返回值为几何体对象。
.updateWorldMatrix() 方法用于更新几何体的世界矩阵，返回值为几何体对象。
.applyMatrix4(matrix) 方法用于将指定的矩阵应用于几何体的顶点，返回值为几何体对象。
如果存在物体和包围盒的变换，那么需要先更新世界矩阵，再应用矩阵。
//更新世界矩阵
nazhaGeometry.updateWorldMatrix(true, true);
//应用矩阵
nazhaGeometry.applyMatrix4(nazha.matrixWorld);
书洞笔记