Multiple textures on a plane from one segment

Questions
,
1

Hello. I need to add textures at runtime in plane mesh with one segment. They should be on different layers so that I can move layers and display several textures at once by setting them offset and scale. I have several walls and posters on them. I have several walls and posters on them. I want to move them and stack them on top of each other. How i can achive that? I tried to use a shared material, but when adding textures to uniforms, there was no effect. In addition, when the material was recreated and replaced on one object, it was replaced everywhere.Thanks!

2

You can apply multiple materials to a mesh by setting the mesh.material = [ material1 , material2, … ]
Then on each material… it’s .map.offset and .map.repeat can be used to adjust the positioning…
You may also have to include a transparent border around the textures… so that you can use “ClampToEdge” wrapping on the texture to make it transparent outside of the actual texture image…

So the material setup might look like this:

let tex1 = new TextureLoader().load( "art1.jpg",( tex )=>{
tex.wrapS = tex.wrapT = THREE.ClampToEdgeWrapping;
}

let tex2 = new TextureLoader().load( "art2.jpg",( tex )=>{
tex.wrapS = tex.wrapT = THREE.ClampToEdgeWrapping;
}

let mat1 = new THREE.MeshBasicMaterial({
map: tex1,
transparent: true,
alphaTest: .5
})

let mat2 = new THREE.MeshBasicMaterial({
map: tex2,
transparent: true,
alphaTest: .5
})


let plane = new THREE.Mesh(new THREE.PlaneGeometry(), [ mat1, mat2 ] )

and then to adjust the positions/size of the textures…


tex1.repeat.set(2,2);
tex1.offset.x = .3

tex2.repeat.set(2,2);
tex2.offset.x = -.3

Something like that… feel free to DM me if you get stuck, or reply to this thread.

3

Thank you! This is what I need)

1 Like