Add texture over material

Questions
, ,
1

Hello, in the below codes, I imported object and material from Marvelous designer and I can use them. Now I want add texture(.jpg file) over that mateerial and object. How can I do that?
const objLoader = new THREE.OBJLoader();

      const mtlLoader = new THREE.MTLLoader();
      mtlLoader.setMaterialOptions({side:THREE.DoubleSide});
                        //loaded material here
			mtlLoader.load( 'mrv_shirt6.mtl', function( materials ) {
				materials.preload();
                                //loaded object here
				objLoader.setMaterials( materials );
				objLoader.load( 'mrv_shirt6.obj', function ( object ) {
					object.position.set( 0, -4.2, 0 );
					scene.add( object );
				},
        // onProgress callback
      	function ( xhr ) {
      		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
      	},

      	// onError callback
      	function ( err ) {
      		console.log( 'An error happened' );
      	});
			});

      function render(){
        requestAnimationFrame(render);
        renderer.render(scene,camera);
      }

As you can see, I use an imported material and object. Now I want to cover that material and object with my custom texture which is .jpg file. How can I achieve this?
Thanks

2

Hello,
I have added some code to change TEXTURE of the object of material as below:

      const objLoader = new THREE.OBJLoader();
      const mtlLoader = new THREE.MTLLoader();
      //add texture
      var textureLoader = new THREE.TextureLoader( );
      texture = textureLoader.load("kumas/fabric2.jpg");
      mtlLoader.setMaterialOptions({map:texture});

			mtlLoader.load( 'mrv_shirt6.mtl', function( materials ) {
				materials.preload();

				objLoader.setMaterials( materials );
				objLoader.load( 'mrv_shirt6.obj', function ( object ) {
					object.position.set( 0, -4.2, 0 );
					scene.add( object );
				},
        // onProgress callback
      	function ( xhr ) {
      		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
      	},

      	// onError callback
      	function ( err ) {
      		console.log( 'An error happened' );
      	});
			});

      function render(){
        requestAnimationFrame(render);
        renderer.render(scene,camera);
      }

      render();

The above code make no changes on the object or material. I can not see any texture changes on material or object

Secondly I tried this:
const objLoader = new THREE.OBJLoader();

      const mtlLoader = new THREE.MTLLoader();
      mtlLoader.setMaterialOptions({side:THREE.DoubleSide});

			mtlLoader.load( 'mrv_shirt6.mtl', function( materials ) {
				materials.preload();

				objLoader.setMaterials( materials );
				objLoader.load( 'mrv_shirt6.obj', function ( object ) {
					object.position.set( 0, -4.2, 0 );

          // texture
          var textureLoader = new THREE.TextureLoader( );
          texture = textureLoader.load("kumas/kumas1.jpg");
          object.traverse( function ( child ) {
  					//if ( child.isMesh ) child.material.map = texture;
  					if ( child.isMesh ) child.material = new THREE.MeshPhongMaterial({
  							//color:     0x996633,
  							//specular:  0x050505,
  							//shininess: my_shine_value,
  							map:       texture,
  							//side:      THREE.DoubleSide
  					});
  				} );

					scene.add( object );
				},
        // onProgress callback
      	function ( xhr ) {
      		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
      	},

      	// onError callback
      	function ( err ) {
      		console.log( 'An error happened' );
      	});
			});

      function render(){
        requestAnimationFrame(render);
        renderer.render(scene,camera);
      }

      render();

The above code made change on the color of the material or object BUT I can not see any pattern change, I mean I can not see pattern of the texture over the object. I only see main color of texture is applied to object. SO for example object turns into red, or blue or pink. BUT no pattern or texture only mono-color change.
Looking for your ideas
Thanks

3

/cc

4

Your second approach looks okay. But does your object’s geometry have valid texture coordinates? This is a prerequisite when using textures.

1 Like
5

Hey, thanks for response. How can I be sure about that? Can you show me a document or something about that. I just have simple shirt object which is created on Marvelous designer. THen I exported that object in the form of .obj. And Threeejs can render the object and material that I can see them on the scene BUT I dont know how to be sure about it have valid geometry or not.
Secondly if it doesnt have a valid geometry is there any thing that I can apply? Such as transforming my object geometry into something else? Any idea will be appreciated since I am totaly newbie to threejs and 3d world. Thanks

6

Hello, there is an improvement from the SO part. Someone offered there may be a problem with UVs of the object. I dont know what is UV but I realized that there is a section “Concatanated UV Coordinates”, I made a try with these preference selected. ANd now a quarter part of the object shows texture. Interestingly only lower right quarter part shows the correct texture. I am sharing the image that show the correct texture: https://imggmi.com/view/2019/2/18/265d47d674b3bcb9fb5d3f9aa79b54f5-full.png.html So I can see that only one quarter of the object shows correct texture. Any ides will be appreciated. Thanks

7

Hello,
The guy from the SO offered this and it worked:
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

Adding this line gave the solution. I just want to share with the community. Also any tutorial advice about this subject is appreciated. Thanks