Block World 3D

<!DOCTYPE html>
<html>
<head>
<title>Block World 3D</title>
<style>
body { margin:0; overflow:hidden; }
#info {
position:absolute; top:10px; left:10px;
color:white; font:bold 18px Arial;
background:#0008; padding:12px;
}
</style>
</head>
<body>
<div id="info">BLOCK WORLD 3D<br>
WASD = Move | Mouse = Look<br>
Click = Break Block<br>
Space = Jump
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb);

const camera = new THREE.PerspectiveCamera(
75, innerWidth/innerHeight, 0.1, 1000
);
camera.position.set(0,3,6);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth,innerHeight);
document.body.appendChild(renderer.domElement);

scene.add(new THREE.HemisphereLight(0xffffff,0x555555,2));

const light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(5,10,5);
scene.add(light);

const geo = new THREE.BoxGeometry(1,1,1);
const grass = new THREE.MeshLambertMaterial({color:0x38aa35});
const dirt = new THREE.MeshLambertMaterial({color:0x79502d});
const blocks = [];

function addBlock(x,y,z,mat=grass) {
 const b = new THREE.Mesh(geo,mat);
 b.position.set(x,y,z);
 scene.add(b);
 blocks.push(b);
}

for(let x=-10;x<=10;x++){
 for(let z=-10;z<=10;z++){
  addBlock(x,0,z);
  addBlock(x,-1,z,dirt);
 }
}

// Trees
for(let i=0;i<8;i++){
 let x=Math.floor(Math.random()*16-8);
 let z=Math.floor(Math.random()*16-8);
 for(let y=1;y<=3;y++){
  addBlock(x,y,z,dirt);
 }
 for(let a=-1;a<=1;a++)
 for(let b=-1;b<=1;b++)
 for(let y=4;y<=5;y++)
 addBlock(x+a,y,z+b,
 new THREE.MeshLambertMaterial({color:0x16852c}));
}

const keys={};
document.addEventListener('keydown',e=>keys[e.code]=true);
document.addEventListener('keyup',e=>keys[e.code]=false);

let yaw=0, pitch=0;
renderer.domElement.addEventListener('click',()=>{
 renderer.domElement.requestPointerLock();
});

document.addEventListener('mousemove',e=>{
 if(document.pointerLockElement===renderer.domElement){
  yaw-=e.movementX*0.002;
  pitch-=e.movementY*0.002;
  pitch=Math.max(-1.5,Math.min(1.5,pitch));
 }
});

const ray=new THREE.Raycaster();
document.addEventListener('mousedown',e=>{
 if(e.button!==0)return;
 ray.setFromCamera(new THREE.Vector2(0,0),camera);
 const hits=ray.intersectObjects(blocks);
 if(hits.length && hits[0].distance<6){
  scene.remove(hits[0].object);
  blocks.splice(blocks.indexOf(hits[0].object),1);
 }
});

let velocity=0;
function animate(){
 requestAnimationFrame(animate);

 camera.rotation.order='YXZ';
 camera.rotation.y=yaw;
 camera.rotation.x=pitch;

 const speed=0.12;
 if(keys.KeyW){
 camera.position.x-=Math.sin(yaw)*speed;
 camera.position.z-=Math.cos(yaw)*speed;
 }
 if(keys.KeyS){
 camera.position.x+=Math.sin(yaw)*speed;
 camera.position.z+=Math.cos(yaw)*speed;
 }
 if(keys.KeyA){
 camera.position.x-=Math.cos(yaw)*speed;
 camera.position.z+=Math.sin(yaw)*speed;
 }
 if(keys.KeyD){
 camera.position.x+=Math.cos(yaw)*speed;
 camera.position.z-=Math.sin(yaw)*speed;
 }

 if(keys.Space && camera.position.y<=3.01) velocity=0.18;
 velocity-=0.008;
 camera.position.y+=velocity;
 if(camera.position.y<3){
 camera.position.y=3;
 velocity=0;
 }

 renderer.render(scene,camera);
}
animate();

window.addEventListener('resize',()=>{
 camera.aspect=innerWidth/innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize(innerWidth,innerHeight);
});
</script>
</body>
</html>