我想加載一個.obj文件，並在運行時通過按鈕單擊使用three.js來更改其紋理/材質

Question

每次我想加載加載我的模型並更改其紋理模型不加載時，在屏幕上。我是three.js/webgl語言和javascript的noob。請幫助我處理正確的信息。 這裏是下面的代碼。 https://drive.google.com/open?id=0BxJJ7XpRqKz4S3JONlAwSHJxdFk這個鏈接提供了在這個項目中使用的資產。

// once everything is loaded, we run our Three.js stuff. 
function init() { 

    var stats = initStats(); 

    // create a scene, that will hold all our elements such as objects, cameras and lights. 
    var scene = new THREE.Scene(); 

    // create a camera, which defines where we're looking at. 
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 

    // create a render and set the size 
    var webGLRenderer = new THREE.WebGLRenderer(); 
    webGLRenderer.setClearColor(new THREE.Color(0xaaaaff, 1.0)); 
    webGLRenderer.setSize(window.innerWidth, window.innerHeight); 
    webGLRenderer.shadowMapEnabled = true; 

    // position and point the camera to the center of the scene 
    camera.position.x = 100; 
    camera.position.y = 40; 
    camera.position.z = 50; 
    camera.lookAt(scene.position); 
    scene.add(camera); 

    // add spotlight for the shadows 
    var spotLight = new THREE.DirectionalLight(0xfa93e5); 
    spotLight.position.set(30, 40, 50); 
    spotLight.intensity = 0.5; 
    scene.add(spotLight); 

    // add the output of the renderer to the html element 
    document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement); 

    // call the render function 
    var step = 0; 


    // setup the control gui 
    var controls = new function() { 
     // we need the first child, since it's a multimaterial 


    }; 

    var gui = new dat.GUI(); 

    //model 
var loader = new THREE.OBJLoader(); 
loader.load('sofa 1.obj', function (object)); 






var sofa = new THREE.Mesh(object,fabric_1); 
    var texture = new THREE.ImageUtils.loadTexture("defaultMat_Base_Color(1).png"); 
    var texture2 = new THREE.ImageUtils.loadTexture("defaultMat_Base_Color_1.png"); 

    var material = THREE.ImageUtils.loadTexture("defaultMat_Normal_DirectX bump.png"); 
    var material1 = THREE.ImageUtils.loadTexture("sofa new final4 high-AO_u0_v0.png"); 
    var material2 = THREE.ImageUtils.loadTexture("lambert2SG_Roughness specular.png"); 

    var fabric_1 = new THREE.MeshPhongMaterial(
    { fabric_1.map = texture; 
     fabric_1.normalMap = material; 
     fabric_1.aoMap = material1; 
     fabric_1.specularMap = material2; }); 


    var fabric_2 = new THREE.MeshPhongMaterial(
    { fabric_2.map = texture_2; 
     fabric_2.normalMap = material; 
     fabric_2.aoMap = material1; 
     fabric_2.specularMap = material2; 

    }); 

    scene.add(sofa), 

    function setfabric_1() { 
     sofa.traverse(function(child){ 
     if(child instanceof THREE.Mesh){ 
      child.material = fabric_1; 
      } 
      sofa.geometry.uvsNeedUpdate = true; 
      sofa.needsupdate = true; 
     }); 
     } 

    function setfabric_2() { 
     sofa.traverse(function(child){ 
     if(child instanceof THREE.Mesh){ 
      child.material = fabric_2; 
      } 
      sofa.geometry.uvsNeedUpdate = true; 
      sofa.needsupdate = true; 
     }); 
     } 

    render(); 


    function render() { 
     stats.update(); 

     if (mesh) { 
      mesh.rotation.y += 0.006; 
      ;   
     } 

     // render using requestAnimationFrame 
     requestAnimationFrame(render); 
     webGLRenderer.render(scene, camera); 
    } 

    function initStats() { 

     var stats = new Stats(); 
     stats.setMode(0); // 0: fps, 1: ms 

     // Align top-left 
     stats.domElement.style.position = 'absolute'; 
     stats.domElement.style.left = '0px'; 
     stats.domElement.style.top = '0px'; 

     document.getElementById("Stats-output").appendChild(stats.domElement); 

     return stats; 
    } 
} 
window.onload = init; 

Answer 1

使用制服局部變量鏈接到着色器，確保你預裝的紋理第一雖然。 threejs.org/uniforms。更重要的是使用

"uTexArray" : { type: "tv", value: [ new THREE.Texture(), new THREE.Texture() ] } // texture array (regular) 

enter link description here