CODEWITHSUNDEEP
three.js
Алексей
Алексей

Reputation: 57

Rotating Box3 together with the model in ThreeJS

I have the following question.

There is a model, through the setFromObject method I get Box3 (screenshot - http://prntscr.com/12787py). Next, I rotate the model and get a new Box3 (screenshot - http://prntscr.com/12789fy).

Is it possible after rotating the model to get Box3 with the same rotation, as if Box3 was rotating with the model?

Upvotes: 0

Views: 668

Answers (1)

TheJim01
TheJim01

Reputation: 8896

Box3 is a mathematical representation of a box. As such, it is represented with only two Vector3 properties (max and min) that represent two opposing corners of the box. The values of these do not represent a box in full 3D space, but rather an axis-aligned box.

It looks like you're using BoundingBoxHelper. This creates a wireframe box that is world-aligned. This means it will compute its shape based on the transformed positions of the geometry vertices, and so it may change shape as your mesh is rotated.

To create a shape-tight wireframe box that rotates with your object, you will need to create one directly from your geometry, and ensure the same transformation is applied to both shapes.

// your shape
const shapeGeo = new BoxGeometry( 10, 10, 10 )
shapeGeo.computeBoundingBox() // <----------- DO THIS BEFORE ADDING IT TO THE SCENE!
const shapeMat = new MeshPhongMaterial( { color: 'red' } )
const shapeMsh = new Mesh( shapeGeo, shapeMat )

// your wireframe
const bboxMin = shapeGeo.boundingBox.min
const bboxMax = shapeGeo.boundingBox.max
const wireGeo = new BufferGeometry()
wireGeo.setAttribute( 'position' , new BufferAttribute( new Float32Array( [
  bboxMin.x, bboxMin.y, bboxMin.z,
  bboxMin.x, bboxMin.y, bboxMax.z,
  bboxMin.x, bboxMax.y, bboxMax.z,
  bboxMin.x, bboxMax.y, bboxMin.z,
  bboxMax.x, bboxMin.y, bboxMin.z,
  bboxMax.x, bboxMin.y, bboxMax.z,
  bboxMax.x, bboxMax.y, bboxMax.z,
  bboxMax.x, bboxMax.y, bboxMin.z,
] ), 3, false ) )
wireGeo.setIndex( new BufferAttribute( new Uint8Array( [
  0, 1, 1, 2, 2, 3, 3, 0,
  4, 5, 5, 6, 6, 7, 7, 4,
  0, 4, 1, 5, 2, 6, 3, 7
] ), 1, false ) )
const wireMat = new LineBasicMaterial( { color: 'yellow' } )
const wireBox = new LineSegments( wireGeo, wireMat )

Now, here's where things take what might seem like an odd twist. Once you have your wire box, you can simply add it to your shape, and future changes to your shape will be passed on to your wire box:

scene.add( shapeMsh )
shapeMsh.add( wireBox )

This works because transformations are passed on to children*, and a Mesh is really just an extension of Object3D, so a Mesh can have children just like any other Object3D derivative.

* as long as you don't disable automatic matrix updates

Upvotes: 1

Related Questions