javascript - Creating BoxBufferGeometry from Box3 - Stack Overflow

admin管理员组

文章数量:1402614

I want to create a box mesh on the three.js scene, where points of the box mesh will be the same as bounding box of some existing object on the scene.

I have tried to create box mesh from box3 in the way displayed bellow, but i dont get the right result:

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);

How can I create mesh box from box3? Thank you very much for your help!

I want to create a box mesh on the three.js scene, where points of the box mesh will be the same as bounding box of some existing object on the scene.

I have tried to create box mesh from box3 in the way displayed bellow, but i dont get the right result:

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);

How can I create mesh box from box3? Thank you very much for your help!

• javascript
• three.js

Share Improve this question Follow asked Aug 5, 2019 at 14:00 user3188373user3188373 1311 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In Three.js there's no automatic way to turn Box3 into a regular BoxBufferGeometry but here's how it worked for me

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 BoxGeometry of the same size as Box3
const dimensions = new THREE.Vector3().subVectors( box3.max, box3.min );
const boxGeo = new THREE.BoxGeometry(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.applyMatrix4(matrix);

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

The vertices array in your code holds vertex data but they actually represent face/triangle definitions. Hence, rendering just this geometry data results in a few random triangles (not visualizing a box).

You can solve this problem by adding an index to your geometry which will represent the face definitions based on your vertices. To understand this topic, you have to know the difference between indexed and non-indexed geometries. I suggest you study the official documentation page of THREE.BufferGeometry. There are for each type of geometry official code examples.

three.js R107

本文标签： javascriptCreating BoxBufferGeometry from Box3Stack Overflow