优化threejs中的立方体渲染

Question

我有以下代码：

https://github.com/CrizzzSombiii/laboratoryofsombiisbycrizz/blob/master/docs/maze2.htm

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js"></script>
<script>


//Sets the timeout.
  setTimeout(() => {


    //Sets the key object.
    k = []


    //Sets the first axis cube distance from the player.
    s = 1.5


    //Request the pointer lock from body when client press a mouse button.
    onmousedown = () => {
      document.body.requestPointerLock()
    }


    //Move the camera angles while body is keeping looked the pointer.
    onmousemove = (e) => {
      if (document.pointerLockElement === document.body) {
        vector.xa -= 0.01 * e.movementX
        vector.ya -= 0.01 * e.movementY
      }
    }


    //Sets the pressed keys inside the key object.
    onkeydown = onkeyup = function(e) {
      k[e.keyCode] = e.type == "keydown"
    }


    //Sets the document title.
    document.title = "Infinite maze."


    //Sets the body background to black.
    document.body.style.backgroundColor = "black"


    //Sets the margin to 0.
    document.body.style.margin = "0"


    //Sets the scene object.
    scene = new THREE.Scene()


    //Sets the camera object.
    camera = new THREE.PerspectiveCamera(50, 1, 0.1, 10000)


    //Sets the vector object for controling the camera without the mouse and the keys.
    vector = {
      xs: 0,
      ys: 0,
      zs: 0,
      xa: 0,
      ya: 0
    }


    //Sets the camera position to the origin of the coordinates.
    camera.position.set(0, 0, 0);


    //Sets the webgl renderer.
    renderer = new THREE.WebGLRenderer()


    //Put the webgl renderer's canvas to the body.
    document.body.appendChild(renderer.domElement)


    //Sets the light to blue color and distance of 8.
    light = new THREE.PointLight("rgb(0,127,255)", 1, 8);


    //Sets the light position to the origin of axis.
    light.position.set(0, 0, 0);


    //Adds the light to the scene.
    scene.add(light)


    //Sets the render function.
    function render() {


      //Request the next frame.
      requestAnimationFrame(render)


      //Renders the scene with the camera.
      renderer.render(scene, camera)


      //Update the perspective.
      camera.updateProjectionMatrix()


      //Sets the camera aspect to the window's aspect.
      camera.aspect = innerWidth / innerHeight


      //Sets the renderer size to window's size.
      renderer.setSize(innerWidth, innerHeight)


    }


    //Sets an interval.
    setInterval(function() {


      //Moves the player to the left when left key is pressed.
      if (k[37]) {
        vector.xa += 0.1
      }


      //Moves the player to forward when the up key is pressed.
      if (k[38]) {
        if (vector.ya < 1.2) {
          vector.ya += 0.1
        }
      }


      //Moves the player to the right when the right key is pressed.
      if (k[39]) {
        vector.xa -= 0.1
      }


      //Moves the player to backward when the down key is pressed.
      if (k[40]) {
        if (-1.2 < vector.ya) {
          vector.ya -= 0.1
        }
      }


      //Applies the X axis' speed to the X axis' position.
      camera.position.x += vector.xs


      //Reduces the X axis' speed preventing bugs.
      vector.xs = vector.xs * 9 / 10


      //Applies the Y axis' speed to the Y axis' position.
      camera.position.y += vector.ys


      //Reduces the Y axis' speed preventing bugs.
      vector.ys = vector.ys * 9 / 10


      //Applies the Z axis' speed to the Z axis' position.
      camera.position.z += vector.zs


      //Reduces the Z axis' speed preventing bugs.
      vector.zs = vector.zs * 9 / 10


      //If only Y angle's vector is smaller to -1 sets the Y angle's vector to -1.
      if (vector.ya < -1) {
        vector.ya = -1
      }
      //If only Y angle's vector is larger to 1 sets the Y angle's vector to 1.
      if (1 < vector.ya) {
        vector.ya = 1
      }


      //Moves the camera to the left.
      if (k[87]) {
        vector.xs += 0.01 * Math.sin(vector.xa) * Math.cos(vector.ya);
        vector.ys += 0.01 * vector.ya;
        vector.zs += 0.01 * Math.cos(vector.xa) * Math.cos(vector.ya)
      }


      //Moves the camera to the up.
      if (k[83]) {
        vector.xs -= 0.01 * Math.sin(vector.xa) * Math.cos(vector.ya);
        vector.ys -= 0.01 * vector.ya;
        vector.zs -= 0.01 * Math.cos(vector.xa) * Math.cos(vector.ya)
      }


      //Moves the camera to the right.
      if (k[65]) {
        vector.xs += 0.01 * Math.sin(vector.xa + Math.PI / 2) * Math.cos(vector.ya);
        vector.ys += 0.01 * vector.ya;
        vector.zs += 0.01 * Math.cos(vector.xa + Math.PI / 2) * Math.cos(vector.ya)
      }


      //Moves the camera to the down.
      if (k[68]) {
        vector.xs += 0.01 * Math.sin(vector.xa - Math.PI / 2) * Math.cos(vector.ya);
        vector.ys += 0.01 * vector.ya;
        vector.zs += 0.01 * Math.cos(vector.xa - Math.PI / 2) * Math.cos(vector.ya)
      }


      //Sets the light position as the same position of camera.
      light.position.set(camera.position.x, camera.position.y, camera.position.z)


      //Rotates the camera to the X and Y's vector angles.
      camera.lookAt(new THREE.Vector3(
        camera.position.x + Math.sin(vector.xa) * Math.cos(vector.ya),
        camera.position.y + Math.sin(vector.ya),
        camera.position.z + Math.cos(vector.xa) * Math.cos(vector.ya)))


      //Activates the generation event when the player gets near to any  border of maze.
      if (s < Math.max(Math.pow(camera.position.x * camera.position.x, 1 / 2), Math.pow(camera.position.y * camera.position.y, 1 / 2), Math.pow(camera.position.z * camera.position.z, 1 / 2)) + 12) {


        //Generates the player nearest's uncreated wall of blocks when the player gets near to the maze's border.
        sy = 1.5
        while (sy < s + 1) {
          sz = 1.5;
          while (sz < sy + 1) {
            gen(s, sy, sz, 0, 0, 0);
            if (Math.random() * 16 < 1) {
              g(2, s + 1.5, sy + 1.5, sz + 1.5)
            }
            gen(s, sy, sz, 1, 0, 0);
            gen(s, sy, sz, -1, 0, 0);
            gen(s, sy, sz, 0, 1, 0);
            gen(s, sy, sz, 0, -1, 0);
            gen(s, sy, sz, 0, 0, 1);
            gen(s, sy, sz, 0, 0, -1)
            if (Math.random() * 2 < 1) {
              gen(s, sy, sz, 1, 1, 0);
              gen(s, sy, sz, 1, 2, 0);
              gen(s, sy, sz, 2, 1, 0);
              gen(s, sy, sz, 2, 2, 0)
            }
            if (Math.random() * 2 < 1) {
              gen(s, sy, sz, 0, 1, 1);
              gen(s, sy, sz, 0, 1, 2);
              gen(s, sy, sz, 0, 2, 1);
              gen(s, sy, sz, 0, 2, 2)
            }
            if (Math.random() * 2 < 1) {
              gen(s, sy, sz, 1, 0, 1);
              gen(s, sy, sz, 1, 0, 2);
              gen(s, sy, sz, 2, 0, 1);
              gen(s, sy, sz, 2, 0, 2)
            }
            sz += 3
          };
          while (sz == sy) {
            sz = 0
          }
          sy += 3
        };
        while (sy == s) {
          sy = 0
        }
        s += 3
      }


      //Only draws the objects which are in front of the player in distance of 4 of the center and are in a circle of radius of 5 for preventing falling of fps when the player moves a long distance to the zero axis point.
      for (i1 in obj1) {
        if (Math.pow(
            (obj1[i1].x - camera.position.x - 4 * Math.sin(vector.xa) * Math.cos(vector.ya)) *
            (obj1[i1].x - camera.position.x - 4 * Math.sin(vector.xa) * Math.cos(vector.ya)) +
            (obj1[i1].y - camera.position.y - 4 * Math.sin(vector.ya)) *
            (obj1[i1].y - camera.position.y - 4 * Math.sin(vector.ya)) +
            (obj1[i1].z - camera.position.z - 4 * Math.cos(vector.xa) * Math.cos(vector.ya)) *
            (obj1[i1].z - camera.position.z - 4 * Math.cos(vector.xa) * Math.cos(vector.ya)),
            1 / 2) < 5) {
          if (!scene.getObjectById(obj1[i1].obj.id)) {
            scene.add(obj1[i1].obj)
          }
        } else {
          if (scene.getObjectById(obj1[i1].obj.id)) {
            scene.remove(obj1[i1].obj)
          }
        }


        //Sets the collision event with the cubes.
        obj1[i1].obj.position.set(obj1[i1].x, obj1[i1].y, obj1[i1].z)
        if (camera.position.x - 0.5 < obj1[i1].x + 0.5) {
          if (camera.position.x + 0.5 > obj1[i1].x - 0.5) {
            if (camera.position.y - 0.5 < obj1[i1].y + 0.5) {
              if (camera.position.y + 0.5 > obj1[i1].y - 0.5) {
                if (camera.position.z - 0.5 < obj1[i1].z + 0.5) {
                  if (camera.position.z + 0.5 > obj1[i1].z - 0.5) {
                    vector.xs -= 0.01 * (obj1[i1].x - camera.position.x) / Math.pow(
                      (obj1[i1].x - camera.position.x) * (obj1[i1].x - camera.position.x) +
                      (obj1[i1].y - camera.position.y) * (obj1[i1].y - camera.position.y) +
                      (obj1[i1].z - camera.position.z) * (obj1[i1].z - camera.position.z), 3 / 2)
                    vector.ys -= 0.01 * (obj1[i1].y - camera.position.y) / Math.pow(
                      (obj1[i1].x - camera.position.x) * (obj1[i1].x - camera.position.x) +
                      (obj1[i1].y - camera.position.y) * (obj1[i1].y - camera.position.y) +
                      (obj1[i1].z - camera.position.z) * (obj1[i1].z - camera.position.z), 3 / 2)
                    vector.zs -= 0.01 * (obj1[i1].z - camera.position.z) / Math.pow(
                      (obj1[i1].x - camera.position.x) * (obj1[i1].x - camera.position.x) +
                      (obj1[i1].y - camera.position.y) * (obj1[i1].y - camera.position.y) +
                      (obj1[i1].z - camera.position.z) * (obj1[i1].z - camera.position.z), 3 / 2)
                  }
                }
              }
            }
          }
        }
      }


      //Sets the update of the enemy.
      for (i2 in obj2) {


        //Sets the position of the enemy's cube to the obj2's position.
        obj2[i2].obj.position.set(obj2[i2].x, obj2[i2].y, obj2[i2].z)


        //Adds the enemy's speed to the enemy's position, and reduces the enemy's speed when it exceed to a speed of 0.1 in one of the 3 axis.
        obj2[i2].x += obj2[i2].xs;
        if (0.1 < obj2[i2].xs) {
          obj2[i2].xs = obj2[i2].xs * 7 / 8
        };
        if (obj2[i2].xs < -0.1) {
          obj2[i2].xs = obj2[i2].xs * 7 / 8
        }
        obj2[i2].y += obj2[i2].ys;
        if (0.1 < obj2[i2].ys) {
          obj2[i2].ys = obj2[i2].ys * 7 / 8
        };
        if (obj2[i2].ys < -0.1) {
          obj2[i2].ys = obj2[i2].ys * 7 / 8
        }
        obj2[i2].z += obj2[i2].zs;
        if (0.1 < obj2[i2].zs) {
          obj2[i2].zs = obj2[i2].zs * 7 / 8
        };
        if (obj2[i2].zs < -0.1) {
          obj2[i2].zs = obj2[i2].zs * 7 / 8
        }


        //Sets an event for make the camera "dies" when it touches the enemy.
        if (camera.position.x - 0.5 < obj2[i2].x + 0.5) {
          if (camera.position.x + 0.5 > obj2[i2].x - 0.5) {
            if (camera.position.y - 0.5 < obj2[i2].y + 0.5) {
              if (camera.position.y + 0.5 > obj2[i2].y - 0.5) {
                if (camera.position.z - 0.5 < obj2[i2].z + 0.5) {
                  if (camera.position.z + 0.5 > obj2[i2].z - 0.5) {
                    camera.position.x = 1 / 0;
                    alert("Moriste!")
                  }
                }
              }
            }
          }
        }
      }


      //Sets the enemy's collision to the wall of labyrint.
      for (i1 in obj1) {
        for (i2 in obj2) {
          if (obj1[i1].x - 0.5 < obj2[i2].x + 0.5) {
            if (obj1[i1].x + 0.5 > obj2[i2].x - 0.5) {
              if (obj1[i1].y - 0.5 < obj2[i2].y + 0.5) {
                if (obj1[i1].y + 0.5 > obj2[i2].y - 0.5) {
                  if (obj1[i1].z - 0.5 < obj2[i2].z + 0.5) {
                    if (obj1[i1].z + 0.5 > obj2[i2].z - 0.5) {
                      obj2[i2].xs += 0.01 * (obj2[i2].x - obj1[i1].x) / Math.pow(
                        (obj2[i2].x - obj1[i1].x) * (obj2[i2].x - obj1[i1].x) +
                        (obj2[i2].y - obj1[i1].y) * (obj2[i2].y - obj1[i1].y) +
                        (obj2[i2].z - obj1[i1].z) * (obj2[i2].z - obj1[i1].z), 3 / 2)
                      obj2[i2].ys += 0.01 * (obj2[i2].y - obj1[i1].y) / Math.pow(
                        (obj2[i2].x - obj1[i1].x) * (obj2[i2].x - obj1[i1].x) +
                        (obj2[i2].y - obj1[i1].y) * (obj2[i2].y - obj1[i1].y) +
                        (obj2[i2].z - obj1[i1].z) * (obj2[i2].z - obj1[i1].z), 3 / 2)
                      obj2[i2].zs += 0.01 * (obj2[i2].z - obj1[i1].z) / Math.pow(
                        (obj2[i2].x - obj1[i1].x) * (obj2[i2].x - obj1[i1].x) +
                        (obj2[i2].y - obj1[i1].y) * (obj2[i2].y - obj1[i1].y) +
                        (obj2[i2].z - obj1[i1].z) * (obj2[i2].z - obj1[i1].z), 3 / 2)
                    }
                  }
                }
              }
            }
          }
        }
      }
    }, 1)


    //Start the rendering event.
    render()


    //Creates the wall object.
    obj1 = {};


    //Creates the id of the wall object.
    i1 = 0


    //Creates the enemy object.
    obj2 = {};


    //Create the enemy object's id.
    i2 = 0


    //Create's the generation function of the walls and the enemies.
    g = function(obj, x, y, z) {
      if (obj == 1) {
        i1++;
        obj1[i1] = {
          x: x,
          y: y,
          z: z,
          obj: new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshLambertMaterial({
            color: "rgb(255,255,255)",
            transparent: true,
            opacity: 1
          }))
        };
        scene.add(obj1[i1].obj)
      }
      if (obj == 2) {
        i2++;
        obj2[i2] = {
          x: x,
          y: y,
          z: z,
          xs: Math.random() * 0.2 - 0.1,
          ys: Math.random() * 0.2 - 0.1,
          zs: Math.random() * 0.2 - 0.1,
          obj: new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshLambertMaterial({
              color: "rgb(0,0,0)",
              transparent: true,
              opacity: 1
            }))
        }
      }
    }


    //Shorts the generation event of the labyrint.
    gen = function(x, y, z, a, b, c) {
      g(1, x + a, y + b, z + c);
      g(1, y + a, x + b, z + c);
      g(1, y + a, z + b, x + c);
      g(1, x + a, z + b, y + c);
      g(1, z + a, x + b, y + c);
      g(1, z + a, y + b, x + c)
      g(1, -x + a, y + b, z + c);
      g(1, -y + a, x + b, z + c);
      g(1, -y + a, z + b, x + c);
      g(1, -x + a, z + b, y + c);
      g(1, -z + a, x + b, y + c);
      g(1, -z + a, y + b, x + c)
      g(1, x + a, -y + b, z + c);
      g(1, y + a, -x + b, z + c);
      g(1, y + a, -z + b, x + c);
      g(1, x + a, -z + b, y + c);
      g(1, z + a, -x + b, y + c);
      g(1, z + a, -y + b, x + c)
      g(1, -x + a, -y + b, z + c);
      g(1, -y + a, -s + b, z + c);
      g(1, -y + a, -z + b, x + c);
      g(1, -x + a, -z + b, y + c);
      g(1, -z + a, -x + b, y + c);
      g(1, -z + a, -y + b, x + c)
      g(1, x + a, y + b, -z + c);
      g(1, y + a, x + b, -z + c);
      g(1, y + a, z + b, -x + c);
      g(1, x + a, z + b, -y + c);
      g(1, z + a, x + b, -y + c);
      g(1, z + a, y + b, -x + c)
      g(1, -x + a, y + b, -z + c);
      g(1, -y + a, x + b, -z + c);
      g(1, -y + a, z + b, -x + c);
      g(1, -x + a, z + b, -y + c);
      g(1, -z + a, x + b, -y + c);
      g(1, -z + a, y + b, -x + c)
      g(1, x + a, -y + b, -z + c);
      g(1, y + a, -x + b, -z + c);
      g(1, y + a, -z + b, -x + c);
      g(1, x + a, -z + b, -y + c);
      g(1, z + a, -x + b, -y + c);
      g(1, z + a, -y + b, -x + c)
      g(1, -x + a, -y + b, -z + c);
      g(1, -y + a, -x + b, -z + c);
      g(1, -y + a, -z + b, -x + c);
      g(1, -x + a, -z + b, -y + c);
      g(1, -z + a, -x + b, -y + c);
      g(1, -z + a, -y + b, -x + c)
    }
  }, 1)
</script>

代码运行没有错误。问题在于 fps 计数。 html 文件仅以每秒 1 到 4 帧的速度运行。我想以每秒至少 60 帧的速度运行 html 文件。有什么帮助吗？还是谢谢！

Answer 1

终于，我得到了解决方案！

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js"></script>
<script>
setTimeout(()=>{
s=1.5
k=[]
onmousedown=()=>{document.body.requestPointerLock()}
onmousemove=(e)=>{
if(document.pointerLockElement===document.body){
vector.xa-=0.01*e.movementX
vector.ya-=0.01*e.movementY
}}
onkeydown=onkeyup=function(e){k[e.keyCode]=e.type=="keydown"}
document.body.style.backgroundColor="black"
document.body.style.margin="0"
scene=new THREE.Scene()
camera=new THREE.PerspectiveCamera(75,1,0.1,16);vector={xs:0,ys:0,zs:0,xa:0,ya:0}
camera.position.set(0,0,0);renderer=new THREE.WebGLRenderer()
document.body.appendChild(renderer.domElement)
light=new THREE.PointLight("rgb(0,127,255)",1,8);light.position.set(0,0,0);scene.add(light)
function render(){
camera.aspect=window.innerWidth/window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(innerWidth,innerHeight)
requestAnimationFrame(render)
renderer.render(scene,camera)
}
setInterval(()=>{
if(vector.ya<-1){vector.ya=-1}
if(1<vector.ya){vector.ya=1}
if(k[37]){vector.xa+=0.1}
if(k[38]){if(vector.ya<1.2){vector.ya+=0.1}}
if(k[39]){vector.xa-=0.1}
if(k[40]){if(-1.2<vector.ya){vector.ya-=0.1}}
if(k[87]){vector.xs+=0.01*Math.sin(vector.xa)*Math.cos(vector.ya);vector.ys+=0.01*vector.ya;vector.zs+=0.01*Math.cos(vector.xa)*Math.cos(vector.ya)}
if(k[83]){vector.xs-=0.01*Math.sin(vector.xa)*Math.cos(vector.ya);vector.ys-=0.01*vector.ya;vector.zs-=0.01*Math.cos(vector.xa)*Math.cos(vector.ya)}
if(k[65]){vector.xs+=0.01*Math.sin(vector.xa+Math.PI/2)*Math.cos(vector.ya);vector.ys+=0.01*vector.ya;vector.zs+=0.01*Math.cos(vector.xa+Math.PI/2)*Math.cos(vector.ya)}
if(k[68]){vector.xs+=0.01*Math.sin(vector.xa-Math.PI/2)*Math.cos(vector.ya);vector.ys+=0.01*vector.ya;vector.zs+=0.01*Math.cos(vector.xa-Math.PI/2)*Math.cos(vector.ya)}
camera.position.x+=vector.xs;vector.xs=vector.xs*9/10
camera.position.y+=vector.ys;vector.ys=vector.ys*9/10
camera.position.z+=vector.zs;vector.zs=vector.zs*9/10
light.position.set(camera.position.x,camera.position.y,camera.position.z)
camera.lookAt(new THREE.Vector3(camera.position.x+Math.sin(vector.xa)*Math.cos(vector.ya),camera.position.y+vector.ya,camera.position.z+Math.cos(vector.xa)*Math.cos(vector.ya)))
if(s<Math.max(Math.pow(camera.position.x*camera.position.x,1/2),Math.pow(camera.position.y*camera.position.y,1/2),Math.pow(camera.position.z*camera.position.z,1/2))+12){sy=1.5
while(sy<s+1){sz=1.5;while(sz<sy+1){
gen(s,sy,sz,0,0,0);if(Math.random()*16<1){g(2,s+1.5,sy+1.5,sz+1.5)}
gen(s,sy,sz,1,0,0);gen(s,sy,sz,-1,0,0);gen(s,sy,sz,0,1,0);gen(s,sy,sz,0,-1,0);gen(s,sy,sz,0,0,1);gen(s,sy,sz,0,0,-1)
if(Math.random()*2<1){gen(s,sy,sz,1,1,0);gen(s,sy,sz,1,2,0);gen(s,sy,sz,2,1,0);gen(s,sy,sz,2,2,0)}
if(Math.random()*2<1){gen(s,sy,sz,0,1,1);gen(s,sy,sz,0,1,2);gen(s,sy,sz,0,2,1);gen(s,sy,sz,0,2,2)}
if(Math.random()*2<1){gen(s,sy,sz,1,0,1);gen(s,sy,sz,1,0,2);gen(s,sy,sz,2,0,1);gen(s,sy,sz,2,0,2)}
sz+=3};while(sz==sy){sz=0}sy+=3};while(sy==s){sy=0}s+=3}
for(i1 in obj1){
obj1[i1].obj.position.set(obj1[i1].x,obj1[i1].y,obj1[i1].z)
if(camera.position.x-0.5<obj1[i1].x+0.5){if(camera.position.x+0.5>obj1[i1].x-0.5){
if(camera.position.y-0.5<obj1[i1].y+0.5){if(camera.position.y+0.5>obj1[i1].y-0.5){
if(camera.position.z-0.5<obj1[i1].z+0.5){if(camera.position.z+0.5>obj1[i1].z-0.5){
vector.xs-=0.01*(obj1[i1].x-camera.position.x)/Math.pow(
(obj1[i1].x-camera.position.x)*(obj1[i1].x-camera.position.x)+
(obj1[i1].y-camera.position.y)*(obj1[i1].y-camera.position.y)+
(obj1[i1].z-camera.position.z)*(obj1[i1].z-camera.position.z),3/2)
vector.ys-=0.01*(obj1[i1].y-camera.position.y)/Math.pow(
(obj1[i1].x-camera.position.x)*(obj1[i1].x-camera.position.x)+
(obj1[i1].y-camera.position.y)*(obj1[i1].y-camera.position.y)+
(obj1[i1].z-camera.position.z)*(obj1[i1].z-camera.position.z),3/2)
vector.zs-=0.01*(obj1[i1].z-camera.position.z)/Math.pow(
(obj1[i1].x-camera.position.x)*(obj1[i1].x-camera.position.x)+
(obj1[i1].y-camera.position.y)*(obj1[i1].y-camera.position.y)+
(obj1[i1].z-camera.position.z)*(obj1[i1].z-camera.position.z),3/2)
}}}}}}
}
for(i2 in obj2){
obj2[i2].obj.position.set(obj2[i2].x,obj2[i2].y,obj2[i2].z)
obj2[i2].x+=obj2[i2].xs;if(0.1<obj2[i2].xs){obj2[i2].xs=obj2[i2].xs*7/8};if(obj2[i2].xs<-0.1){obj2[i2].xs=obj2[i2].xs*7/8}
obj2[i2].y+=obj2[i2].ys;if(0.1<obj2[i2].ys){obj2[i2].ys=obj2[i2].ys*7/8};if(obj2[i2].ys<-0.1){obj2[i2].ys=obj2[i2].ys*7/8}
obj2[i2].z+=obj2[i2].zs;if(0.1<obj2[i2].zs){obj2[i2].zs=obj2[i2].zs*7/8};if(obj2[i2].zs<-0.1){obj2[i2].zs=obj2[i2].zs*7/8}
if(camera.position.x-0.5<obj2[i2].x+0.5){if(camera.position.x+0.5>obj2[i2].x-0.5){
if(camera.position.y-0.5<obj2[i2].y+0.5){if(camera.position.y+0.5>obj2[i2].y-0.5){
if(camera.position.z-0.5<obj2[i2].z+0.5){if(camera.position.z+0.5>obj2[i2].z-0.5){
camera.position.x=1/0;alert("Moriste!")
}}}}}}
}
for(i1 in obj1){for(i2 in obj2){
if(obj1[i1].x-0.5<obj2[i2].x+0.5){if(obj1[i1].x+0.5>obj2[i2].x-0.5){
if(obj1[i1].y-0.5<obj2[i2].y+0.5){if(obj1[i1].y+0.5>obj2[i2].y-0.5){
if(obj1[i1].z-0.5<obj2[i2].z+0.5){if(obj1[i1].z+0.5>obj2[i2].z-0.5){
obj2[i2].xs+=0.01*(obj2[i2].x-obj1[i1].x)/Math.pow(
(obj2[i2].x-obj1[i1].x)*(obj2[i2].x-obj1[i1].x)+
(obj2[i2].y-obj1[i1].y)*(obj2[i2].y-obj1[i1].y)+
(obj2[i2].z-obj1[i1].z)*(obj2[i2].z-obj1[i1].z),3/2)
obj2[i2].ys+=0.01*(obj2[i2].y-obj1[i1].y)/Math.pow(
(obj2[i2].x-obj1[i1].x)*(obj2[i2].x-obj1[i1].x)+
(obj2[i2].y-obj1[i1].y)*(obj2[i2].y-obj1[i1].y)+
(obj2[i2].z-obj1[i1].z)*(obj2[i2].z-obj1[i1].z),3/2)
obj2[i2].zs+=0.01*(obj2[i2].z-obj1[i1].z)/Math.pow(
(obj2[i2].x-obj1[i1].x)*(obj2[i2].x-obj1[i1].x)+
(obj2[i2].y-obj1[i1].y)*(obj2[i2].y-obj1[i1].y)+
(obj2[i2].z-obj1[i1].z)*(obj2[i2].z-obj1[i1].z),3/2)
}}}}}}
}}
},1)
render()
obj1={};i1=0
obj2={};i2=0
g=function(obj,x,y,z){
if(obj==1){i1++;obj1[i1]={x:x,y:y,z:z,obj:new THREE.Mesh(new THREE.BoxGeometry(1,1,1),new THREE.MeshLambertMaterial({color:"rgb(255,255,255)",
transparent:true,opacity:1}))};scene.add(obj1[i1].obj)}
if(obj==2){i2++;obj2[i2]={x:x,y:y,z:z,xs:Math.random()*0.2-0.1,ys:Math.random()*0.2-0.1,zs:Math.random()*0.2-0.1,obj:new THREE.Mesh(new THREE.BoxGeometry(1,1,1),
new THREE.MeshLambertMaterial({color:"rgb(0,0,0)",transparent:true,opacity:1}))};scene.add(obj2[i2].obj)}
}
gen=function(x,y,z,a,b,c){
g(1,x+a,y+b,z+c);g(1,y+a,x+b,z+c);g(1,y+a,z+b,x+c);g(1,x+a,z+b,y+c);g(1,z+a,x+b,y+c);g(1,z+a,y+b,x+c)
g(1,-x+a,y+b,z+c);g(1,-y+a,x+b,z+c);g(1,-y+a,z+b,x+c);g(1,-x+a,z+b,y+c);g(1,-z+a,x+b,y+c);g(1,-z+a,y+b,x+c)
g(1,x+a,-y+b,z+c);g(1,y+a,-x+b,z+c);g(1,y+a,-z+b,x+c);g(1,x+a,-z+b,y+c);g(1,z+a,-x+b,y+c);g(1,z+a,-y+b,x+c)
g(1,-x+a,-y+b,z+c);g(1,-y+a,-s+b,z+c);g(1,-y+a,-z+b,x+c);g(1,-x+a,-z+b,y+c);g(1,-z+a,-x+b,y+c);g(1,-z+a,-y+b,x+c)
g(1,x+a,y+b,-z+c);g(1,y+a,x+b,-z+c);g(1,y+a,z+b,-x+c);g(1,x+a,z+b,-y+c);g(1,z+a,x+b,-y+c);g(1,z+a,y+b,-x+c)
g(1,-x+a,y+b,-z+c);g(1,-y+a,x+b,-z+c);g(1,-y+a,z+b,-x+c);g(1,-x+a,z+b,-y+c);g(1,-z+a,x+b,-y+c);g(1,-z+a,y+b,-x+c)
g(1,x+a,-y+b,-z+c);g(1,y+a,-x+b,-z+c);g(1,y+a,-z+b,-x+c);g(1,x+a,-z+b,-y+c);g(1,z+a,-x+b,-y+c);g(1,z+a,-y+b,-x+c)
g(1,-x+a,-y+b,-z+c);g(1,-y+a,-x+b,-z+c);g(1,-y+a,-z+b,-x+c);g(1,-x+a,-z+b,-y+c);g(1,-z+a,-x+b,-y+c);g(1,-z+a,-y+b,-x+c)
}
},1)
</script>

它一直以 30 fps 的速度运行，但这是详细说明答案的第一步。我将修复我的代码，最终获得 60 fps。