时间戳

首页 > 解决方案 > 从 Box3 创建 BoxBufferGeometry

javascript - 从 Box3 创建 BoxBufferGeometry

问题描述

我想在 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 创建网格盒？非常感谢您的帮助！

标签： javascriptthree.js

解决方案

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

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

three.js R107

推荐阅读