如何在three.js中关闭动画

【问题标题】：How to turn off animation in three.js如何在three.js中关闭动画
【发布时间】：2016-04-04 00:19:56
【问题描述】：

在 three.js 中测试代码时，不需要动画。我可以看到第一个渲染帧。这将消耗更少的电量，并在显卡升温时阻止笔记本电脑上的风扇启动。

three.js中的例子结构如下：

function init() {
  animate()
}

function animate() {
    requestAnimationFrame( animate );
    render();
    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}

function render() {
    group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
    renderer.render( scene, camera );
}

我不知道如何关闭重复调用动画。有什么简单的方法可以关闭动画吗？

【问题讨论】：

作为一个快速破解，只需注释掉requestAnimationFrame( animate ); 或查看this answer。
当你注释掉 requestAnimationFrame 时，窗口永远不会刷新。
实际上，ti 现在似乎可以工作了。刷新问题

标签： three.js

【解决方案1】：

您不必在 three.js 中包含动画循环——比如说，如果您有一个静态场景。只需拨打电话

renderer.render( scene, camera );

每当相机移动或加载器完成加载模型或加载纹理时，您都需要重新渲染。

如果您在静态场景中使用OrbitControls，您可以像这样实例化OrbitControls：

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop

render() 调用renderer.render( scene, camera )。

如果您正在加载模型或纹理，则three.js 加载器具有您可以指定的回调函数。例如，

var loader = new THREE.TextureLoader();
var texture = loader.load( 'myTexture.jpg', render );

还有

var manager = new THREE.LoadingManager();
var loader = new THREE.OBJLoader( manager );

loader.load( 'myModel.obj', function( object ) {
    // your code...
    render();
}

three.js r.75

【讨论】：