Cursor doesn't rotate properly if object is rotated as a child of an entity

[casonclagg]

The cursor needs to have a global view of where objects are and what direction they are facing.

[jujunjun110]

Thanks for information. I will fix when I have time 😉

[casonclagg]

Related: https://github.com/mrdoob/three.js/issues/2368

I'm trying to fix it, but not having much luck.

This is where I am at, maybe you have some insight as to why this doesn't work:

        var lookAtTarget = new THREE.Vector3().addVectors(intersection.point, intersection.face.normal);
        var rotationMatrix = new THREE.Matrix4();
        let rot = intersection.object.getWorldRotation()
        rotationMatrix.makeRotationFromEuler(new THREE.Euler(rot, 'XYZ'));
        lookAtTarget.applyMatrix4(rotationMatrix)
        data.target.object3D.lookAt(lookAtTarget);

My rotationMatrix has NaN's in it, so that's obviously not good... =(

[jujunjun110]

I had a luck to fix this issue like this😎

var global_normal = intersection.face.normal.clone();

// a matrix which represents item's movement, rotation and scale on global world
var mat = intersection.object.matrixWorld;

// remove parallel movement from the matrix
mat.setPosition(new THREE.Vector3(0, 0, 0));

// change local normal into global normal
global_normal.applyMatrix4(mat).normalize();

// look at target coordinate = intersection coordinate + global normal vector
var lookAtTarget = new THREE.Vector3().addVectors(intersection.point, global_normal);
data.target.object3D.lookAt(lookAtTarget);

// cursor coordinate = intersection coordinate + normal vector * 0.05(hover 5cm above intersection point)
var cursorPosition = new THREE.Vector3().addVectors(intersection.point, intersection.face.normal.multiplyScalar(0.05));
data.target.setAttribute("position", cursorPosition);