Just to note, I am aware that this question has been asked before. However, the previous answers did not address my specific situation and requirements.
Currently, I am developing a Rubik's cube using three.js. To achieve lifelike rotations, I am rotating the cube around a specific point. Here is the function I am utilizing for this purpose:
THREE.Object3D.prototype.rotateAroundWorldAxis = function () {
// Rotates the object around a specified axis in the world space (the axis goes through the point)
// Assumption is that the axis is normalized
// Also assumes that the object does not have a rotated parent
var q = new THREE.Quaternion();
return function rotateAroundWorldAxis(point, axis, angle) {
q.setFromAxisAngle(axis, angle);
this.applyQuaternion(q);
this.position.sub(point);
this.position.applyQuaternion(q);
this.position.add(point);
return this;
}
}();
Additionally, I have developed a manual function to calculate the face normals based on 3 points. I am aware that three.js already provides a similar function, but this is part of my debugging process. The function works correctly, however, when I rotate a face of the Rubik's cube using a function, neither the built-in normals nor my function give the correct direction. They simply return the original facing direction. Below is the function for calculating the normals:
function computeNormal(p,face) {
let a = p.geometry.vertices[face.a]
let b = p.geometry.vertices[face.b]
let c = p.geometry.vertices[face.c]
let d = new THREE.Vector3(0,0,0)
d.crossVectors(b.sub(a),c.sub(a))
console.log(a, b, c, d)
return d.normalize()
}
Any assistance on this matter would be greatly appreciated. If you require any additional segments of my code, I am more than willing to provide them.