Okay, hello. I'm just getting into threejs. I am currently developing a kind of block game (compare Minecraft).
I decided not to base the whole program on objects, but on planes. (per PlaneGeometry class)
Since I've almost finished writing my renderer, I want to use different blocks with different textures - like in minecraft - because so far the texture is the same for each block.
How can I use different THREE.Mesh textures with one Geometry object?
Is that even possible - and does anyone have any idea how I can do that?
I have published parts of my code below:
/* geometry.js */
let size = 100;
let matrix = new THREE.Matrix4();
for (let z = 0; z < world.size.depth; z++) {
for (let x = 0; x < world.size.width; x++) {
for (let y = 0; y < world.size.height; y++) {
matrix.makeTranslation(
x * size - (world.size.width / 2) * size,
y * size,
z * size - (world.size.depth / 2) * size
);
// generate 6 PlaneGeometry's (6 cube sides)
// and merge visible ones to the geometry
geometry.merge(PlaneGeometry_N_0to5, matrix);
}
}
}
geometry = new THREE.BufferGeometry().fromGeometry(geometry);
/* texture.js */
// make this stuff for multiple textures (different $path$) for sure
let loader = new THREE.TextureLoader();
let texture = loader.load("$path$"); // path of texture
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
let mesh = new THREE.Mesh(
geometry,
new THREE.MeshLambertMaterial({
map: texture,
vertexColors: THREE.VertexColors,
side: THREE.DoubleSide
})
);
scene.add(mesh)