我在一个场景中有两个摄像头,一个视口和一个渲染器 . 我在相机之间切换(使用html按钮) .
问题
Problem 1
对于camera1,移动鼠标没有任何响应 . 当我切换到camera2时,轨道控制工作正常 . 切换回camera1仍然没有移动鼠标的响应 .
jsfiddle v1 Original(没有来自camera1的回复)jsfiddle.net/steveow/xu0k1z75/
更新:问题1,由Stallion修复 - 避免将摄像机位置设置为(0,0,0) .
Problem 2
对于camera1,仍存在Pan和Dolly非常慢的问题,至少在最初阶段 . 它们可能会在以后加速(在使用camera2进行摇摄和玩偶之后),但速度非常快 .
jsfiddle:v2 camera1 Pan&Dolly非常慢,至少最初,可能过晚 . http://jsfiddle.net/steveow/uk94hxrp/
更新:Pan&Dolly“慢”是因为相机非常接近OrbitControls.target位置(默认为(0,0,0)) . 因此,如果我选择不同的.target位置,则可以避免“缓慢” .
笔记
我每次切换相机时都会创建一个新的THREE.OrbitControls对象 . 但是之前我曾尝试在初始化期间创建两个持久的THREE.OrbitControls对象,然后将一个名为“controls”的通用变量分配给任何一个应该处于活动状态的变量 . 我已经尝试将orbitControls设置为html div“container”而不是renderer.domElement . 我试过在动画循环中包含controls.update() .
我确实让它在前一段时间使用过任何一款相机,但我无法回复 .
我看过OrbitControls代码,但不是更明智的 .
CODE(原问题,问题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 );
}
UPDATE
非常感谢用户Stallion的简单修复 - 不要将摄像机世界位置设置为(0,0,0)使用(0,0,1) .
1 回答
有快速解决方法:
将camera1的位置设置为
camera1.position.set(0,0,1);
检查小提琴http://jsfiddle.net/Stallion33/sgcfu4tt/