CODEWITHSUNDEEP
javascriptthree.jsraycasting
yue you
yue you

Reputation: 2264

Raycasting after dynamically changing Mesh in Three.js

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!

Upvotes: 1

Views: 1322

Answers (1)

yue you
yue you

Reputation: 2264

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

Upvotes: 1

Related Questions