javascript - Three.js 通过单击按钮更改相机外观

Question

我想在单击按钮或链接时更改相机 lookat 的位置。这是我的代码:

HTML:

 <a href="#" id="testButton">TEST</a>

JS:

render();
function render() {
    trackballControls.update(60);
    requestAnimationFrame(render);
    webGLRenderer.render(scene, camera);
}

// test button function
// this does not work
var testButton = document.getElementById('testButton');
testButton.onclick = function ()
{
     camera.lookAt(new THREE.Vector3(50,60,70));
}; 

// another test button function
// this does work but then the camera bounces back to what it was looking at before
var testButton2 = document.getElementById('testButton');
testButton2.onclick = function ()
{
     camera.lookAt(new THREE.Vector3(50,60,70));
     webGLRenderer.render(scene, camera);
}; 

我做错了什么？ Here is the test page (等待埃菲尔铁塔加载)。

Answer 1

对于 OrbitControls 和 TrackballControls，摄像机“注视”controls.target，这是一个 THREE.Vector3() 。

要更改目标，请使用此模式:

controls.target.set( x, y, z );

three.js r.67