How can hiding faces be accomplished in Threejs? Doesn't seem to work

[Hritik_RC]

I am working on a project related to making a voxel world. Currently, I am working on improving the game performance, which isn’t going great. I have seen a method which basically hides the faces that can’t be seen. A problem I face is that when I hide a face of one mesh, it hides that specific face of al the other meshes. This makes no sense to me as to why this is happening.

This is the world…

Each block in the world is in a 2d array called “chunks”. In the screenshot above, all I do is make the first block’s material’s face null, (index 0 means the right sided face), making the face transparent. I did this only for the first block of the world (chunks[0][0]), but this made all the blocks’s right face transparent for some reason. I made each block an object with a mesh and other properties. The code of my project is below:
Link to my project

Any help would be very nice! Thanks!

[danigatunes]

mesh.material is a reference to materialArray. when you mutate material[0], you’re also mutating materialArray[0]. You could solve this by doing a copy when creating the mesh:
this.mesh = new THREE.Mesh(blockBox, [...materialArray]);

But in anycase I recommend you to look into some other meshing methods like the ones explained in this article:

Meshing in a Minecraft Game

You can even do super cheap AO with this kind of meshing method:

Ambient occlusion for Minecraft-like worlds

And if you want to take it further even add lighting to it:

Seed of Andromeda

[Hritik_RC]

I tried out your advice and I am so glad to say that it actually works! Thanks a lot! There is just one problem that when I load the file and run it on the server, it takes a while to load the pictures as the computer has to load individual faces for each block. This should make more sense:

            var blockBox = new THREE.BoxBufferGeometry(5, 5, 5); // w, h, d
			// var blockMaterial = new THREE.MeshBasicMaterial({color : 0x00ff00});
			if(this.x == 0 && this.z == 0){
				this.mesh = new THREE.Mesh(blockBox, [
					null, // right
					new THREE.MeshBasicMaterial({map : loader.load("texture/side1.jpg")}), // left
					new THREE.MeshBasicMaterial({map : loader.load("texture/top.jpg")}), // top
					new THREE.MeshBasicMaterial({map : loader.load("texture/bottom.jpg")}), // bottom
					new THREE.MeshBasicMaterial({map : loader.load("texture/side2.jpg")}), // front
					new THREE.MeshBasicMaterial({map : loader.load("texture/side3.jpg")}), // back
				]);
			} else {
				this.mesh = new THREE.Mesh(blockBox, [
					new THREE.MeshBasicMaterial({map : loader.load("texture/side4.jpg")}), // right
					new THREE.MeshBasicMaterial({map : loader.load("texture/side1.jpg")}), // left
					new THREE.MeshBasicMaterial({map : loader.load("texture/top.jpg")}), // top
					new THREE.MeshBasicMaterial({map : loader.load("texture/bottom.jpg")}), // bottom
					new THREE.MeshBasicMaterial({map : loader.load("texture/side2.jpg")}), // front
					new THREE.MeshBasicMaterial({map : loader.load("texture/side3.jpg")}), // back
				]);
			}

This is what I have done using your advice, this just makes the first block’s right side invisble…