TrackballControls in three.js

时间:2013-08-21 00:56:46

标签: javascript three.js webgl

我的TrackballControls有问题。它不起作用,完全不知道为什么。我在这个例子中这样做:link for example。我一直在寻找解决方案,但我仍然不知道我做错了什么。我在代码中遗漏了什么吗?

模拟:link for my sim

当我寻找解决方案时,我有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 );`

功能动画中的下一次更新:

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();
}

1 个答案:

答案 0 :(得分:12)

美好的一天,看来您只需加载一次,即可调用一次动画功能。你需要做你的init,然后有一个带有requestAnimationFrame垫片的动画函数,如下所示:

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

至少应该让你感动。这将确保您的控件正在更新的每个帧(即鼠标移动将转换为摄像机位置/旋转),然后您将使用新的相关信息重新渲染场景。仅供参考,您还需要编写一个渲染函数,至少可以这样做:

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