three.js所拍摄装置旋转时丢失轨道控制用于

为了让你进入的背景下，让说，我有一个摄像头three.js所拍摄装置旋转时丢失轨道控制用于

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脚网格。有时候我只需要点击一下就可以看到背部的垂直视图。所以我应用相机旋转。但是当我用轨道控制移动相机时，相机旋转会跳到旧值。

来源

2017-03-16 Hamza KABBAJ

而不是旋转的摄像头，你可能要设置的'controls.target'。如果您发布了[jsfiddle]（https://jsfiddle.net/），那么帮助您更容易 – 2pha

@ 2pha以下是jsfiddle的链接： [jsfiddle]（https://jsfiddle.net/ o4f03mdo /） –

我不确定你想要达到的目标。如果您使用轨道控制，为什么要旋转相机？对不起，我应该要求你在这里附上一个片段，而不是链接到jsfiddle – 2pha

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

来源

2017-03-23 21:43:24 hEins

three.js所拍摄装置旋转时丢失轨道控制用于

回答

相关问题