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.
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
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:
You can even do super cheap AO with this kind of meshing method:
And if you want to take it further even add lighting to it:
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…
