Raycasting after dynamically changing Mesh in Three.js

Question

I have a mesh cloned from another mesh. But after cloning, I translate and rotate it. And do a ray-casting a point to it but it is not working as expected. It is keep intersecting with the original position before translation and rotation. Sample code is as below

const raycaster = THREE.Raycaster()
const proposedModel = model.clone()
proposedModel.translateX(1)
proposedModel.translateY(1)
proposedModel.translateZ(1)
const q = new THREE.Quaternion(
    -0.847,
    -0.002,
    -0.505,
     0.168
)
proposedModel.applyQuaternion(q)

const point = new THREE.Vector3(1,1,1)
raycaster.set(point, new THREE.Vector3(1,1,1))
const intersects = raycaster.intersectObject(object) // It keep intersecting with original position

Glad if any help, Thanks!

After applying a quaternion, try to call proposedModel.updateMatrixWorld(). — prisoner849
It works! May I know why I need to call updateMatrixWorld() explicitly? — yue you
I think I found the answer: I founding the following in Three.js docs When either the parent or the child object's transformation changes, you can request that the child object's matrixWorld be updated by calling updateMatrixWorld(). — yue you

yue you yue you · Accepted Answer · 2018-02-07T11:51:42

Call updateMatrixWorld() from the mesh after transformation will solve the problem. Credit to @prisoner849

proposedModel.updateMatrixWorld()

The reason is

An object's matrix stores the object's transformation relative to the object's parent; to get the object's transformation in world coordinates, you must access the object's Object3D.matrixWorld.

When either the parent or the child object's transformation changes, you can request that the child object's matrixWorld be updated by calling updateMatrixWorld().

Check detail here https://threejs.org/docs/#manual/introduction/Matrix-transformations

Raycasting after dynamically changing Mesh in Three.js

1 Answers