如何在我的三个游戏游戏中随着时间的推移解决滞后问题

Question

当我的三个游戏开始时，没有滞后。但是，随着时间的流逝，运行此操作的计算机在五分钟的时间内开始放慢速度。我不知道为什么这是。

iv'e已经尝试查看我的代码并检查我的数组。我开始更改一些值，以查看这是否是问题，但是我尝试过的任何事情都没有奏效！

// cloud spawning
for(i = 0; i < 100; i++){
makeCloud()
}
// skeleton spawning
for (i = 0; i < 30; i++){
    makeSkeleton()
}

// render
function render() {
      // animation  
       requestAnimationFrame(render);
    renderer.render(scene, camera);
    // skybox position update
    skybox.position.set(player.position.x + 125, player.position.y + 125, player.position.z + 125)

    // camera positioning
    camera.position.set(player.position.x, player.position.y - 1, player.position.z)
    camera.position.z += 5 * Math.cos(playerDegree * Math.PI / 180);
        camera.position.x -= 5 * Math.sin(playerDegree * Math.PI / 180);
        camera.position.y += 3

    // function calling
    move()
    turn()
    jumpOn()
    gravity()
    cameraDistance()
    addBarrier(rock)
    addBarrier(bush)
    correctPlayer()
    energyGain()

}
render()
// distance function
function distance(x1, y1,z1,x2,y2,z2){
   let one = square(x1-x2)
   let two = square(y1-y2)
   let three = square(z1 - z2)
 let d= Math.sqrt(one+two+ three);
 return d;
 }
// squaring function
 function square(input){
   let output = input * input
   return output;
 }

// camera to rock distance function
 function cameraDistance(){
if (distance(camera.position.x, camera.position.y,  camera.position.z,
     rock.position.x,    rock.position.y,   rock.position.z) < 5){
rockMaterial.transparent = true
}else{
    rockMaterial.transparent = false
}}

// collision
   function collision(obj1, obj2){
    if(obj1.position.x + obj1.scale.x > obj2.position.x &&
            obj1.position.x < obj2.position.x + obj2.scale.x &&
            obj1.position.y + obj1.scale.y > obj2.position.y &&
            obj1.position.y < obj2.position.y + obj2.scale.y &&
            obj1.position.z + obj1.scale.z > obj2.position.z &&
            obj1.position.z < obj2.position.z + obj2.scale.z                     ){
        return true;
    }else{
        return false;
    }
}

// barrier function
   function addBarrier(obj){
if (collision(player, obj)){

    //xpos pos barrier

    if (player.position.x > obj.position.x && 
    !player.position.y + player.scale.y > obj.position.y){
        player.position.x += playerSpeed
        console.log("xpos pos push")
    }else
    // xpos neg barrier
    if (player.position.x + player.scale.x < obj.position.x && 
    !player.position.y + player.scale.y > obj.position.y){
player.position.x -= playerSpeed
        console.log("xpos neg push")
    }else
    //zpos pos barrier
    if (player.position.z > obj.position.z && 
    !player.position.y + player.scale.y > obj.position.y){
        player.position.z += playerSpeed
        console.log("zpos pos push")
    }else
    // zpos neg barrier
    if (player.position.z + player.scale.z < obj.position.z && 
    !player.position.y + player.scale.y > obj.position.y){
        player.position.z -= playerSpeed
        console.log("zpos neg push")
    }else
    // ypos barrier
    if (player.position.y + player.scale.y >= obj.position.y &&  player.position.y <= obj.position.y + player.scale.y  && 
        player.position.x >= obj.position.x && player.position.x <= obj.position.x + obj.scale.x &&             
        player.position.z >= obj.position.z && player.position.z <= obj.position.z + obj.scale.z){

        //groundedObject = true
        //grounded = true
        console.log("top stay")
    }
    }
}

// cloud function
function makeCloud(){
    let bool;
 bool = (Math.random()*1000) + (Math.random()*-1000)
let cloudGeom1 = new THREE.CubeGeometry(Math.random() * 30, Math.random() * 5, Math.random() * 30)
let cloudGeom2 = new THREE.CubeGeometry(Math.random() * 30, Math.random() * 5, Math.random() * 30)
let cloudGeom3 = new THREE.CubeGeometry(Math.random() * 30, Math.random() * 5, Math.random() * 30)
let cloudMat = new THREE.MeshLambertMaterial({color: 0xffffff, transparent: true})
let cloudMesh1 = new THREE.Mesh(cloudGeom1, cloudMat)
let cloudMesh2 = new THREE.Mesh(cloudGeom2, cloudMat)
let cloudMesh3 = new THREE.Mesh(cloudGeom3, cloudMat)

let cloudMesh = new THREE.Group()
cloudMesh.add(cloudMesh1)
cloudMesh.add(cloudMesh2)
cloudMesh.add(cloudMesh3)

cloudMesh1.position.set(Math.random() * -10, Math.random() * 10 + 30, Math.random() * -100)
cloudMesh2.position.set(Math.random() * -10, Math.random() * 10 + 30, Math.random() * -100)
cloudMesh3.position.set(Math.random() * -10, Math.random() * 10 + 30, Math.random() * -100)
cloudMesh.position.set(Math.random() * bool, Math.random() * 10, Math.random() * bool)

scene.add(cloudMesh)
cloudArray.push(cloudMesh)
}

// correct player to random terrain height function

function correctPlayer(){
    for(i = 0; i < groundArray.length; i++){
if(collision(player, groundArray[i])|| player.position.y - player.scale.y <= groundArray[i].position.y){
    grounded = true

}else{
    grounded = false
}}}

// make a skeleton
function makeSkeleton(){
var skeletonArray = [] 

  // skeleton geometries
   let skeletonGeometry = new THREE.CubeGeometry(1,2,1)
   let skeletonRightEyeG = new THREE.CubeGeometry(0.1,0.2,0.2) 
   let skeletonLeftEyeG = new THREE.CubeGeometry(0.1,0.2,0.2)
   let skeletonMouthAG = new THREE.CubeGeometry(0.1,0.1,0.4)
  let skeletonMouthBG = new THREE.CubeGeometry(0.1,0.2,0.1) 
//skeleton meshes
  let skeletonRightEye = new THREE.Mesh(skeletonRightEyeG, new THREE.MeshPhongMaterial({color: 0x0f0f0f})) 
  let skeletonLeftEye = new THREE.Mesh(skeletonLeftEyeG, new THREE.MeshPhongMaterial({color: 0x0f0f0f})) 
  let skeletonBody = new THREE.Mesh(skeletonGeometry, new THREE.MeshLambertMaterial({color: 0xffffff})) 
// skeleton materials ( not in use )
  let blackMaterial = new THREE.MeshPhongMaterial({color: 0x0f0f0f})
  let skeletonMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}) 
// more skeleton meshes
     let skeletonMouthA = new THREE.Mesh(skeletonMouthAG, new THREE.MeshPhongMaterial({color: 0x0f0f0f}))
     let skeletonMouthB = new THREE.Mesh(skeletonMouthBG, new THREE.MeshPhongMaterial({color: 0x0f0f0f}))
     let skeletonMouthC = new THREE.Mesh(skeletonMouthBG, new THREE.MeshPhongMaterial({color: 0x0f0f0f}))
     let skeletonMouthD = new THREE.Mesh(skeletonMouthBG, new THREE.MeshPhongMaterial({color: 0x0f0f0f}))

      // skeleton group
      let skeleton = new THREE.Group() 
      skeleton.add(skeletonBody),
       skeleton.add(skeletonRightEye) 
       skeleton.add(skeletonLeftEye) 
       skeleton.add(skeletonMouthA) 
       skeleton.add(skeletonMouthB) 
       skeleton.add(skeletonMouthC)
       skeleton.add(skeletonMouthD) 

      // skeleton potitioning
      skeletonBody.position.x = 10 
      skeletonBody.position.y = 2 
      skeletonLeftEye.position.set(9.5, 2.5, 0.3)
       skeletonRightEye.position.set(9.5, 2.5, -0.3)
       skeletonMouthA.position.set(9.5, 2.0, 0),
    skeletonMouthB.position.set(9.5, 2.0, -0.133)
,
    skeletonMouthC.position.set(9.5, 2.0, 0),
    skeletonMouthD.position.set(9.5, 2.0, 0.133)
skeleton.position.set(Math.random() * 150,  skeletonBody.scale.y, Math.random() * -150)

        skeleton.rotation.y = (Math.PI / 2) * -2;
        scene.add(skeleton)
        skeletonArray.push(skeleton)

}

更改数组值并使地图较小后的预期结果是滞后问题将停止。

我的实际结果只是滞后。

Answer 1

正如其他人所说的，请尝试使您的代码可读和简洁。最好在小块中组织。它使其他人阅读并因此可以帮助您更容易。另外，缩进和使用半彩;，尽管不是必需的，但它们也提高了可读性。

---

以此为止，让我尝试解释您问题背后的原因。

因此，您的代码尚未完成。其中有一些丢失的部分，使其更难进行调试。但是我相信这是一个内存泄漏问题，您似乎在场景中添加了太多对象而不删除它们。

在您的主更新功能render()中，每个帧都被调用，您将无限期地添加障碍。这会导致滞后，因为您只会填充场景和内存越来越多的信息，而无需清除其中一些对象。

您需要跟踪场景中的对象，将它们从场景中删除，并在不需要的时候致电.dispose()。这应该有助于滞后。

但是，如果没有有关问题的更多信息，就无法确定知道。尝试使用缺少信息编辑您的原始帖子，使其更可读，我将很乐意编辑此答案