threejs - raycasting in AR with controller after repositioning

Question

I'm rather new to threejs, so what I'm doing might not be the most efficient way.

I have an object in AR on a mobile device and I want to know if I intersect with it when touching on the screen.
I use the following code to generate the raycast, and it works initally.

    const tempMatrix = new THREE.Matrix4();
    tempMatrix.identity().extractRotation(this.controller.matrixWorld);
    this.raycaster.ray.origin.setFromMatrixPosition(this.controller.matrixWorld);
    this.raycaster.ray.direction.set(0, 0, -1).applyMatrix4(tempMatrix);

However, I have the ability to reposition the object (i.e. reset the position so the object is in front, relative to the current camera direction and position) by moving and rotating the whole scene.

After the repositioning, the raycasting is completely offset and is not casting rays anywhere near where I touch the screen.

Repositioning is done like this (while it works, if there's a better way, let me know!) :

public handleReposition(): void {
    const xRotation = Math.abs(this.camera.rotation.x) > Math.PI / 2 ? -Math.PI : 0;
    const yRotation = this.camera.rotation.y;

    this.scene.rotation.set(xRotation, yRotation, xRotation);
    this.scene.position.set(this.camera.position.x, this.camera.position.y, this.camera.position.z);
  }

How can I achieve to raycast to the correct new location?

Thanks!

score 1 · Answer 1 · answered Nov 13 '21 at 21:17

Assuming this.scene is actually the main threejs Scene, it's usually a bad idea to change its rotation or position, since it will affect everything inside the scene, including the controller. I'd suggest moving your object instead, or add your object(s) to a Group and move that.

threejs - raycasting in AR with controller after repositioning

1 Answers1