three.js I load a image as the texture, but the texture looks very small

Question

I load a obj model and I want to give every surface different images. Firstly,I test one image.But it looks very small. Does anyone know how it is?

pic1

pic2

this is my code

 var loader = new THREE.OBJLoader();

        loader.load("./models/scene.obj",function (loadedMesh) {

             var materialcolor = new THREE.MeshLambertMaterial({color: 0xffff00});
            //
            var loader = new THREE.TextureLoader();
            var texture = loader.load( 'textures/dlam.jpg', render );
            //texture.wrapS = THREE.RepeatWrapping;
            //texture.wrapT = THREE.RepeatWrapping;
            //texture.repeat.set( 4, 4 );
            material = new THREE.MeshBasicMaterial( { map: texture } );
            //var material2 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('textures/crate.jpg') } );
            model=loadedMesh.children[0];
            model.material=material;

            console.log('model',model);
            console.log('model.geometry',model.geometry)
            console.log('model.geometry',model.geometry)
            console.log('faces',model.geometry.faces)

            //model.scale.set(4,4,4);
            scene.add(model);

Possible duplicate of [Three.js and loading a cross-domain image](https://stackoverflow.com/questions/24087757/three-js-and-loading-a-cross-domain-image) — Manmohan_singh, May 28 '18 at 03:20

score 0 · Answer 1 · answered May 28 '18 at 03:08

One problem with your code is that your texture won't neccesarily have finished loading before you do the material set up.

You want to put everything after the texture load into the "loaded" callback on the TextureLoader().load..

R.E. the texture sizing.. .try setting texture.repeat.set(10,10) or texture.repeat.set(0.1,0.1) and use texture.offset.set( nn , nn ) to adjust positioning. also set:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping.

let me know if this helps!

edit: just read your comment more closely...

Getting a different texture on each face will be tricky. Basically I would try to make what you want in modelling software like Blender... and then export it as GLTF and load that.

Doing it programmatically is fiddly... but you can. You'll have to break your sphere into different sections each with its own material... Or merge all your textures into one big texture, and map that.

Thanks for your reply. I use the texture.repeat.set(0.04,0.4). It works. If I set every face with its own material, how to know the order of every face and how to break the sphere?Is there any example? Thank you very much again!! — yjcn, May 31 '18 at 14:24

three.js I load a image as the texture, but the texture looks very small

1 Answers1