I have been trying to apply brick texture to ExtrudedGeometry mesh. I couldn’t find anything relating to this issue.
I wanted to achieve fixed texture size no matter the geometry dimension
similar problem: THREE.JS UV Mapping on ExtrudeGeometry - Stack Overflow
-seems likes ExtrudedGeometry is the problem(not 100% sure)
You can go through this link. It gives an idea of how to repeat textures.
You can map the loaded texture to any material that you are using for the generated geometry mesh.
Thanks for the link. But I have went through that links and theoretically texture.wrapS = texture.wrapY = RepeatWrapping should have handled the repetition part. I wanted to understand why only certain side’s texture is being ‘strenched’.
you might also look to add the below
texture.repeat.set( 4, 4 );
Play with the numbers as required, 4 might be too small for our requirement.
hmm. from further inspection, I believe there is something wrong with the uvs coordinates. looks like texture is projected in an angle
Can you please share your example in a jsfiddle ?
yes of course but unfortunately I have never used js fiddle before and I want to create as similar scene as possible.
sorry about the delay.
sad news is I was not able to recreate the project in js fiddle…
But I made a new repository in github (GitHub - jhlee4/texture-mapping-testing)
npm install then
npm start
should open start the project.
I’ll try to upload the project on online playground.
I couldn’t solve it using ExtrudedGeometry, so I found the workaround to this issue. I just created thin BoxGeometry for each wall and placed it in front of the original wall.
Before:
Could you please share your solution? I’m trying to build brick walls, similar to yours. Thank you in advance!
