Question

我正在尝试手动补间相机旋转到0,0：

camera.object3D.matrixAutoUpdate=false; 

var orgrot = { x : camera.object3D.rotation.x, y: camera.object3D.rotation.y };
var target = { x : 0, y: 0 };

var tween = new TWEEN.Tween(orgrot).to(target, 500);
tween.onUpdate(function(){
          camera.object3D.rotation.x= this.x;
          camera.object3D.rotation.y= this.y;
          camera.object3D.updateMatrix();

  });

补间按预期工作，但我对相机失去了鼠标控制权。为了得到它，我将matrixAutoUpdate设置为true

tween.onComplete(function(){
     document.querySelector('#camera').object3D.matrixAutoUpdate=true
});

但在那之后，相机旋转变回原来的位置（在补间之前），我想保持0,0。我错过了什么？感谢

UPDATE以下是仅使用aframe而不进入threejs对象的版本

我认为问题是相机外观控制组件

启用时 - 我无法为相机旋转或甚至setAttribute设置动画。我必须首先禁用它 - 而不是启动动画，而不是再次启用它。

但问题是，当我再次启用它时：

camera.setAttribute ('look-controls-enabled',"true")

相机返回原始旋转（重置动画前的状态）。使用matrixAutoUpdate=false/true

时出现类似问题

这是我的笔http://codepen.io/anon/pen/dMjrWd

如果向左旋转30度，它将触发resetCamera动画 - 它按预期工作。但只有当外观组件被禁用时。如果我在“animationend”事件中再次启用它 - 旋转将返回到原始状态并一次又一次触发resetCamera

Answer 1

你真的不应该混淆matrixAutoUpdate。

但是考虑到你，请尝试以下操作强制position，quaternion和scale与matrix匹配：

object.matrix.decompose( object.position, object.quaternion, object.scale );

three.js r.76

Answer 2

我看到了几个问题。如果您使用的是aframe，则不应直接访问object3D。你应该做

cameraEl.setAttribute('position', {x: 0, y: 0; z;0 })

您可以使用the declarative API

将补间应用于任何实体

如果要独立于正在运行的补间修改摄像机，可以将摄像机包装在另一个实体中

<a-entity rotation="0 360 0"><a-entity id="camera" camera><a-animation ...></a-animation></a-entity></a-entity>

Answer 3

试试这个代码块，它适用于aframe 0.8.2

static faceCameraToCoords(camera, coords){
    camera.setAttribute("look-controls",{enabled:false})
    camera.setAttribute("rotation", coords);
    var newX = camera.object3D.rotation.x
    var newY = camera.object3D.rotation.y
    camera.components['look-controls'].pitchObject.rotation.x = newX
    camera.components['look-controls'].yawObject.rotation.y = newY
    camera.setAttribute("look-controls",{enabled:true})
}

Answer 4

在版本0.8.0之后，您将无法再设置a-camera的轮播。

更新的Aframe 0.9.2解决方案：

给出以下相机设置：

<a-entity
  id="rig"
  position="0 1.6 0">
  <a-camera position="0 0 0"></a-camera>
</a-entity>

您可以这样直接更改相机的旋转角度：

const cameraEl = document.querySelector('a-camera');
cameraEl.components['look-controls'].pitchObject.rotation.x = newRotation.x;
cameraEl.components['look-controls'].yawObject.rotation.y = newRotation.y;

确保newRotation值以弧度为单位。例如，使用THREE.Math.degToRad(newRotation.x)。

aframe / threejs相机手动旋转

4 个答案: