So I am Trying to Modify The thee.js example voxel painter to learn more about three.js. I am trying to make it so that you can change the texture of the voxels and I did that but it changes all the voxels, placed and unplaced. Here is my question: How can I make it so that it only affect the voxels I place after I select the Block, not the ones already Placed.
index.html (10.3 KB)
Make a new material for each texture… and instead of changing the block.material.map… swap out the block.material
or material.clone()
thank you but, I’m not entirely sure how to do this, could you elaborate or point me to the relevant part of the documentation. Also what is the difference in changing block.material.map vs block.material
Your cubes are using a THREE.MeshLambertMaterial.
See documentation at THREE.MeshLambertMaterial
There you will also find information about map.
Clone comes from the THREE.MeshLambertMaterial base class which is a THREE.Material
Normally if you change a material property and it affects multiple meshes, that is because those meshes share that same material.
If you want a meshes material to be unique, then either create a new material, or clone an existing.
In this minimal demo, meshA and meshB share the same material, so changing the color of either, will effect the other. But meshC has its own unique material that was cloned from the same materail used by both meshA and meshB. See line 71.
thank you, I will start my documentation reading, and take a look at that demo!
Thank you, It worked!
It was as simple as changing var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
to cubematerial.clone().
with this change do I still need the function updateCubeTexture(texturePath) function?
(Updated Script), I added a Welcome Modal, that activates when the dom is loaded as well as a if, else statement on the voxel placement so that it dosen’t place a block when closeing the modal.
index.html (10.7 KB)