Three.js 在删除和创建对象后变得很慢

Question

我是 three.js 的新手，我正在尝试一个非常基本的射击游戏。用户应该拍摄一个彩色的箱子（盒子）。当他这样做时，箱子消失了，另一个随机箱子出现了，依此类推。

if (intersects.length > 0) {
             intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
                  scene.remove(object);
                  create_cube();
                  animate();
...

在着陆时，它工作得非常顺利。完全没有滞后。但是我射击的盒子越多，游戏就越开始滞后。

我在内存分配或垃圾收集方面做错了吗？

这是一个 JSfiddle：https://jsfiddle.net/k0s2nmru/

（虽然我的代码作为单独的页面可以正常工作，但放在 JSfiddle 中时似乎无法正常工作）

更新：

我添加了three.js 附带的统计信息。即使游戏开始滞后，它们也不断为我提供相当不错的每秒帧数（高达 150 帧或更多）。也许我没有以正确的方式实现它？

Answer 1

乍一看，我看到了 3 种优化代码的方法

1) 不要在不需要的时候调用 animate 或 render

    function onDocumentMouseDown(event) {
        var mouse3D = new THREE.Vector3();
        var raycaster = new THREE.Raycaster();
        mouse3D.normalize();
        controls.getDirection(mouse3D);
        raycaster.set(controls.getObject().position, mouse3D);
        var intersects = raycaster.intersectObjects(objects);
        if (intersects.length > 0) {
     intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
          scene.remove(object);
          create_cube();
          animate();     //  DON'T DO THIS

        }
        renderer.render(scene, camera);   //  DON'T DO THIS
      }

渲染是在一个紧密的循环中完成的，由 requestAnimationFrame 控制。不仅你不需要在循环之外调用它们，而且如果你这样做，你会破坏 requestAnimationFrame 优化（循环的多个实例同时运行）

2) 始终尝试使渲染达到最佳状态。

     controls.getObject().translateX(velocity.x * delta);
     controls.getObject().translateY(velocity.y * delta);
     controls.getObject().translateZ(velocity.z * delta);

     if (controls.getObject().position.y < 10) {

为什么不使用 controls.getObject() 的结果创建一个临时变量？

3) 尽可能重复使用

在 yomotsu 的回答中，但有点不同：为什么不关闭被击中的立方体的可见性，改变它的颜色和位置，让它再次可见？

Answer 2

当你移除一个对象时，你必须移除对象中使用的几何材质和纹理。因为资源缓存在渲染器中。

scene.remove( mesh );
// clean up
geometry.dispose();
material.dispose();
texture.dispose();

检查这个例子。 http://threejs.org/examples/#webgl_test_memory