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

的链接

＆＃13;

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();

＆＃13;

<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>

＆＃13;

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

Answer 1

您可以切换到第二个相机，如2pha说，或者您可以设置controls.enableRotate = false;

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

1 个答案: