Javascript 如何在我的Three.js游戏中解决时间滞后问题

当我在Three.js中的游戏开始时，没有延迟。然而，随着时间的推移，运行此功能的计算机开始在五分钟内减速。我不明白为什么会这样

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)


}

//云生成
对于（i=0；i<100；i++）{
makeCloud（）
}
//骨骼产卵
对于（i=0；i<30；i++）{
makeSkeleton（）
}
//渲染
函数render（）{
//动画
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
//天空盒位置更新
skybox.position.set（player.position.x+125，player.position.y+125，player.position.z+125）
//摄像机定位
摄影机.position.set（player.position.x，player.position.y-1，player.position.z）
摄像机位置z+=5*Math.cos（playerDegree*Math.PI/180）；
摄像机位置x-=5*Math.sin（playerDegree*Math.PI/180）；
摄像机位置y+=3
//函数调用
移动（）
转（）
jumpOn（）
重力（）
CameradInstance（）
addBarrier（岩石）
addBarrier（布什）
更正玩家（）
energyGain（）
}
render（）
//距离函数
功能距离（x1，y1，z1，x2，y2，z2）{
设一=平方（x1-x2）
设二=平方（y1-y2）
设三=平方（z1-z2）
设d=Math.sqrt（1+2+3）；
返回d；
}
//平方函数
功能方块（输入）{
让输出=输入*输入
返回输出；
}
//摄像机到岩石的距离函数
函数CameradInstance（）{
if（距离（摄像机位置x、摄像机位置y、摄像机位置z、，
岩石位置x，岩石位置y，岩石位置z）<5）{
rockMaterial.transparent=true
}否则{
rockMaterial.transparent=false
}}
//碰撞
功能冲突（obj1、obj2）{
如果（obj1.position.x+obj1.scale.x>obj2.position.x&&
obj1.position.xobj2.position.y&&
obj1.position.yobj2.position.z&&
obj1.position.zobj.position.x&&
！player.position.y+player.scale.y>obj.position.y）{
player.position.x+=玩家速度
控制台日志（“xpos pos推送”）
}否则
//负势垒
if（player.position.x+player.scale.xobj.position.y）{
player.position.x-=玩家速度
console.log（“xpos neg push”）
}否则
//zpos势垒
如果（player.position.z>obj.position.z&&
！player.position.y+player.scale.y>obj.position.y）{
player.position.z+=玩家速度
控制台日志（“zpos推送”）
}否则
//负势垒
if（player.position.z+player.scale.zobj.position.y）{
player.position.z-=玩家速度
控制台日志（“zpos neg push”）
}否则
//ypos屏障
如果（player.position.y+player.scale.y>=obj.position.y&&player.position.y=obj.position.x&&player.position.x=obj.position.z&&player.position.z正如其他人所说的，尽量保持代码的可读性和简洁性。最好是以小块的形式组织代码。这会使其他人更容易阅读，从而帮助您。此外，缩进d使用分号
；
虽然不是必需的，但也可以提高可读性


有了这些，让我试着解释一下你的问题背后的原因

因此，您的代码不完整。缺少了一些片段，这使得调试更加困难。但我认为这是一个内存泄漏问题，您似乎在场景中添加了太多对象，而从未删除它们

在主更新函数
render（）
（每帧调用一次）中，您会无限期地添加障碍。这会导致延迟，因为您只会用越来越多的信息填充场景和内存，而不会每次清除其中的一些对象

您需要跟踪场景中的对象，将其从场景中移除，并在不再需要时调用
.dispose（）
。这将有助于解决延迟问题

但是，如果没有关于这个问题的更多信息，就不可能确切地知道。试着用丢失的信息编辑你的原始帖子，使其更具可读性，我会很高兴地编辑这个答案，正如其他人所说，试着保持你的代码可读性和简洁性。最好是以小块的形式组织。这会让其他人更容易阅读和理解其次，为了帮助您。此外，缩进和使用分号
；
虽然不是必需的，但它们也提高了可读性


有了这些，让我试着解释一下你的问题背后的原因

因此，您的代码不完整。缺少了一些片段，这使得调试更加困难。但我认为这是一个内存泄漏问题，您似乎在场景中添加了太多对象，而从未删除它们

在主更新函数
render（）
（每帧调用一次）中，您会无限期地添加障碍。这会导致延迟，因为您只会用越来越多的信息填充场景和内存，而不会每次清除其中的一些对象

您需要跟踪场景中的对象，将其从场景中移除，并在不再需要时调用
.dispose（）
。这将有助于解决延迟问题

但是如果没有关于这个问题的更多信息，就不可能确定。试着用missin编辑你的原始帖子