在 Three.js 中切换相机类型时未保留相机的方向答案

【问题标题】：Orientation of camera not preserved when switching between camera types in Three.js在 Three.js 中切换相机类型时未保留相机的方向
【发布时间】：2018-08-29 08:15:49
【问题描述】：

All of the code

您好，我在透视相机和正交相机之间切换时遇到问题。我的目标是能够在保留相机的位置和方向的同时轻松地在两种相机类型之间来回切换。以下是相关代码（第 98 行）：

let display = gui.addFolder("Display");
display.add(guiOptions.display,"orthographicCamera").name("Orthographic Camera").onChange(function(){
  var position=camera.position;
  var target=controls.target;
  var quaternion=camera.quaternion;
  if (guiOptions.display.orthographicCamera){
    camera = new THREE.OrthographicCamera(
      window.innerWidth / - (zoom / scaleFactor),
      window.innerWidth / (zoom / scaleFactor),
      window.innerHeight / (zoom / scaleFactor),
      window.innerHeight / - (zoom / scaleFactor),
      -500, 1000);
  }
  else{
    camera = new THREE.PerspectiveCamera( 115, window.innerWidth / window.innerHeight, 0.000001, 10000 );
  }
  camera.position.set(position.x,position.y,position.z);
  camera.quaternion.set(quaternion._x,quaternion._y,quaternion._z,quaternion._w);
  controls=new THREE.TrackballControls(camera,renderer.domElement);
  controls.dynamicDampingFactor = .15;
  controls.target=target;
});

我的问题是，对于某些相机旋转，透视相机和正交相机之间的切换会导致生成的相机的方向不同。我以为是四元数属性的问题，但是改成之前的值好像没有任何效果。

我似乎无法弄清楚如何解决这个问题。非常感谢您的帮助，提前感谢！

编辑：我想通了，但我现在正在做一些事情，所以我稍后会更新我的解决方案

【问题讨论】：

标签： javascript three.js

【解决方案1】：

执行以下操作：

orthoCamera=orthographic camera instance
orthoControls=document.body.appendChild(renderer.domElement);
orthoControls=new THREE.TrackballControls(orthoCamera,renderer.domElement);
perspectiveCamera=perpsective camera instance
perspectiveControls=new THREE.TrackballControls(perspectiveCamera,renderer.domElement);
...
display.add(guiOptions.display,"orthoCamera").name("Orthographic Camera");
...
function animate() {
    requestAnimationFrame(animate);
    orthoControls.update();
    perspectiveControls.update();
    if (guiOptions.display.orthoCamera){
        renderer.render(scene, orthoCamera)
    }
    else{
        renderer.render(scene, perspectiveCamera)
    }
}

因此，两个控件同时处于活动状态，并且在相机视图之间切换只是在要渲染的不同相机之间切换。

【讨论】：