Three js: How to get normal of rotated plane

Question

I am trying to get normal of rotated plane. My solution is to copy the updated plane then get normals. It is working when I rotate by only 1 angle, but not works in rotating by 2 or 3 angles. jsFiddle

Green one is copied plane, purple one rotated plane. enter image description here

How to solve this? Please help me

My copy function:

 function copyPlane() {
    let copyPlaneGeom = new THREE.PlaneGeometry(3, 3, 3);
    copyPlaneGeom.rotateX(plane.rotation.x);
    copyPlaneGeom.rotateY(plane.rotation.y);
    copyPlaneGeom.rotateZ(plane.rotation.z);
    let copyPlane = new THREE.Mesh(copyPlaneGeom, new THREE.MeshBasicMaterial({color: 0x00ff00}));
        scene.add(copyPlane)
    
    let normals = copyPlane.geometry.faces[0].normal

Answer 1

I think with that approach, you'll always get a vector of 0, 0, 1 because a plane's face normal is always (0, 0, 1) * objectRotation.

Instead, try starting with a Vector3 of 0, 0, 1, and then apply the object's rotation to it:

var originalNormal = new Vector3(0, 0, 1);

// Get the mesh rotation
var objRotation = plane.rotation;

// Apply mesh rotation to vector
originalNormal.applyEuler(objRotation);

now you have a Vector3 with the updated wold normal, instead of the local normal! Read about .applyEuler() here.