0

Hola estoy intentando desarrollar este script en threejs, que intenta recrear un juego igual o mejor que minecraft.

Mi duda es. Una vez que lo he desarrollado lo más mínimo, va lentísimo.

Trato de aumentar la distancia de renderizado 1 solo bloque y se me cuelga. Además de todo eso este código usa un localStorage para almacenar todos los cubos sin que se pierdan. Si alguien quiere saber el dominio sobre el que trabajo es este: http://mcraft2.atspace.cc/

Acá dejo mi código:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="icon" type="image/png" href="https://i.ibb.co/gzfRWD5/minecraft-2-icon.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.js"></script>
<script src="../../scripts/perlin.js"></script>
<script src="../../scripts/localStorageDB.js"></script>
<title>Minecraft 2 - V12 (Pre-Alpha)</title>
<nav class="navbar navbar-dark bg-dark">
  <div id="linkslot_214396"><script src="https://linkslot.ru/bancode.php?id=214396" async></script></div>
  <a class="navbar-brand"href="#">
    Options:
    <input class="btn btn-primary" type="button" value="Show"id="showMenu">
    <input class="btn btn-danger" type="button" value="Hide"id="hideMenu">
  </a>
  <div id="linkslot_214398"><script src="https://linkslot.ru/bancode.php?id=214398" async></script></div>
</nav>
<nav class="navbar navbar-dark bg-dark"id="optionsNav"style="position:absolute;top:-9999px">
  <a class="navbar-brand" href="#">
    Render distance:
    <input class="form-control" id="render_distance_input" placeholder="Enter here.">
    <input class="btn btn-primary" type="button" value="increase"id="increaseRender">
    <input class="btn btn-danger" type="button" value="decrease"id="decreaseRender">
  </a>
  <a class="navbar-brand" href="#">
    Mouse sensivity:
    <input class="form-control" id="mouse_sensivity_input" placeholder="Enter here.">
    <input class="btn btn-primary" type="button" value="increase"id="increaseSensivity">
    <input class="btn btn-danger" type="button" value="decrease"id="decreaseSensivity">
  </a>
  <a class="navbar-brand" href="#">
    Camera field of view:
    <input class="form-control" id="fov_input" placeholder="Enter here.">
    <input class="btn btn-primary" type="button" value="increase"id="increaseField">
    <input class="btn btn-danger" type="button" value="decrease"id="decreaseField">
  </a>
  <a class="navbar-brand" href="#">
    Fog distance with respect the render distance:
    <input class="form-control" id="fog_input" placeholder="Enter here.">
    <input class="btn btn-primary" type="button" value="increase"id="increaseFog">
    <input class="btn btn-danger" type="button" value="decrease"id="decreaseFog">
  </a>
</nav>
<script>
setTimeout(()=>{
  localStorage.clear()
  w=Math.floor(Math.random()*1000000)
  cube={}
  xa=0
  ya=0
  m=[]
  k=[]
  render_distance_input.value=4
  mouse_sensivity_input.value=1
  fov_input.value=50
  fog_input.value=0
  onmousemove=(event)=>{
    mouseX=event.clientX
    mouseY=event.clientY
    if(document.pointerLockElement===renderer.domElement||
    document.mozPointerLockElement===renderer.domElement){
      xa-=0.01*event.movementX*mouse_sensivity_input.value
      if(-1.5<ya&&0<event.movementY){
        ya-=0.01*event.movementY*mouse_sensivity_input.value
      }
      if(ya<1.5&&event.movementY<0){
        ya-=0.01*event.movementY*mouse_sensivity_input.value
      }
    }
  }
  onmousedown=onmouseup=(e)=>{
    m[e.button]=e.type=="mousedown"
    if(
      document.pointerLockElement===renderer.domElement
      ||
      document.mozPointerLockElement===renderer.domElement
    ){
    }else{
      if(200<mouseY&&optionsNav.style.top=="-9999px"){
        renderer.domElement.requestPointerLock()
      }
    }
  }
  onkeydown=onkeyup=(e)=>{k[e.keyCode]=e.type=="keydown"}
  box=new THREE.BoxGeometry(1,1,1)
  box_texture=new THREE.TextureLoader().load("../../images/textures/box.jpg")
  brick_texture=new THREE.TextureLoader().load("../../images/textures/brick.jpg")
  stone_texture=new THREE.TextureLoader().load("../../images/textures/stone.jpg")
  leaves_texture=new THREE.TextureLoader().load("../../images/textures/leaves.jpg")
  dirt_texture=new THREE.TextureLoader().load("../../images/textures/dirt.jpg")
  trunk_texture=new THREE.TextureLoader().load("../../images/textures/trunk.jpg")
  grass_texture=new THREE.TextureLoader().load("../../images/textures/grass.jpg")
  limestone_texture=new THREE.TextureLoader().load("../../images/textures/limestone.jpg")
  granite_texture=new THREE.TextureLoader().load("../../images/textures/granite.png")
  magma_texture=new THREE.TextureLoader().load("../../images/textures/magma.jpg")
  box_material=new THREE.MeshPhysicalMaterial({map:box_texture})
  bricks_material=new THREE.MeshPhysicalMaterial({map:brick_texture})
  stone_material=new THREE.MeshPhysicalMaterial({map:stone_texture})
  leaves_material=new THREE.MeshPhysicalMaterial({map:leaves_texture})
  dirt_material=new THREE.MeshPhysicalMaterial({map:dirt_texture})
  trunk_material=new THREE.MeshPhysicalMaterial({map:trunk_texture})
  grass_material=new THREE.MeshPhysicalMaterial({map:grass_texture})
  limestone_material=new THREE.MeshPhysicalMaterial({map:limestone_texture})
  granite_material=new THREE.MeshPhysicalMaterial({map:granite_texture})
  magma_material=new THREE.MeshPhysicalMaterial({map:magma_texture})
  document.body.style.margin=0
  renderer=new THREE.WebGLRenderer()
  document.body.appendChild(renderer.domElement)
  renderer.domElement.requestPointerLock=renderer.domElement.requestPointerLock||renderer.domElement.mozRequestPointerLock
  camera=new THREE.PerspectiveCamera()
  camera.xs=0
  camera.ys=0
  camera.zs=0
  camera.near=0.1
  camera.far=10000
  seed=Math.floor(Math.random()*Math.pow(10,10))
  scene=new THREE.Scene()
  render()
  directionalLight=new THREE.DirectionalLight("rgb(255,255,255)",1)
  scene.add(directionalLight)
  dlya=0.5
  directionalLight.castShadow=true
  directionalLight.receiveShadow=true
  directionalLight.position.set(0,1,0)
  directionalLight.target.position.set(0,0,0)
  scene.background=new THREE.Color("rgb(0,150,250)")
  fog1=new THREE.Fog("rgb(0,150,250)",0.01,100)
  scene.fog=fog1
  light=new THREE.HemisphereLight("rgb(255,255,255)","rgb(100,100,100)",0.25)
  scene.add(light)
  camera.position.set(0,noise.simplex2(seed,0)*100+5,0)
  all=new THREE.Geometry()
  all_figure=new THREE.Mesh(all)
  scene.add(all_figure)
},1)
g=(x,y,z,obj)=>{
  i1=Math.random()
  if(obj=="box"){
    cube[i1]=new THREE.Mesh(box,box_material)
  }
  if(obj=="leaves"){
    cube[i1]=new THREE.Mesh(box,leaves_material)
  }
  if(obj=="brick"){
    cube[i1]=new THREE.Mesh(box,bricks_material)
  }
  if(obj=="stone"){
    cube[i1]=new THREE.Mesh(box,stone_material)
  }
  if(obj=="dirt"){
    cube[i1]=new THREE.Mesh(box,dirt_material)
  }
  if(obj=="grass"){
    cube[i1]=new THREE.Mesh(box,grass_material)
  }
  if(obj=="trunk"){
    cube[i1]=new THREE.Mesh(box,trunk_material)
  }
  if(obj=="limestone"){
    cube[i1]=new THREE.Mesh(box,limestone_material)
  }
  if(obj=="granite"){
    cube[i1]=new THREE.Mesh(box,granite_material)
  }
  if(obj=="magma"){
    cube[i1]=new THREE.Mesh(box,magma_material)
  }
  cube[i1].position.set(x,y,z)
  scene.add(cube[i1])
}
distance_to_object=(x,y,z,x2,y2,z2)=>{
  return Math.pow(((x-x2)*(x-x2)+(y-y2)*(y-y2)+(z-z2)*(z-z2)),0.5)
}
check_into_object=(x,y,z,x2,y2,z2)=>{
  if(
    (x-0.4<x2+0.4&&x+0.4>x2-0.4)
    &&
    (y-0.4<y2+0.4&&y+0.4>y2-0.4)
    &&
    (z-0.4<z2+0.4&&z+0.4>z2-0.4)
  ){
    return true
  }else{
    return false
  }
}
check_into_square=(x,y,z,x2,y2,z2,r)=>{
  if(
    (x-r<x2+r&&x+r>x2-r)
    &&
    (y-r<y2+r&&y+r>y2-r)
    &&
    (z-r<z2+r&&z+r>z2-r)
  ){
    return true
  }else{
    return false
  }
}
check_object=(x,y,z)=>{
  checked=false
  for(i1 in cube){
    if(check_into_object(x,y,z,cube[i1].position.x,cube[i1].position.y,cube[i1].position.z)){
      checked=true
    }
  }
  return checked
}
check_id=(x,y,z)=>{
  id=0
  for(i1 in cube){
    if(check_into_object(x,y,z,cube[i1].position.x,cube[i1].position.y,cube[i1].position.z)){
      id=i1
    }
  }
  return id
}

//DON'T USE!!!
//render_distance_input.value=4
//mouse_sensivity_input.value=1
//fov_input.value=50

increaseRender.onclick=()=>{
  render_distance_input.value=eval(eval(render_distance_input.value)+1)
}
decreaseRender.onclick=()=>{
  render_distance_input.value=eval(eval(render_distance_input.value)-1)
}

increaseSensivity.onclick=()=>{
  mouse_sensivity_input.value=eval(eval(mouse_sensivity_input.value)+0.1)
  mouse_sensivity_input.value=Math.floor(mouse_sensivity_input.value*10)/10
}
decreaseSensivity.onclick=()=>{
  mouse_sensivity_input.value=eval(eval(mouse_sensivity_input.value)-0.1)
  mouse_sensivity_input.value=Math.floor(mouse_sensivity_input.value*10)/10
}

increaseField.onclick=()=>{
  fov_input.value.value=eval(eval(fov_input.value)+1)
}
decreaseField.onclick=()=>{
  fov_input.value.value=eval(eval(fov_input.value)-1)
}

showMenu.onclick=()=>{
  optionsNav.style.top=eval(64+8)+"px"
}
hideMenu.onclick=()=>{
  optionsNav.style.top="-9999px"
}

increaseFog.onclick=()=>{
  fog_input.value=eval(eval(fog_input.value)+1)
}
decreaseFog.onclick=()=>{
  fog_input.value=eval(eval(fog_input.value)-1)
}

render=()=>{
  //This sinchronize the scene.
  renderer.shadowMap.enabled=true
  renderer.shadowMap.type=THREE.BasicShadowMap
  renderer.setSize(innerWidth,innerHeight-128)
  camera.aspect=innerWidth/(innerHeight-128)
  camera.updateProjectionMatrix()
  requestAnimationFrame(render)
  renderer.render(scene,camera)
  //This update the player.
  camera.fov=fov_input.value
  if(-1.5>ya){ya=-1.5}
  if(1.5<ya){ya=1.5}
  camera.position.x+=camera.xs
  camera.position.y+=camera.ys
  camera.position.z+=camera.zs
  camera.xs*=7/8
  //camera.ys*=7/8
  camera.zs*=7/8
  if(-0.2<camera.ys){camera.ys-=0.01}
  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)
  )
  //Walk.
  if(k[65]){
    camera.xs+=0.005*Math.cos(xa)
    camera.zs-=0.005*Math.sin(xa)
  }
  if(k[87]){
    camera.xs+=0.005*Math.sin(xa)
    camera.zs+=0.005*Math.cos(xa)
  }
  if(k[68]){
    camera.xs-=0.005*Math.cos(xa)
    camera.zs+=0.005*Math.sin(xa)
  }
  if(k[83]){
    camera.xs-=0.005*Math.sin(xa)
    camera.zs-=0.005*Math.cos(xa)
  }
  //Jump.
  if(k[32]){
    //camera.ys+=0.005
    if(check_object(camera.position.x,camera.position.y-1.6,camera.position.z)){camera.ys=0.15}
  }
  if(k[88]){
    //camera.ys-=0.005
  }
  //This makes the solid collision.
  if(
    check_object(camera.position.x+camera.xs,camera.position.y-0.5,camera.position.z)
    ||
    check_object(camera.position.x+camera.xs,camera.position.y-1.5,camera.position.z)
  ){
    camera.xs=0
  }
  if(
    check_object(camera.position.x,camera.position.y+camera.ys-0.5,camera.position.z)
    ||
    check_object(camera.position.x,camera.position.y+camera.ys-1.5,camera.position.z)
  ){
    camera.ys=0
  }
  if(
    check_object(camera.position.x,camera.position.y-0.5,camera.position.z+camera.zs)
    ||
    check_object(camera.position.x,camera.position.y-1.5,camera.position.z+camera.zs)
  ){
    camera.zs=0
  }
  //This updates the render distance properties.
  render_distance=Math.floor(eval(render_distance_input.value))
  try{
    fog1.far=eval(render_distance+eval(fog_input.value)-1.5)
  }catch(e){}
  fixed_x=Math.floor(camera.position.x)
  fixed_y=Math.floor(camera.position.y)
  fixed_z=Math.floor(camera.position.z)
  //Player click.
  if(
    m[0]&&
    document.pointerLockElement===renderer.domElement||
    document.mozPointerLockElement===renderer.domElement
  ){
    for(i=0;i<2;i+=0.1){
      save(
        w+
        "x"+Math.floor(0.5+camera.position.x+Math.sin(xa)*Math.cos(ya)*i)+
        "y"+Math.floor(0.5+camera.position.y+Math.sin(ya)*i)+
        "z"+Math.floor(0.5+camera.position.z+Math.cos(xa)*Math.cos(ya)*i)
      ,0)
    }
  }
  //This updates the generation.
  for(x=fixed_x-render_distance;x<fixed_x+render_distance;x++){
    for(y=fixed_y-render_distance;y<fixed_y+render_distance;y++){
      for(z=fixed_z-render_distance;z<fixed_z+render_distance;z++){
        if(read(w+"x"+x+"y"+y+"z"+z)=="NaN"||read(w+"x"+x+"y"+y+"z"+z)==null){
          //If is into the render distance and there is not data in the database.
          val=0
          surface=noise.simplex2(x/500+seed,z/500)*100
          //Layer of magma.
          if(surface-150<y&&y<surface-100){
            val=10
          }
          //Second layer of granite & magma.
          if(surface-125<y&&y<surface-100){
            if(Math.random()<0.5){
              val=9
            }else{
              val=10
            }
          }
          //Second layer of granite & magma.
          if(surface-100<y&&y<surface-75){
            if(Math.random()<0.75){
              val=9
            }else{
              val=10
            }
          }
          //First layer of granite & magma.
          if(surface-75<y&&y<surface-50){
            if(Math.random()<0.9){
              val=9
            }else{
              val=10
            }
          }
          //Layer of granite.
          if(surface-50<y&&y<surface-25){val=9}
          //Layer of limestone and granite.
          if(surface-25<y&&y<surface-20){
            if(Math.random()<0.5){
              val=9
            }else{
              val=8
            }
          }
          //Layer of limestone.
          if(surface-20<y&&y<surface-10){val=8}
          //Layer of dirt and limestone.
          if(surface-10<y&&y<surface-5){
            if(Math.random()<0.5){
              val=8
            }else{
              val=5
            }
          }
          //Layer of dirt.
          if(surface-5<y&&y<surface-1){val=5}
          //Layer of grass.
          if(surface-1<y&&y<surface){val=6}
          //Bushes.
          if(surface<y&&y<surface+1&&Math.random()<0.05){val=4}
          //Top leaves.
          if(surface+5<y&&y<surface+20&&Math.random()<0.5){val=4}
          save(w+"x"+x+"y"+y+"z"+z,val)
          //Trees.
          if(surface-1<y&&y<surface&&Math.random()<0.02){
            for(i=0;i<15;i++){
              y2=y+i
              save(w+"x"+eval(x+1)+"y"+y2+"z"+z,7)
              save(w+"x"+eval(x-1)+"y"+y2+"z"+z,7)
              save(w+"x"+x+"y"+y2+"z"+eval(z+1),7)
              save(w+"x"+x+"y"+y2+"z"+eval(z-1),7)
            }
          }
        }else{
          //If a block has been cleared.
          if(read(w+"x"+x+"y"+y+"z"+z)==0){
            if(check_object(x,y,z)){
              i1=check_id(x,y,z)
              scene.remove(cube[i1])
              delete cube[i1]
            }
          }
          //If is data into the database and there is not blocks.
          if(read(w+"x"+x+"y"+y+"z"+z)==1){
            if(!check_object(x,y,z)){
              g(x,y,z,"box")
            }
          }
          if(read(w+"x"+x+"y"+y+"z"+z)==2){
            if(!check_object(x,y,z)){
              g(x,y,z,"brick")
            }
          }
          if(read(w+"x"+x+"y"+y+"z"+z)==3){
            if(!check_object(x,y,z)){
              g(x,y,z,"stone")
            }
          }
          if(read(w+"x"+x+"y"+y+"z"+z)==4){
            if(!check_object(x,y,z)){
              g(x,y,z,"leaves")
            }
          }
          if(read(w+"x"+x+"y"+y+"z"+z)==5){
            if(!check_object(x,y,z)){
              g(x,y,z,"dirt")
          }
          }
          if(read(w+"x"+x+"y"+y+"z"+z)==6){
            if(!check_object(x,y,z)){
              g(x,y,z,"grass")
            }
          }
          if(read(w+"x"+x+"y"+y+"z"+z)==7){
            if(!check_object(x,y,z)){
              g(x,y,z,"trunk")
            }
          }
          if(read(w+"x"+x+"y"+y+"z"+z)==8){
            if(!check_object(x,y,z)){
              g(x,y,z,"limestone")
            }
          }
          if(read(w+"x"+x+"y"+y+"z"+z)==9){
            if(!check_object(x,y,z)){
              g(x,y,z,"granite")
            }
          }
          if(read(w+"x"+x+"y"+y+"z"+z)==10){
            if(!check_object(x,y,z)){
              g(x,y,z,"magma")
            }
          }
        }
      }
    }
  }
  for(i1 in cube){
    //Make all use shadow.
    cube[i1].castShadow=true
    cube[i1].receiveShadow=true
    //If it are blocks outer the render distance.
    if(
      check_into_square(fixed_x,fixed_y,fixed_z,cube[i1].position.x,cube[i1].position.y,cube[i1].position.z,render_distance+1000)
      &&
      !(check_into_square(fixed_x,fixed_y,fixed_z,cube[i1].position.x,cube[i1].position.y,cube[i1].position.z,render_distance/2))
    ){
      scene.remove(cube[i1])
      delete cube[i1]
    }
  }
}
read=(obj)=>{
  // Read.
  return localStorage.getItem(obj)
}
save=(obj,val)=>{
  // Save.
  localStorage.setItem(obj,val)
}
</script>

Mi objetivo con este código era crear un juego tipo minecraft. Alguien me puede ayudar? Gracias por el sitio de todos modos ;)

2

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.