Question

在以下代码中，我从Marvelous设计器中导入了对象和材料，并且可以使用它们。现在，我要在该材质和对象上添加texture（.jpg文件）。我该怎么办？

  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);
  }

如您所见，我使用导入的材料和对象。现在，我想用.jpg文件的自定义纹理覆盖该材质和对象。

我尝试了以下代码来加载纹理，但是它没有按预期工作：

  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();

以上代码对材质或对象的颜色进行了更改，但是我看不到任何图案变化，我的意思是我看不到对象上的纹理图案。我只看到纹理的主要颜色应用于对象。例如，对象变成红色，蓝色或粉红色。但是没有图案或纹理只有单色变化。寻找你的想法谢谢

在自定义材质和对象Three.js上添加纹理

0 个答案: