Question

我使用此功能在世界空间中旋转对象Y轴：

function rotateWorldYAxis( obj, angle ) {
    quat.setFromAxisAngle( new THREE.Vector3(0,1,0), angle );
    obj.quaternion.multiplyQuaternions(quat,obj.quaternion);
    obj.updateMatrixWorld();
}

但它不能使用旋转的父对象。

这是小提琴的例子：

父母未轮换时的正确行为：

＆＃13;

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, controls;
var renderer;
var quat = new THREE.Quaternion();
var axis = new THREE.Vector3();

init();
animate();

function init() {
  container = document.createElement( 'div' );
  document.body.appendChild( container );
  
  // CAMERA
  camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
  camera.position.set( 0, 0, 500 );
  
	scene = new THREE.Scene();
  scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
  
  var light = new THREE.PointLight( 0xffffff );
  light.position.set(100,100,100);
  scene.add( light );  
  
  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  renderer.domElement.style.position = "relative";
  container.appendChild( renderer.domElement );
  
  
  
  //____________________________//
  
  cube = new THREE.Mesh(
  	new THREE.CubeGeometry(50,100,50),
    new THREE.MeshPhongMaterial()
  );
  cube.rotation.set(Math.PI/3, 0, 0);
  
  cubeParent = new THREE.Object3D();
  cubeParent.rotation.set(0,0,0) //Not rotated parent
  cubeParent.add(cube)
  scene.add(cubeParent)
  
  //____________________________//
  
  
  
  var grid = new THREE.Mesh(
  	new THREE.PlaneGeometry(200, 200, 10, 10),
    new THREE.MeshBasicMaterial({wireframe: true})
  )
  grid.position.y = -100
  grid.rotation.x = Math.PI/2
  scene.add(grid);
  window.addEventListener( 'resize', onWindowResize, false );
}

function rotateWorldYAxis( obj, angle ) {
    quat.setFromAxisAngle( new THREE.Vector3(0,1,0), angle );
    obj.quaternion.multiplyQuaternions(quat,obj.quaternion);
    obj.updateMatrixWorld();
}

function animate() {
  requestAnimationFrame( animate );
  render();
  rotateWorldYAxis(cube, 0.01)
}

function render() {
  renderer.render( scene, camera );
}



function onWindowResize( event ) {
  SCREEN_WIDTH = window.innerWidth;
  SCREEN_HEIGHT = window.innerHeight;
  renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  camera.updateProjectionMatrix();
}

＆＃13;

<script src="https://threejs.org/build/three.js"></script>
<p style="position: fixed;z-index:1;top:0;text-align:center;color: #fff">This is correct behavior</p>

＆＃13;

旋转父级时的错误行为：

＆＃13;

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, controls;
var renderer;
var quat = new THREE.Quaternion();
var axis = new THREE.Vector3();

init();
animate();

function init() {
  container = document.createElement( 'div' );
  document.body.appendChild( container );
  
  // CAMERA
  camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
  camera.position.set( 0, 0, 500 );
  
	scene = new THREE.Scene();
  scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
  
  var light = new THREE.PointLight( 0xffffff );
  light.position.set(100,100,100);
  scene.add( light );  
  
  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  renderer.domElement.style.position = "relative";
  container.appendChild( renderer.domElement );
  
  
  
  //____________________________//
  
  cube = new THREE.Mesh(
  	new THREE.CubeGeometry(50,100,50),
    new THREE.MeshPhongMaterial()
  );
  cube.rotation.set(Math.PI/3, 0, 0);
  
  cubeParent = new THREE.Object3D();
  cubeParent.rotation.set(1,0,0) //Rotated parent
  cubeParent.add(cube)
  scene.add(cubeParent)
  
  //____________________________//
  
  
  
  var grid = new THREE.Mesh(
  	new THREE.PlaneGeometry(200, 200, 10, 10),
    new THREE.MeshBasicMaterial({wireframe: true})
  )
  grid.position.y = -100
  grid.rotation.x = Math.PI/2
  scene.add(grid);
  window.addEventListener( 'resize', onWindowResize, false );
}

function rotateWorldYAxis( obj, angle ) {
    quat.setFromAxisAngle( new THREE.Vector3(0,1,0), angle );
    obj.quaternion.multiplyQuaternions(quat,obj.quaternion);
    obj.updateMatrixWorld();
}

function animate() {
  requestAnimationFrame( animate );
  render();
  rotateWorldYAxis(cube, 0.01)
}

function render() {
  renderer.render( scene, camera );
}



function onWindowResize( event ) {
  SCREEN_WIDTH = window.innerWidth;
  SCREEN_HEIGHT = window.innerHeight;
  renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  camera.updateProjectionMatrix();
}

＆＃13;

<script src="https://threejs.org/build/three.js"></script>
<p style="position: fixed;z-index:1;top:0;text-align:center;color: #fff">Parent rotate cause this wrong behavior, this cube need to rotates on Y world axis</p>

＆＃13;

任何帮助表示赞赏！谢谢！

在世界空间中旋转父对象旋转对象？

0 个答案: