Three.js 轨道控制与两个(切换)相机 [英] Three.js Orbit Controls with Two (Toggled) Cameras
问题描述
我在一个场景中有两个摄像头,一个视口和一个渲染器.我在相机之间切换(使用 html 按钮).
I have two cameras in one scene and one viewport and one renderer. I toggle (using html buttons) between cameras.
问题
问题 1
对于camera1,移动鼠标没有反应.当我切换到 camera2 时,轨道控制工作正常.切换回camera1,移动鼠标仍然没有反应.
For camera1 there is no response from moving the mouse. When I toggle to camera2 the orbit control works fine. Toggling back to camera1 there is still no response from moving the mouse.
jsfiddle v1 原版(camera1 无响应)jsfiddle.net/steveow/xu0k1z75/
jsfiddle v1 Original (no response from camera1) jsfiddle.net/steveow/xu0k1z75/
更新:问题 1,由 Stallion 修复 - 避免将相机位置设置为 (0,0,0).
UPDATE: Problem 1, Fixed by Stallion - avoid setting camera position to (0,0,0).
问题 2
对于camera1,仍然存在Pan 和Dolly 非常慢的问题,至少在最初是这样.它们可能会在稍后加速(在使用相机 2 进行平移和推车之后),但随后会非常快.
For camera1 there remains a problem that Pan and Dolly are very slow, at least initially. They may speed up later (after panning & dollying with camera2) but are then very fast.
jsfiddle:v2 camera1 Pan &多莉很慢,至少在开始时是这样,后来可能会过度.http://jsfiddle.net/steveow/uk94hxrp/
jsfiddle: v2 camera1 Pan & Dolly is very slow, at least initially, maybe excessive later. http://jsfiddle.net/steveow/uk94hxrp/
更新:Pan &多莉缓慢"是因为相机非常靠近 OrbitControls.target 位置(默认为 (0,0,0)).因此,如果我选择不同的 .target 位置,则可以避免缓慢".
UPDATE: Pan & Dolly "slowness" is because camera is very close to the OrbitControls.target position (which defaults to (0,0,0)). So if I choose a different .target position the "slowness" can be avoided.
注意事项
每当我切换相机时,我都会创建一个新的 THREE.OrbitControls 对象.但之前我曾尝试在初始化期间创建两个持久性 THREE.OrbitControls 对象,然后将一个名为controls"的通用变量分配给应该处于活动状态的任何一个.我曾尝试将orbitControls 设置为html div容器"而不是renderer.domElement.我试过在动画循环中包含 control.update() .
I am currently creating a new THREE.OrbitControls object whenever I switch cameras. But previously I have tried creating two persistent THREE.OrbitControls objects during initialisation and then assigning a general variable called "controls" to whichever one is supposed to be active. I have tried setting the orbitControls to an html div "container" rather than the renderer.domElement. I have tried including controls.update() in the animation loop.
前段时间我确实在任何一台相机上都使用过它,但我无法回到那个状态.
I did have it working with either camera some time ago but I cannot get back to that.
我看过 OrbitControls 的代码,但我不知道.
I have looked at the OrbitControls code but am none-the-wiser.
CODE(对于原始问题,问题 1,但稍有修改.
CODE (as for original Problem, Problem 1 but since modified slightly.).
这是相机启动代码:-
//... 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);
这是动画和相机切换和相机重置代码:-
Here is the animation and camera switching and camera resetting code:-
//----------------------------------------------------------------
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).
Many thanks to user Stallion for the simple fix - don't set camera world position to (0,0,0) use (0,0,1) instead.
推荐答案
有一个快速修复:
将camera1位置设置为
set camera1 position to
camera1.position.set(0,0,1);
检查小提琴http://jsfiddle.net/Stallion33/sgcfu4tt/
这篇关于Three.js 轨道控制与两个(切换)相机的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!