I'm struggling with rotating an object in my project. I am currently utilizing THREE.Shape to define a custom shape. After creating the shape, I convert it into a Mesh and set its position to:
buildingMesh.position.set(-70, -300, levelY);However, due to the position of the mesh and the camera, it looks like the object is standing upright.
Here is how it appears: https://i.sstatic.net/XK8fy.png
I recently implemented an Orbital camera that rotates around the world axis. When the camera moves, the object looks like this:
https://i.sstatic.net/dXNtN.png
This is happening because the y axis was not configured when using the THREE.Shape. Now, I'm trying to find a way to rotate the object so it appears upright, as shown in the initial image. I have experimented with rotations on the x, y, and z axis but it always seems to rotate within the object's axis.
Do you have any suggestions?
Here's a method I attempted after finding it in another forum:
rotateAroundWorldAxis: function(object, axis, radians) {
this.rotWorldMatrix = new THREE.Matrix4();
this.rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
this.rotWorldMatrix.multiply(object.matrix); // pre-multiply
object.matrix = this.rotWorldMatrix;
object.rotation.setFromRotationMatrix(object.matrix);
}