从 Box3 创建 BoxBufferGeometry答案

【问题标题】：Creating BoxBufferGeometry from Box3从 Box3 创建 BoxBufferGeometry
【发布时间】：2019-12-13 01:42:21
【问题描述】：

我想在 three.js 场景中创建一个盒子网格，其中盒子网格的点将与场景中某些现有对象的边界框相同。

我尝试按照下面显示的方式从 box3 创建盒子网格，但我没有得到正确的结果：

var threeObject = existing object on the scene;
var boundingBox = new THREE.Box3();
boundingBox.setFromObject(threeObject);

var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array( [
boundingBox.min.x, boundingBox.min.y, boundingBox.min.z,  
boundingBox.min.x, boundingBox.max.y, boundingBox.min.z, 
boundingBox.min.x, boundingBox.min.y, boundingBox.max.z, 
boundingBox.min.x, boundingBox.max.y, boundingBox.max.z, 
boundingBox.max.x, boundingBox.min.y, boundingBox.min.z,  
boundingBox.max.x, boundingBox.max.y, boundingBox.min.z, 
boundingBox.max.x, boundingBox.min.y, boundingBox.max.z, 
boundingBox.max.x, boundingBox.max.y, boundingBox.max.z,
] );
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh( geometry, material );
viewer.scene.add(mesh);

如何从 box3 创建网格盒子？非常感谢您的帮助！

【问题讨论】：

标签： javascript three.js

【解决方案1】：

代码中的vertices 数组包含顶点数据，但它们实际上代表面/三角形定义。因此，仅渲染这些几何数据会产生一些随机三角形（不可视化一个框）。

您可以通过向几何图形添加一个索引来解决此问题，该索引将根据您的顶点表示面定义。要理解这个话题，你必须知道索引几何和非索引几何之间的区别。我建议你研究THREE.BufferGeometry的官方文档页面。每种几何类型都有官方代码示例。

three.js R107

【讨论】：

【解决方案2】：

在 Three.js 中，没有自动将 Box3 转换为常规 BoxBufferGeometry 的方法，但这对我来说是这样的

const threeObject = existing object on the scene;
const box3 = new THREE.Box3();

// conform to the object size like it's a boundingBox
box3.setFromObject(threeObject);

// make a BoxBufferGeometry of the same size as Box3
const dimensions = new THREE.Vector3().subVectors( box3.max, box3.min );
const boxGeo = new THREE.BoxBufferGeometry(dimensions.x, dimensions.y, dimensions.z);

// move new mesh center so it's aligned with the original object
const matrix = new THREE.Matrix4().setPosition(dimensions.addVectors(box3.min, box3.max).multiplyScalar( 0.5 ));
boxGeo.applyMatrix(matrix);

// make a mesh
const mesh = new THREE.Mesh(boxGeo, new THREE.MeshBasicMaterial( { color: 0xffcc55 } ));

【讨论】：