Texture on sides of Extruded Shape

Questions
,
1

Hi everyone!

I’m new in three.js and I have a problem with my texture in my extruded shape.

I have a room in rectangle that i draw it by shape, and then i extrude it by ExtrudeGeometry. Now I want to add a texture on one side of this extrude shape. But if I add texture for side, it will append to four sides, each side is one image of the texture. I just want to append texture to one side, not in four sides. Is there any way to do it?!
Capture

This above picture is my extruded shape, I want to append texture on just one side, not four sides like in the picture.

2

Hi!
Material applies to all side faces of THREE.ExtrudeGeometry().

3

You will need to use multi material here and assign respective materialIndex for the faces of the geometry. Just create an array with materials and it is a multi material

var multi_material = [new THREE.MeshPhongMaterial(),new THREE.MeshPhongMaterial()]
var mesh = new THREE.Mesh(new THREE.BoxGeometry(100,100,100),multi_material)
mesh.geometry.faces[0].materialIndex = 1;
mesh.geometry.faces[1].materialIndex = 1;
scene.add(mesh)

By Default every face has a materialIndex 0 so it takes multi_material[0] as its material

4

Of course, it’s an option. Just somehow he’ll need to know which face of THREE.ExtrudeGeometry() belongs which side.

5

Yes, for example the front side, how can I recognize that which face belongs to which side?
image

6

geometry.computeFaceNormals()

now the faces of the geometry have normals.
the face facing towards x direction will have normal (1,0,0)
with this you can know which face is what.

and this is also reliable if you rotate the mesh by changing mesh.rotation (dont rotate geometry), the normals will still be same in the local coordinates

7

What he has to do with those faces, which belong to the wall, but have normals not equal to [1, 0, 0]?