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 的回答中，但有点不同：为什么不关闭被击中的立方体的可见性，改变它的颜色和位置，然后让它再次可见？