ThreeJS绕轴旋转

Question

我希望您能围绕浅蓝色轴旋转这个立方体。如果我将旋转改为THREE.Vector3(0,0,0)而不是THREE.Vector3(0.4,0,0.9)，它就可以工作。

我不知道为什么随着迭代次数的增加，立方体的形状会发生变化并变得更小。 这是一个展示此问题的fiddle（请忽略糟糕的实现。我只是修改了一个旧版本）。

因此，这是我进行旋转的方式：

function rotate(deg) {
  _initTranslation = new THREE.Vector3();
  _initRotation = new THREE.Quaternion();
  _initScale = new THREE.Vector3();
  rotateMatrix = new THREE.Matrix4();

  cube.matrix.decompose(_initTranslation, _initRotation, _initScale);

  cube.matrix = rotateMatrix.compose(_initTranslation, new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0.4,1,0.9), THREE.Math.degToRad(deg)), _initScale);

  cube.matrixAutoUpdate = false;
  cube.matrixWorldNeedsUpdate = true;

}

也许有人知道我做错了什么。

var renderer, scene, camera, controls;
var geometry, material, line, vertices, last, _initTranslation, _initRotation, initScale, rotateMatrix;

var deg = 0;

init();
animate();

function init() {

  document.body.style.cssText = 'margin: 0; overflow: hidden;' ;

  renderer = new THREE.WebGLRenderer( { alpha: 1, antialias: true, clearColor: 0xffffff }  );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.set( 5, 5, 5 );
  controls = new THREE.OrbitControls( camera, renderer.domElement );
  
  geometry2 = new THREE.BoxGeometry( .5, .5, .5 );
  material2 = new THREE.MeshNormalMaterial();
  cube = new THREE.Mesh( geometry2, material2 );
  scene.add( cube );       
  

  material = new THREE.LineBasicMaterial({ color: 0x0077ff }); 
  geometry = new THREE.Geometry();
  geometry.vertices.push( new THREE.Vector3( 0, 0, 0) );
  line = new THREE.Line( geometry, material ) 
  scene.add( line );
  
  var sphereAxis = new THREE.AxesHelper(20);
  scene.add(sphereAxis);

  addStep();
  
  cube.lookAt(new THREE.Vector3(0.4,0,0.9));

}

function addStep() {

  vertices = geometry.vertices;
  last = vertices[ vertices.length - 1 ];
  vertices.push( 

    new THREE.Vector3(0.4,0,0.9) 

  );

  geometry = new THREE.Geometry();
  geometry.vertices = vertices;

  scene.remove( line );
  line = new THREE.Line( geometry, material )
  scene.add( line );

}

function animate() {
    
  rotate(deg)
  
  deg += 5
  
  requestAnimationFrame( animate ); 
  renderer.render(scene, camera);
  controls.update();

}

function rotate(deg) {
  _initTranslation = new THREE.Vector3();
  _initRotation = new THREE.Quaternion();
  _initScale = new THREE.Vector3();
  rotateMatrix = new THREE.Matrix4();
    
  cube.matrix.decompose(_initTranslation, _initRotation, _initScale);
  
  cube.matrix = rotateMatrix.compose(_initTranslation, new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0.4,0,0.9), THREE.Math.degToRad(deg)), _initScale);

    
    cube.matrixAutoUpdate = false;
    cube.matrixWorldNeedsUpdate = true;
  
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

- breezertwo

---

可能是重复问题：https://dev59.com/Fo3da4cB1Zd3GeqP7P3s - WestLangley

Answer 1

四元数的向量分量必须归一化。一个单位向量的长度为1.0。

在您的情况下，向量分量的长度（THREE.Vector3(0.4, 0, 0.9)）小于1.0：

sqrt(0.9*0.9 + 0.0*0.0 + 0.4*0.4) = sqrt(0.81 + 0.16) = sqrt(0.97) = 0.9409

这会导致立方体随时间缩小。可以通过记录缩放组件（console.log(_initScale)）来验证。
如果使用长度大于1.0的向量组件（例如THREE.Vector3(0.5, 0, 0.9)），则立方体将会放大。
规范化四元数的轴，以解决问题：

let axis = new THREE.Vector3(0.4, 0, 0.9);
let q = new THREE.Quaternion().setFromAxisAngle(axis.normalize(), THREE.Math.degToRad(deg)); 
cube.matrix = rotateMatrix.compose(_initTranslation, q, _initScale);

如果您想让立方体的一面与坐标轴对齐，使得该坐标轴垂直于该面，则需要进行两次旋转。
首先，沿着x轴（例如）连续旋转立方体，然后将x轴旋转到目标轴（0.4、0、0.9）。使用.setFromAxisAngle初始化一个四元数，将x轴旋转到目标轴：

let x_axis = new THREE.Vector3(1, 0, 0);
let axis = new THREE.Vector3(0.4, 0, 0.9);
let q_align = new THREE.Quaternion().setFromUnitVectors(x_axis, axis.normalize());
let q_rotate = new THREE.Quaternion().setFromAxisAngle(x_axis, THREE.Math.degToRad(deg));
let q_final = q_align.clone().multiply(q_rotate);
cube.matrix = rotateMatrix.compose(_initTranslation, q, _initScale);

看下面的例子，比较两种不同的行为：

var renderer, scene, camera, controls;
var geometry, material, line, vertices, last, _initTranslation, _initRotation, initScale, rotateMatrix;

var deg = 0;

init();
animate();

function init() {

    document.body.style.cssText = 'margin: 0; overflow: hidden;' ;

    renderer = new THREE.WebGLRenderer( { alpha: 1, antialias: true, clearColor: 0xffffff }  );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 1, 3, 3 );
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    
    geometry2 = new THREE.BoxGeometry( .5, .5, .5 );
    material2 = new THREE.MeshNormalMaterial();
    
    let shift = 0.5
    cube = new THREE.Mesh( geometry2, material2 );
    cube.matrix.makeTranslation(shift, 0, 0);
    scene.add( cube );
    cube2 = new THREE.Mesh( geometry2, material2 );
    cube2.matrix.makeTranslation(-shift, 0, 0);
    scene.add( cube2 );       
    
    material = new THREE.LineBasicMaterial({ color: 0x0077ff }); 
    geometry = new THREE.Geometry();
    geometry.vertices.push( new THREE.Vector3(-0.4, 0, -0.9), new THREE.Vector3(0.4, 0, 0.9) );
    line = new THREE.Line( geometry, material ) 
    line.position.set(shift, 0, 0);
    scene.add( line );
    line2 = new THREE.Line( geometry, material ) 
    line2.position.set(-shift, 0, 0);
    scene.add( line2 );

    var sphereAxis = new THREE.AxesHelper(20);
    scene.add(sphereAxis);
    
    window.onresize = function() {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    }
}

function animate() {  
    rotate(deg)
    deg += 5
    
    requestAnimationFrame( animate ); 
    renderer.render(scene, camera);
    controls.update();
}

function rotate(deg) {
    _initTranslation = new THREE.Vector3();
    _initRotation = new THREE.Quaternion();
    _initScale = new THREE.Vector3();
    
    let x_axis = new THREE.Vector3(1, 0, 0);
    let axis = new THREE.Vector3(0.4, 0, 0.9);

    // cube

    cube.matrix.decompose(_initTranslation, _initRotation, _initScale);
    
    let q_align = new THREE.Quaternion().setFromUnitVectors(x_axis, axis.normalize());
    let q_rotate = new THREE.Quaternion().setFromAxisAngle(x_axis, THREE.Math.degToRad(deg));
    let q_final = q_align.clone().multiply(q_rotate);
    
    cube.matrix.compose(_initTranslation, q_final, _initScale);
    cube.matrixAutoUpdate = false;
    cube.matrixWorldNeedsUpdate = true;

    // cube2

    cube2.matrix.decompose(_initTranslation, _initRotation, _initScale);
    
    q = new THREE.Quaternion().setFromAxisAngle(axis.normalize(), THREE.Math.degToRad(deg));
    
    cube2.matrix.compose(_initTranslation, q, _initScale);
    cube2.matrixAutoUpdate = false;
    cube2.matrixWorldNeedsUpdate = true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

- Rabbid76

---

谢谢。现在我知道为什么它缩小了。但它仍然不能围绕轴旋转。 - breezertwo

@breezertwo "但它仍然不能围绕轴旋转" - 不！ 正方体完美地围绕着轴旋转！ 也许你不知道围绕一个轴旋转意味着什么。 可能你想实现完全不同的事情。 我只能猜测。 如果您想将立方体的任意一侧“对齐”到轴上，使轴垂直于该侧，则请参见答案中的新建议。 您的问题不完整且不清楚。 - Rabbid76

感谢@Rabbid76。是的，抱歉表述不清...但无论如何，这是一个很好的解决方案。非常感谢。 - breezertwo