重新初始化时,Three.js 3D立方体旋转速度越来越快

Question

我试图理解这一点:每次重新初始化时,旋转3D立方体的第一个Three.js示例旋转速度越来越快.

代码具有init设置场景的animate功能和启动动画循环的功能.如果我多次拨打init和animate,我希望立方体完全复位,而是立方体每次它重新初始化时旋转的速度越来越快.

• 为什么会这样？
• 对象是否正确地重新初始化？
• 它是three.js或JavaScript的功能吗？

这是一个JS小提琴,显示了我在说什么.我已将其设置为每两秒重新初始化一次:http: //jsfiddle.net/1hq2esLr/(在Firefox和Chrome中测试)

这是完整的代码:

var camera, scene, renderer,
    geometry, material, mesh;

function init() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;

    geometry = new THREE.BoxGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    // render-aread is just a <div id="render-area"></div>
    var renderarea = document.getElementById('render-area');

    // Remove all existing nodes.
    while (renderarea.firstChild) {
        renderarea.removeChild(renderarea.firstChild);
    }
    renderarea.appendChild( renderer.domElement );
}

function animate() {
    requestAnimationFrame( animate );
    render();

}

function render() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );
}

// Calling this function repeatedly increases the speed of the spinning cube.
// Global variable problem?
function start() {
    init();
    animate();
}

Answer 1

start第二次呼叫时,不会处理您之前的场景.您看到多个场景在彼此之上呈现,这会产生网格变得更快的错觉.这背后的原因是,一旦被解雇,animate继续调用requestAnimationFrame(animate),因此任何animate引用的对象保持活动并且不被垃圾收集.

要解决问题,您需要取消动画:

var id = null;
function start() {
    if (id !== null) 
        cancelAnimationFrame(id)   
     ...
}

function animate() {
    id = requestAnimationFrame( animate );
    render();
}

现在你的对象将正确地超出范围,垃圾收集器将完成他的工作.