I have this code on an infinite city ground generated:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<script>
xa=ya=0
k=[]
onkeydown=onkeyup=(e)=>{k[e.keyCode]=e.type=="keydown"}
render=()=>{
renderer.setSize(innerWidth,innerHeight)
camera.aspect=innerWidth/innerHeight
camera.updateProjectionMatrix()
requestAnimationFrame(render)
renderer.render(scene,camera)
if(-1.5>ya){ya=-1.5}
if(1.5<ya){ya=1.5}
if(k[65]){//Leftward.
camera.position.x-=0.005*Math.cos(xa)
camera.position.z+=0.005*Math.sin(xa)
}
if(k[87]){//Forward.
camera.position.x-=0.005*Math.sin(xa)
camera.position.z-=0.005*Math.cos(xa)
}
if(k[68]){//Rightward.
camera.position.x+=0.005*Math.cos(xa)
camera.position.z-=0.005*Math.sin(xa)
}
if(k[83]){//Backward.
camera.position.x+=0.005*Math.sin(xa)
camera.position.z+=0.005*Math.cos(xa)
}
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)
)
}
onload=()=>{
document.title="MadDrFrank's City."
document.body.style.margin=0
scene=new THREE.Scene()
camera=new THREE.PerspectiveCamera(75,innerWidth,innerHeight,1,10000)
renderer=new THREE.WebGLRenderer()
document.body.appendChild(renderer.domElement);
ground_mesh=new THREE.BoxGeometry(1000,1,1000)
loader=new THREE.TextureLoader()
ground_texture=loader.load("ground.jpeg")
const map = ground_texture;
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.repeat.set( 256, 256 );
ground_material=new THREE.MeshBasicMaterial({map:ground_texture})
cube=new THREE.Mesh(ground_mesh,ground_material)
scene.add(cube)
camera.position.y=5
render()
}
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
}
}
}
</script>
But i want instead a black screen, i want to render a walk with the terrain. Its possible? Thanks anyway.
