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

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

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

1 个答案: