javascript - 我可以改进threejs以使一大组盒子在没有凸耳的情况下渲染得更快吗？

Question

我来这里是因为我在使用threejs 时遇到了麻烦。我试图用这段代码生成一个无限平坦的地形，发布在http://cubecraft.surge.sh/：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>
<script>
setTimeout(()=>{
  k=[]
  xa=0
  ya=0
  onkeydown=onkeyup=(e)=>{k[e.keyCode]=e.type=="keydown"}
  document.body.requestPointerLock=document.body.requestPointerLock||document.body.mozRequestPointerLock
  document.title="Islandcraft."
  document.body.style.margin=0
  scene=new THREE.Scene()
  camera=new THREE.PerspectiveCamera(75,innerWidth/innerHeight,0.1,10000)
  renderer=new THREE.WebGLRenderer()
  document.body.appendChild(renderer.domElement)
  g=(x,y,z)=>{
    cube=new THREE.Mesh(new THREE.BoxGeometry(1,1,1),new THREE.MeshLambertMaterial({color:"rgb(100,50,0)"}))
    scene.add(cube)
    cube.position.set(x,y,z)
  }
  size=prompt("Enter the extension.")
  height=prompt("Enter the height.")
  for(x=-size;x<size;x++){
    for(y=-height;y<height;y++){
      for(z=-size;z<size;z++){
        if(Math.random()<1/2){
          g(x,y,z)
        }
      }
    }
  }
  scene.background=new THREE.Color("rgb(200,200,200)")
  scene.fog=new THREE.Fog("rgb(200,200,200)",0.01,10)
  light=new THREE.PointLight("rgb(255,255,255)",1,10)
  scene.add(light)
  onmousedown=()=>{
    if(document.pointerLockElement===document.body||
    document.mozPointerLockElement===document.body){
    }else{
      document.body.requestPointerLock()
    }
  }
  onmousemove=(event)=>{
    if(document.pointerLockElement===document.body||
    document.mozPointerLockElement===document.body){
      xa-=0.01*event.movementX
      if(-1.5<ya&&0<event.movementY){
        ya-=0.01*event.movementY
      }
      if(ya<1.5&&event.movementY<0){
        ya-=0.01*event.movementY
      }
    }
  }
  render=()=>{
    renderer.setSize(innerWidth,innerHeight)
    camera.aspect=innerWidth/innerHeight
    camera.updateProjectionMatrix()
    requestAnimationFrame(render)
    renderer.render(scene,camera)
  }
  render()
  setInterval(()=>{
    light.position.x=camera.position.x
    light.position.y=camera.position.y
    light.position.z=camera.position.z
    camera.lookAt(
      camera.position.x+Math.sin(xa)*Math.cos(ya),
      camera.position.y+Math.sin(ya),
      camera.position.z+Math.cos(xa)*Math.cos(ya)
    )
    if(k[65]){
      camera.position.x+=0.01*Math.cos(xa)
      camera.position.z-=0.01*Math.sin(xa)
    }
    if(k[87]){
      camera.position.x+=0.01*Math.sin(xa)
      camera.position.z+=0.01*Math.cos(xa)
    }
    if(k[68]){
      camera.position.x-=0.01*Math.cos(xa)
      camera.position.z+=0.01*Math.sin(xa)
    }
    if(k[83]){
      camera.position.x-=0.01*Math.sin(xa)
      camera.position.z-=0.01*Math.cos(xa)
    }
    if(k[32]){
      camera.position.y+=0.01
    }
    if(k[88]){
      camera.position.y-=0.01
    }
  },1)
},1)
</script>

该代码确实生成了一个平坦的随机裂缝地形，具有可选的扩展和可选的地形高度。最糟糕的问题是，当扩展或可选高度超过8时，代码非常滞后和缓慢。我该如何解决呢？

标签： javascript