Three.js를 사용하여 모델에 여러 텍스처/재료를로드하려면 어떻게해야합니까?

Question

일부 샘플 코드를 사용 중이고 JSONLoader를 사용하여 모델을 추가했습니다. 하나의 텍스처만으로 객체를로드 할 수 있습니다. 하지만 개체 (이 경우에는 다른 질감/재료 (잔디, 지붕, 창 등)가있는 집)를 가져온 후에는 모델이 일반 회색으로 표시됩니다. http://trakalas.com/test/sandbox.php

이 블렌더에서 모델 (3DS 형식이)은 .js로 내보내기 전에 다음과 같습니다 :

이 내 예제 및 실행 Image of model in Blender with textures

을 그리고 여기 내가 사용의 주요 코드입니다 :

<script> 

// MAIN 

// standard global variables 
var container, scene, camera, renderer, controls, stats; 
var keyboard = new THREEx.KeyboardState(); 
var clock = new THREE.Clock(); 
// custom global variables 
var cube; 

init(); 
animate(); 

// FUNCTIONS   
function init() 
{ 
    // SCENE 
    scene = new THREE.Scene(); 

    // CAMERA 
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; 
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH/SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; 
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); 
    scene.add(camera); 
    camera.position.set(0,550,50); 
    camera.lookAt(scene.position); 

    // RENDERER 
    if (Detector.webgl) 
     renderer = new THREE.WebGLRenderer({antialias:true}); 
    else 
     renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
    container = document.getElementById('ThreeJS'); 
    container.appendChild(renderer.domElement); 

    // EVENTS 
    THREEx.WindowResize(renderer, camera); 
    THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) }); 

    // CONTROLS 
    controls = new THREE.OrbitControls(camera, renderer.domElement); 

    // STATS 

    stats = new Stats(); 
    stats.domElement.style.position = 'absolute'; 
    stats.domElement.style.bottom = '0px'; 
    stats.domElement.style.zIndex = 100; 
    container.appendChild(stats.domElement); 

    // LIGHT 
    var light = new THREE.PointLight(0xffffff); 
    light.position.set(0,250,50); 
    scene.add(light); 

    // FLOOR 
    var floorTexture = new THREE.ImageUtils.loadTexture('images/checkerboard.jpg'); 
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
    floorTexture.repeat.set(10, 10); 
    var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide }); 
    var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10); 
    var floor = new THREE.Mesh(floorGeometry, floorMaterial); 
    floor.position.y = -0.5; 
    floor.rotation.x = Math.PI/2; 
    scene.add(floor); 

    // SKYBOX/FOG 
    var skyBoxGeometry = new THREE.CubeGeometry(10000, 10000, 10000); 
    var skyBoxMaterial = new THREE.MeshBasicMaterial({ color: 0x9999ff, side: THREE.BackSide }); 
    var skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial); 
    // scene.add(skyBox); 
    scene.fog = new THREE.FogExp2(0x9999ff, 0.00025); 

    ////////////// 
    // THE REST // 
    ////////////// 

    addSomething(-120,100,1); 
} 

function addSomething(posx,posy,posz) { 
    var jsonLoader = new THREE.JSONLoader(); 
    jsonLoader.load("models/residential_001.js", 
      function (geometry) { 
       addObject(geometry,posx,posy,posz) 
      }); 
} 

function addObject(geometry,posx,posy,posz) { 

    var materialArray = []; 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('models/Asphalt .bmp') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('models/Brick Ru.bmp') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('models/Brick Wh.bmp') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('models/Grass Gr.bmp') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('models/Lead.bmp') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('models/Poured c.bmp') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('models/Roof 4.bmp') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('models/Wood Gra.bmp') })); 
    var houseMaterials = new THREE.MeshLambertMaterial(materialArray);     

    house = new THREE.Mesh(geometry, houseMaterials); 
    house.position.set(posx, posy, posz); 
    house.scale.set(100, 100, 100); 
    scene.add(house); 
} 


function animate() 
{ 
    requestAnimationFrame(animate); 
    render();  
    update(); 
} 

function update() 
{ 
    if (keyboard.pressed("z")) 
    { 
     // do something 
    } 

    controls.update(); 
    stats.update(); 
} 

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

</script> 

광산처럼 매트/텍스처를로드하는 올바른 방법은 무엇입니까?

고마워요.

Answer 1

JSON 모델 파일에서 지오메트리 만 가져 오는데 왜 지오메트리와 재질을 모두 가져 오지 않습니까?

  loader = new THREE.JSONLoader(); 
      loader.load("models/residential_001.js", function(geometry, materials) { 
       house = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
       house.position.set(-120, 100, 1); 
       house.scale.set(1, 1, 1); 
       scene.add(house); 
      });