如何在轴世界three.js上旋转对象? [英] 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?

我不能使用 object.eulerOrder 因为当我在一些旋转后设置 object.eulerOrder="YZX" 时它改变了我的对象的方向.

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

推荐答案

UPDATED: THREE - 0.125.2

演示: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();

这篇关于如何在轴世界three.js上旋转对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！