2012-04-25 559 views
24

在Three.js中,我想让摄像机指向3D空间中的一个点。ThreeJS camera.lookAt()没有效果,有什么我做错了吗?

为此,我尝试使用camera.lookAt功能,像这样:

camera.lookAt(new THREE.Vector3(-100,-100,0)); 

然而,我发现呼叫有任何作用。它根本没有做任何事情。我尝试改变向量中的数字,并且在屏幕上始终保持相同的外观,当它应该改变时。

我刚刚发现,如果我删除THREE.TrackballControls我在我的代码中,那么camera.lookAt()就像它应该那样工作。我如何使用THREE.TrackballControls有什么问题?这是我对它们进行初始化:

controls = new THREE.TrackballControls(camera, renderer.domElement); 

    controls.rotateSpeed = 10.0; 
    controls.zoomSpeed = 1.2; 
    controls.panSpeed = 0.2; 

    controls.noZoom = false; 
    controls.noPan = false; 

    controls.staticMoving = true; 
    controls.dynamicDampingFactor = 1.0; 

    var radius = 5; 
    controls.minDistance = radius * 1.1; 
    controls.maxDistance = radius * 100; 

    controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]*/ 

然后在我的渲染功能我做的:在three.js所

function render() { 
    controls.update(); 
    renderer.render(scene, camera); 
} 

文档是非常稀缺的,所以我认为我会问这里。难道我做错了什么?

+0

向我们展示更多代码。看看这个简单的示例:http://jsfiddle.net/TE5bM/ – 2012-04-26 09:08:12

+0

你有更新循环,你重新渲染场景?这听起来像你没有更新/渲染。 – 2012-04-26 10:54:08

+0

@Juan George:我在设置场景之前调用.lookAt(),在渲染任何东西之前,所以我的调用应该有效果。不过,我想我只是发现了这个问题。我在我的代码中有THREE.TrackballControls,我认为它干扰了我告诉.lookAt(),因为当我删除THREE.TrackballControls时,.lookAt()函数就像它应该那样工作。我在做什么错误与THREE.TrackballControls? – houbysoft 2012-04-26 12:26:59

回答

40

综观THREE.TrackballControls的源代码,我想通了,我可以让相机的外观,我想通过设置trackballControls.targetTHREE.Vector3我希望它看,然后重新描绘的情景。

+2

谢谢!我一直在寻找像永远的答案,最后! – 2013-11-30 06:02:29

+2

正确答案! Set controls.target = new THREE.Vector3(1500,500,0);其中1500,500,0是我期望的目标,看看 – theprof 2014-01-26 17:26:24

+2

是的,正是我面临的问题,并为此我发布了一个新的quesiton [这里](http://stackoverflow.com/questions/26557252/inverse-of -camera-LOOKAT)。在我的例子中,通过初始化'target'属性到传递给'camera.lookAt()'的相同向量手动更改'THREE.OrbitControls'的源代码是**不可行,我宁愿拿出一个反函数,所以我可以编写像'target = getLookAtVectorFor(camera)'这样的东西,并且每次更改相机的lookAt矢量时都不必更改OrbitControls.js的源代码。 – 2014-10-26 15:06:54

3

是的请注意......看起来有THREE.TrackballControls或THREE.OrbitControls似乎覆盖camera.lookAt函数,因为当你实例化一个控件的实例时,你正在传递你的相机。您可能想要摆脱控件,然后执行camera.lookAt()或以其他方式补间相机,以验证控件是否对您的相机产生重要影响。我搜索了一段时间为什么camera.lookat()似乎没有效果。

0

我想通了。为了防止THREE.TrackballControlsTHREE.OrbitControls从覆盖camera.lookAt在初始化时,你需要的,而不是它是如何使用new THREE.Vector3()(默认目前实施更改设置控件target属性等于camera.position矢量和camera.getWorldDirection()载体的总和行,到(0, 0, 0))。

因此,对于THREE.TrackballControls,变线39:

this.target = new THREE.Vector3().addVectors(/*new line for readability*/ 
    object.position, object.getWorldDirection()); 

也是一样THREE.OrbitControls,上线36 我actaully没有测试它在TrackballControls.js但它确实对OrbitControls.js工作。希望这可以帮助。

0

以下是另一种解决方案:创建一个具有0维度的对象(即多维数据集)。

var cameraTarget = new THREE.Mesh(new THREE.CubeGeometry(0,0,0)); 

在render函数中,将camera.lookAt设置为cameraTarget的位置。

function render() { 
    camera.lookAt(cameraTarget.position); 
    renderer.render(scene, camera); 
} 

然后只要移动cameraTarget就可以了。

1

在我看来,我们不应该混淆原始代码。我找到了解决任何特定问题的方法。 后,已宣布的“控制”变量,只需执行的这两行代码:

// Assuming you know how to set the camera and myCanvas variables 
control = new THREE.OrbitControls(camera, myCanvas); 

// Later in your code 
control.object.position.set(camX, camY, camZ); 
control.target = new THREE.Vector3(targetX, targetY, targetZ); 

请在我的脑海,这将焦点的中心切换到新的目标。换句话说,你的新目标将成为相机所有旋转的中心。在熟悉操作摄像机并采用默认中心时,有些部分很难看清楚。尝试尽可能地放大,你就会对我的意见有所了解 希望得到这个帮助。

相关问题