Добавить текстуру поверх пользовательского материала и объекта Three.js - PullRequest
Новая
       74

Добавить текстуру поверх пользовательского материала и объекта Three.js

0 голосов
/ 18 февраля 2019

в приведенных ниже кодах я импортировал объект и материал из конструктора Marvelous и могу их использовать.Теперь я хочу добавить текстуру (файл .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();

Приведенный выше код внес изменения в цвет материала или объекта, НО я не вижу никаких изменений в шаблоне, я имею в виду, я не вижу шаблон текстуры поверх объекта.Я вижу только основной цвет текстуры применяется к объекту.Так, например, объект превращается в красный, синий или розовый.НО без рисунка или текстуры, только одноцветное изменение.Ищете ваши идеи Спасибо

...