Search code examples
javascriptthree.jstextures

Map texture on 1x1 model threejs

So I have a very simple box model that I want to put a texture (around 300x300) on.

Currently I have this code to load the material:

new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'materials/orange.jpg' ), shininess: 50, shading: THREE.SmoothShading })

The issue is that the material is just showing the top left pixel as it's a 1x1 model. I would like a way to have a texture stretch so it appears as 300x300 on the model.

Thanks for any help, Ed.

Solution

  • So turned out I needed to apply smartUV wrapping to the model before export, now it works perfectly. I just went into editor mode in blender and opened UV mapping with the U key and chose smart unwrapping.