How to use InstancedMesh free of lag?

Questions
1

I have this code:

<meta charset="UTF-8">
<title>3D monochromatic minecraft.js</title>
<script src="three.js"></script>
<script src="perlin.js"></script>
<script src="stats.js"></script>
<script type="module">
		// Performance Stats
	var stats1 = new Stats();
	stats1.showPanel(0); // Panel 0 = fps
	stats1.domElement.style.cssText = 'position:absolute;top:0px;left:0px;';
	document.body.appendChild(stats1.domElement);

	var stats2 = new Stats();
	stats2.showPanel(1); // Panel 1 = ms
	stats2.domElement.style.cssText = 'position:absolute;top:0px;left:80px;';
	document.body.appendChild(stats2.domElement);

	var stats3 = new Stats();
	stats3.showPanel(2); // Panel 1 = ms
	stats3.domElement.style.cssText = 'position:absolute;top:0px;left:160px;';
	document.body.appendChild(stats3.domElement);

	function animate(){
		stats1.update();
		stats2.update();
		stats3.update();
		requestAnimationFrame(animate);
	}

	requestAnimationFrame(animate);

	let scene = new THREE.Scene()
	let renderer = new THREE.WebGLRenderer()
	renderer.setSize(innerWidth,innerHeight)
	document.body.appendChild(renderer.domElement)
	let camera = new THREE.PerspectiveCamera(75,innerWidth/innerHeight,0.1,1000)

	addEventListener("resize",()=>{
		renderer.setSize(innerWidth,innerHeight)
		camera.aspect=innerWidth/innerHeight
		camera.updateProjectionMatrix()
	})

	let box = new THREE.BoxGeometry(1,1,1)
	let lime = new THREE.MeshBasicMaterial({color:"rgba(0,255,0,1)"})
	let cesped = new THREE.MeshBasicMaterial({color:"rgba(0,255,150,1)"})

	const getSurface2D=(x,z)=>{
		return noise.perlin2(x,z)+
		noise.perlin2(x/4,z/4)*4+
		noise.perlin2(x/16,z/16)*16+
		noise.perlin2(x/64,z/64)*64
	}
	const pInt=(n)=>{
		return Math.floor(n)
	}

	let renderDistance=32

	let depth=4

	let World1=new THREE.InstancedMesh(box, cesped, renderDistance * renderDistance * depth)

	for(let i = -renderDistance/2; i < renderDistance/2; i++){
		for(let k = -renderDistance/2; k < renderDistance/2; k++){
			for(let j=0;j<depth;j++){
				World1.setColorAt ({index:0, color : Math.random()<0.5?lime:cesped})
			}
		}
	}
	//Crea los controles del mouse:
	let xa=0;
	let ya=0;
	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.005*event.movementY
		}
		if(ya<1.5&&event.movementY<0){
			ya-=0.005*event.movementY
		}
	}
	}
	//Crear los controles de teclado:
	let k=[];
	onkeydown=onkeyup=(e)=>{
		k[e.keyCode]=e.type=="keydown"
	}

	function render(){
		requestAnimationFrame(render)
		renderer.render(scene,camera)
        if(-1.5>ya){ya=-1.5}
        if(1.5<ya){ya=1.5}
        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)
        )
    	let walkSpeed=0.5
    	if(k[32]){//Space.
    		camera.position.y+=walkSpeed
    	}
    	if(k[88]){//X key.
    		camera.position.y-=walkSpeed
    	}
    	//WASD Keys:
        if(k[65]){
          camera.position.x+=walkSpeed*Math.cos(xa)
          camera.position.z-=walkSpeed*Math.sin(xa)
        }
        if(k[87]){
          camera.position.x+=walkSpeed*Math.sin(xa)
          camera.position.z+=walkSpeed*Math.cos(xa)
        }
        if(k[68]){
          camera.position.x-=walkSpeed*Math.cos(xa)
          camera.position.z+=walkSpeed*Math.sin(xa)
        }
        if(k[83]){
          camera.position.x-=walkSpeed*Math.sin(xa)
          camera.position.z-=walkSpeed*Math.cos(xa)
        }
	}
	render()
</script>
<style>
body{
	margin:0px;
}
</style>

But it appears this:

image
image1919×1079 204 KB

So i need to appear the color like this part:

It’s possible?

2

There’s quite a lot of errors in the code you’ve shared - more than it’d be reasonable to go through unfortunately. You’re mixing global scope, vars, lets, random semicolons, poorly named variables, lines 69-92 that’d put many developers pretty much right in jail, plus quite a bit of the code is actually unused.

We’re here to help you get unstuck, but please make sure the code you’re sharing is readable and in good condition, and questions you’re asking are about specific parts of it.

Try building your game not as a whole, but from smaller parts. Here’s a simple example of how to use instancing (code in the bottom right) - and here’s docs explaining the API. Build a scene with instanced cubes without any kind of interaction, it’ll ensure you’re not causing random bugs by attempting to everything at once.

1 Like
3

Ok, my doubt is… how i can create a renderDistance sized instancedMesh cube? i dont want to be rude, so sorry if i did bad…

4

I marked that:

image
image1347×775 19.7 KB

Thats probe that coloring method is worst than texture method.

Look at that FPS :rofl: :
image