WebGL + Three.js - 将自定义纹理应用于.Obj模型

Question

我已粘贴了所有代码。基本上，我无法弄清楚如何将自定义纹理应用于我的对象。我想在下面的javascript代码中应用这样的东西，替换MeshLambertMaterial，但我不知道从哪里开始。我觉得它应该只是几行代码。我基本上需要更换以下内容：

var material = new THREE.MeshFaceMaterial(materials);
      var material2 = new THREE.MeshLambertMaterial({ color: 0x33ffcc });

      object.traverse( function(child) {
        if (child instanceof THREE.Mesh) {

          // apply custom material
          child.material = material2;
        }
      });

......有更像这样的东西：

var texture = new THREE.Texture();

            var loader = new THREE.ImageLoader();
            loader.addEventListener( 'load', function ( event ) {

                texture.image = event.content;
                texture.needsUpdate = true;
                texture.magFilter = THREE.NearestFilter;
                texture.minFilter = THREE.NearestMipMapLinearFilter;

            } );
            loader.load( 'texture.png' );

以下是我的主要脚本：

 var my3dview = {
  scene: null,
  camera: null,
  renderer: null,
  container: null,
  controls: null,
  clock: null,

  init: function() { // Initialization

    // create main scene
    this.scene = new THREE.Scene();
    this.scene.fog = new THREE.FogExp2(0xcce0ff, 0.0003);

    var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight;

    // prepare camera
    var VIEW_ANGLE = 6, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 1000;
    this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    this.scene.add(this.camera);
    this.camera.position.set(0,50,300);
    this.startPosition = this.camera.position.clone();
    this.camera.position.set(this.startPosition.x, this.startPosition.y, this.startPosition.z);
    this.camera.lookAt(new THREE.Vector3(0,0,0));

    // prepare renderer
    this.renderer = new THREE.WebGLRenderer({ antialias:true });
    this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    this.renderer.setClearColor(this.scene.fog.color);

    // prepare container
    this.container = document.createElement('div');
    document.body.appendChild(this.container);
    this.container.appendChild(this.renderer.domElement);

    // events
    THREEx.WindowResize(this.renderer, this.camera);

    // prepare controls (OrbitControls)
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    this.controls.target = new THREE.Vector3(0, 0, 0);
    this.controls.maxDistance = 1000;

    // prepare clock
    this.clock = new THREE.Clock();

    // add spot light
    var spLight = new THREE.SpotLight(0xffffff, 1.75, 2000, Math.PI);
    spLight.position.set(200, 1000, 200);

    this.scene.add(spLight);
    // add spot light
    var spLight2 = new THREE.SpotLight(0xffffff, 1.75, 2000, Math.PI);
    spLight2.position.set(-200, -750, -200);
    this.scene.add(spLight2);

    // load a model
    this.loadModel();
  },
  loadModel: function() {

    // prepare loader and load the model
    var oLoader = new THREE.OBJLoader();
    oLoader.load('tshirt.obj', function(object, materials) {

      var material = new THREE.MeshFaceMaterial(materials);
      var material2 = new THREE.MeshLambertMaterial({ color: 0x33ffcc });

      object.traverse( function(child) {
        if (child instanceof THREE.Mesh) {

          // apply custom material
          child.material = material2;
        }
      });

      object.position.x = 6;
      object.position.y = -8;
      object.position.z = 0;
      object.scale.set(1, 1, 1);
      my3dview.scene.add(object);
    });
  }
};

// Animate the scene
function animate() {
  requestAnimationFrame(animate);
  render();
  update();
}

// Update controls
function update() {
  my3dview.controls.update(my3dview.clock.getDelta());
}

// Render the scene
function render() {
  if (my3dview.renderer) {
    my3dview.renderer.render(my3dview.scene, my3dview.camera);
  }
}

// Initialize lesson on page load
function initializeLesson() {
  my3dview.init();
  animate();
}

if (window.addEventListener)
  window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
  window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;

我正在从主HTML中加载以下文件：

<script src="js/three.min.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/script1.js"></script>