javascript Three.js 中的轨迹球控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18347256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TrackballControls in three.js
提问by Beacze
I have a problem with TrackballControls. It doesn't work and completly I don't know why. I'm doing this like in this example: link for example. I was looking for solution but still I don't know what I'm doing wrong. Am I missing something in my code?
我的 TrackballControls 有问题。它不起作用，完全我不知道为什么。我在这个例子中这样做：例如链接。我一直在寻找解决方案，但我仍然不知道我做错了什么。我的代码中遗漏了什么吗？
Simulation: link for my sim
模拟：我的 SIM 卡的链接
I have 2 TrackballControls.js coz when I was looking for solution one person has written that in her case helped add script like url, not like local file: link.
我有 2 个 TrackballControls.js 因为当我在寻找一个人写的解决方案时，她帮助添加了像 url 这样的脚本，而不是像 local file: link。
Code:
代码：
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 );`
Next update in function animate:
函数 animate 的下一次更新：
function animate() {
controls.update();
}
function animate() {
controls.update();
}
Next function animate is called in 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();
}
回答by Darryl_Lehmann
Good day, it appears that your calling your animate function once and only once upon load. You need to do your init, then have an animate function with a requestAnimationFrame shim like so:
美好的一天，您似乎在加载时调用了一次且仅一次的 animate 函数。你需要做你的初始化，然后有一个带有 requestAnimationFrame 垫片的动画函数，如下所示：
function animate() {
requestAnimationFrame( animate );
controls.update();
render();
}
That should at least get you moving. This will ensure that every frame your controls are being updated (ie. mouse movement will be translated to camera position/rotation) and you are then re-rendering the scene with the new relevant information. FYI, you'll also need to write a render function which at the very least does this:
那至少应该让你动起来。这将确保您的控件的每一帧都被更新（即鼠标移动将被转换为相机位置/旋转），然后您将使用新的相关信息重新渲染场景。仅供参考，您还需要编写一个渲染函数，至少可以这样做：
function render() {
renderer.render(scene, camera);
}
