带有两个(切换)摄像头的Three.js轨道控制
我在一个场景里有两个摄像头，一个视口和一个渲染器。我在相机之间切换(使用html按钮)。
问题
问题1
对于camera1，移动鼠标没有响应。当我切换到camera2时，轨道控制工作得很好。切换回camera1，移动鼠标仍然没有反应。
v1原版(没有camera1的响应) jsfiddle.net/steveow/xu0k1z75/
更新:问题1，由Stallion修正-避免将相机位置设置为(0,0,0)。
问题2
对于camera1来说，还有一个问题是潘和多莉非常慢，至少在一开始是这样的。他们可能会在稍后(在使用camera2进行摇摄和玩偶之后)加速，但很快就会加速。
小提琴手: v2 camera1 Pan&Dolly非常慢，至少在一开始是这样，以后可能会过度。http://jsfiddle.net/steveow/uk94hxrp/
更新: Pan & Dolly的“慢度”是因为相机非常接近OrbitControls.target位置(默认为(0,0,0))。因此，如果我选择一个不同的.target位置，“缓慢”是可以避免的。
备注
我目前正在创建一个新的THREE.OrbitControls对象，每当我切换相机。但在初始化过程中，我曾尝试创建两个持久的THREE.OrbitControls对象，然后将一个名为"controls“的通用变量分配给任何一个应该是活动的变量。我尝试过将orbitControls设置为html“容器”，而不是renderer.domElement。我尝试过在动画循环中包括controls.update()。
一段时间前，我确实让它和任何一种相机一起工作，但我不能再回到那个位置了。
我看过OrbitControls代码，但一点也不明智。
代码(对于最初的问题，问题1，但由于稍微修改了。)。
这是摄像机的启动代码：-
//... camera1
camera1Fov = 75;
camera1Far = 1200;
camera1 = new THREE.PerspectiveCamera( camera1Fov, window.innerWidth / window.innerHeight, 1, camera1Far );
//camera1.position.z = camera1Far;
camera1.position.set(0,0,0);
scene.add(camera1);
camera1.name = "Camera_1";
var sGeo = new THREE.SphereGeometry( 40,8,8);
var sMaterial = new THREE.MeshPhongMaterial( { color: 0xff00ff } );
Cam1Target = new THREE.Mesh(sGeo, sMaterial);
Cam1Target.position.set(0,0,-200);
scene.add(Cam1Target);
controls1 = new THREE.OrbitControls(camera1, renderer.domElement);
controls = controls1;//... initially.
camera1.lookAt( Cam1Target );
RenderCamera = camera1;
camera1_Helper = new THREE.CameraHelper( camera1 );
camera1_Helper.update();
scene.add (camera1_Helper);
// camera2
camera2 = new THREE.PerspectiveCamera( cameraFOV, window.innerWidth / window.innerHeight, 1, 20000 );
c2PosX = 5500;
c2PosY = 3500;
c2PosZ = -10000;
camera2.position.set( c2PosX, c2PosY, c2PosZ );
scene.add(camera2);
camera2.name = "Camera_2";
//controls2 = new THREE.OrbitControls(camera2, renderer.domElement);
//camera2.lookAt(camera1);这是动画和相机切换和相机重置代码：-
//----------------------------------------------------------------
function F_frame()
{
//... Render
af = requestAnimationFrame(F_frame);
controls.update();
renderer.render(scene, RenderCamera);
tick+=0.001;
}//... EOF Frame().
//-------------------------------------------------------------
function F_Switch_Camera()
{
var SelectedCameraString = document.getElementById('myTextField').value;
//...toggle
if (SelectedCameraString == "camera1")
{
SelectedCameraString = "camera2";
RenderCamera = camera2;
controls = new THREE.OrbitControls(camera2, container);//renderer.domElement);
//controls.object = camera2;
//controls.update();
//controls = controls2;
} else {
SelectedCameraString = "camera1";
RenderCamera = camera1;
controls = new THREE.OrbitControls(camera1, container);//renderer.domElement);
//controls.object = camera1;
//controls.update();
//controls = controls1;
}
document.getElementById('myTextField').value = SelectedCameraString;
}
//----------------------------------------------------------------------
function F_Reset_Camera1()
{
camera1.position.set(0,0,0);
camera1.lookAt ( Cam1Target );
}
//----------------------------------------------------------------------
function F_Reset_Camera2()
{
camera2.position.set( c2PosX, c2PosY, c2PosZ );
camera2.lookAt ( camera1 );
}更新
感谢用户Stallion的简单修复-不要设置相机的世界位置为(0,0,0)使用(0,0,1)代替。
回答 1
Stack Overflow用户
发布于 2016-03-26 21:21:32
有一个快速解决办法：
将camera1位置设置为
camera1.position.set(0,0,1);
检查小提琴http://jsfiddle.net/Stallion33/sgcfu4tt/
https://stackoverflow.com/questions/36239892
复制相似问题
腾讯云开发者
