aframe / threejs相机手动旋转

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

我看到几个问题。 如果使用框架，则不应直接访问object3D。 你应该做

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

您可以使用声明性API将补间应用于任何实体

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

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

Answer 3

试试这个代码块，它对我来说适用于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) 。