THREE.JS 使用 Orbit 控制时相机旋转丢失

Question

为了让您了解上下文，假设我有一台相机

camera = new THREE.PerspectiveCamera();
camera.position.set(1,1,1);
camera.lookAt(scene.position);
camera.rotation.set(Math.PI/2, 0 ,0) // <=== this is lost when the orbit control move 

然后我创建一个轨道控制

controls = new THREE.OrbitControls(camera, renderer.domElement);

问题是当我通过拖动鼠标点击或缩放来使用轨道控制时，相机旋转丢失了。

我尝试使用 controls.update() 但它不起作用

编辑

这是jsfiddle的链接

var camera;
var scene;
var conrols;
var renderer;

function init() {
  scene = new THREE.Scene();

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true

  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
  camera.position.set(0, 0, 5);
  scene.add(camera);

  scene.add(new THREE.AmbientLight(0xffffff, 0.6));

  var light1 = new THREE.HemisphereLight(0xffffbb, 0x080820, 0.7)
  scene.add(light1);


  var light2 = new THREE.SpotLight(0xffffff, 0.5);
  light2.position.set(4, 7, 23);
  scene.add(light2);

  var light3 = new THREE.SpotLight(0xffffff, 0.5);
  light3.position.set(4, 7, -23);
  //scene.add(light3);

  var geometry = new THREE.BoxGeometry(2, 1, 1);
  var material = new THREE.MeshLambertMaterial({
    color: 0x00ffff
  });
  var cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  controls = new THREE.OrbitControls(camera, renderer.domElement);


}


function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

document.getElementById('button').onclick = function() {
  //console.log("position");
  //console.log(camera.position);
  //console.log("rotation");
  //console.log(camera.rotation);

  camera.rotation.set(0, 0, 1.57);
  // camera.position.set(-0.041, 1.9, -1.21);

}



init();
animate();

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

<button id="button">change rotation</button>

在我的原始应用程序中，我有一个 3D 足部网格。有时我只需要点击一下就可以看到后脚的垂直视图。所以我应用了相机旋转。但是当我使用轨道控制移动相机时，相机旋转会跳转到旧值。

Answer 1

您可以像 2pha 所说的那样切换到第二个摄像头，也可以设置controls.enableRotate = false;