Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to rotate a object on axis world three.js?

Is it possible to do rotations taking axis of the world and not of the object?

I need to do some rotations of an object, but after the first rotation, I can't do other rotations like i want.

If it's not possible to do rotation on the axis of the world, my second option is to reset the axis after the first rotation. Is there some function for this?

I can't use object.eulerOrder because it changes the orientation of my object when I set object.eulerOrder="YZX" after some rotations.

like image 208
EnZo Avatar asked Jun 20 '12 12:06

EnZo


People also ask

How do I rotate a point in 3 JS?

js suggest the way to rotate an object around a point using three. js is to create a parent object at the position you want to rotate around, attach your object, and then move the child. Then when the parent is rotated the child rotates around the point.

How do I change the axis of an object rotation in blender?

To rotate objects, activate Rotate mode by pressing RKEY. As in Grab mode, you can change the rotation by moving the mouse, confirm with LMB, or ENTER cancel with RMB or ESC. Rotation in 3D space occurs around an axis, and there are various ways to define this axis.


1 Answers

UPDATED: THREE - 0.125.2

DEMO: codesandbox.io

const THREE = require("three");

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1, 4, 4, 4);
const material = new THREE.MeshBasicMaterial({
  color: 0x628297,
  wireframe: true
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// select the Z world axis
const myAxis = new THREE.Vector3(0, 0, 1);
// rotate the mesh 45 on this axis
cube.rotateOnWorldAxis(myAxis, THREE.Math.degToRad(45));

function animate() {
  // rotate our object on its Y axis,
  // but notice the cube has been transformed on world axis, so it will be tilted 45deg.
  cube.rotation.y += 0.008;
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();
like image 86
Neil Avatar answered Oct 23 '22 08:10

Neil