Javascript 3.js get'；删除和创建对象后，速度非常慢

我刚接触three.js，正在试用一款非常基本的射击游戏。用户应拍摄彩色板条箱（盒）。当他这样做时，板条箱消失，另一个随机板条箱出现，依此类推

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

着陆时，它工作非常平稳。完全没有滞后。但是我投的箱子越多，游戏就越落后

我是否在内存分配或垃圾收集方面做错了什么

下面是一个JSFIDLE：

（虽然我的代码作为一个单独的页面可以很好地工作，但当它放在JSFIDLE中时似乎不起作用）

更新：

---

我添加了three.js附带的统计信息。他们一直给我相当好的帧数每秒（高达150或更多），即使游戏开始落后。也许我没有正确地实现它？

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

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

检查这个例子。

---

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

1） 不需要时不要调用“动画”或“渲染”

    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（）.translateX（velocity.x*delta）；
控件.getObject（）.translateY（velocity.y*delta）；
controls.getObject（）.translateZ（velocity.z*delta）；
if（controls.getObject（）.position.y<10）{

为什么不用controls.getObject（）的结果创建一个临时变量呢

3） 尽可能重复使用

---

在yomotsu的回答行中，但有一点不同：为什么不关闭已命中立方体的可见性，更改其颜色和位置，使其再次可见？

感谢您的回答。尝试添加

场景。移除（对象）；geometrycube3.dispose（）；materialcube3.dispose（）；

在检测到单击后添加到我的代码中，但它似乎无法解决延迟问题。我是否做错了什么？没有使用

纹理.dispose（）；

因为我的框没有纹理，只有颜色。非常感谢！我实现了你的3种优化方法，现在它工作得很流畅（我学到了一些新东西！）.我认为数字1的性能提升最大。另一方面：你知道为什么统计数据显示每秒帧数都不错吗？我在代码中放对位置了吗？当你同时运行多个渲染时，你的帧速率可能会比以往任何时候都高（RealStimestI帧可能会避免你在标准PC中点击150 FPS，因为卡片刷新率通常较低），但这并不意味着这是有用的工作），除了VALS建议，你可能会考虑对象池。