Noob question - sorry

Questions
,
1

Hi,

Im new to the whole 3D scene and im stuck on square one.

Im trying to create a geometry and apply texture to it.

const cubeMesh = new THREE.Mesh(
        new THREE.BoxGeometry(2, 0.2, 1),
        new THREE.MeshStandardMaterial({map: loader.load('/concrete2/hangar_concrete_floor_diff_1k.png')}),
    )

But it loads the entire texture on all sides making it look squeezed together on some of the sides and I cant figure out how I can configure it to apply the texture correctly across the mesh. What am I missing?

Thanks!

2

Save yourself from math and just use Blender. Model the cube, apply proper UVs in 0.5 seconds, export to GLTF, use GLTFLoader (code in the bottom-right) to load it into three.js. This applies to models of any complexity - coding UVs by hand doesn’t go too far.

1 Like
3

Hey mjurczyk,

Thanks for your reply!

Unfortunately Blender wont be of much help as I will have to do some scaling/merging down the road, so all geometries/textures will have to be managed by code.

Are you saying that applying a texture to a geometry is a hustle in three.js?

Thanks!

4

It’s a hassle in any code - whether that’d be three, babylon, ogl, Unreal, directly shaders, or any other option. Ofc you can just scale the UV values (here’s how to calculate them in the first place.), but with exception of very trivial shapes, that quickly becomes unmanageable, esp. if you do the scaling at buffers’ level and then start applying matrix transformations to said buffers, expecting UVs to react to that.

Hard to help without knowing the actual context of what you’re building, but if you’re stuck to coding UVs, triplanar mapping may be your best bet.

1 Like
5

what mj said is something i would take to heart. there is no such thing as “applying the texture correctly across the mesh”. geometries have uv’s, which is a mapping format that will later tell the texture where to go. if your meshes have uv’s (which you make in blender) then you can exchange textures, merge and scale them. but creating uv’s by code is an exercise in frustration. if you map uv’s onto arbitrary shapes you will have stretching and glitches all over the place.

if you’re going into 3d dev then uv-unpack is one of the first big hinderances you have to cross. moving straight to uv code without understanding the problem you’re up against imo wouldn’t make much sense. it will quickly become clear to you what uv’s are and why you need them.

1 Like
6

Let me present two other options for boxes:

1 Like