Three.js 中的 TrackballControls答案

【问题标题】：TrackballControls in three.jsThree.js 中的 TrackballControls
【发布时间】：2013-11-10 02:55:20
【问题描述】：

我对 TrackballControls 有疑问。它不起作用，我完全不知道为什么。我在这个例子中这样做：link for example。我一直在寻找解决方案，但我仍然不知道我做错了什么。我的代码中是否缺少某些内容？

我有 2 个 TrackballControls.js 因为当我在寻找解决方案时，有人写道，在她的案例中，她帮助添加了类似 url 的脚本，而不是本地文件：link。

代码：

controls = new THREE.TrackballControls( camera );

controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;

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

controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;

controls.keys = [ 65, 83, 68 ];

controls.addEventListener( 'change', render );`

animate 函数的下一次更新：

function animate() { controls.update(); }

在 loader 中调用下一个函数 animate：

loader.load('./models/my_pc/models/my_pc.dae', function (collada) {

model = collada.scene;
model.scale.x = model.scale.y = model.scale.z = 0.0125;
model.position.x = -2;
model.position.y = 0;
model.position.z = 2;
model.rotation.x = -1.570796327;
model.rotation.y = 0;
model.rotation.z = 0;

init();
animate();
}

【问题讨论】：

It doesn't work 是您可以就您的问题给出的最无用的描述。你能说得具体点吗？
看起来您正在使用修订版 58。您是否尝试过使用修订版 60 中的最新 trackball.js？最近有一些修复可以帮助您解决您的问题。此外，您的代码中似乎加载了 2 个 TrackballControl-Scripts？你能展示你在哪里实现 TrackballControls 的代码吗？
我有 2 个 TrackballControls.js 因为当我在寻找解决方案时，有人写道，在她的案例中，她帮助添加了像 url 这样的脚本，而不是像本地文件：link。

标签： javascript three.js webgl

【解决方案1】：

您好，您似乎在加载时调用了一次动画函数。你需要做你的初始化，然后有一个带有 requestAnimationFrame shim 的动画函数，如下所示：

function animate() {
    requestAnimationFrame( animate );           
    controls.update();    
    render();
}

这至少应该让你动起来。这将确保您的控件的每一帧都被更新（即鼠标移动将转换为相机位置/旋转），然后您将使用新的相关信息重新渲染场景。仅供参考，您还需要编写一个渲染函数，至少可以这样做：

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

【讨论】：

谢谢，现在一切正常，我的渲染函数是：renderer.render(scene, camera);