CODEWITHSUNDEEP
javascriptthree.js
David Biga
David Biga

Reputation: 2801

Rotating Mesh in world axis - THREE.js

I'm having difficulty rotating an object. I am currently using THREE.Shape to configure a custom shape, after creating the shape, I configure it as a Mesh and set the position of it to:

buildingMesh.position.set( -70, -300, levelY );

Now because of the position of the mesh as well as the camera it appears as if its standing up.

Heres what that looks like: First image

Now I recently added a Orbital camera that rotates around the world axis, once the camera moves, this is how it looks:

Second Image

Now this makes sense because the y axis was never configured when using the Three.Shape. What I am trying to figure out now is how can I turn that object so it appears to be standing up, as shown in the first image. I have tried using rotation on the x,y,z axis's but it always seems to only rotate within the objects axis.

Any suggestions?

Heres something I tried that I found on another question:

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);
    }

Upvotes: 0

Views: 750

Answers (2)

David Biga
David Biga

Reputation: 2801

So the primary problem here was that the mesh was built by multiple layers. All these layers actually had to be grouped together into an Object3D Which in turn allowed me to simply do: group.rotateOnAxis(axis,Math.pow(Math.PI, 2) / 2);

Hope this helps anyone in the future.

Upvotes: 0

Bartosz Krzeszewski
Bartosz Krzeszewski

Reputation: 167

Try:

mesh.rotate.x = Math.PI // will rotate over x axis 180 degree

where 'mesh' is object you have created (you can rotate 'y' and 'z' too)

Upvotes: 0

Related Questions