Загрузка модели Maya с помощью Three.js

Question

Я следую this учебным пособиям о том, как загрузить модели Maya с помощью Three.js.

Все в порядке, но в учебнике объясняется, как загружать модели с одной текстурой.

Вот исходный код из учебника:

function createScene(geometry, x, y, z, scale, tmap) { 
      zmesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture(tmap)})); 
      zmesh.position.set(x, y, z); 
      zmesh.scale.set(scale, scale, scale); 
      meshes.push(zmesh); 
      scene.add(zmesh); 
     } 

Полный JS Live Link

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

     var container; 

     var camera, scene; 
     var canvasRenderer, webglRenderer; 

     var mesh, zmesh, geometry, materials; 

     var windowHalfX = window.innerWidth/2; 
     var windowHalfY = window.innerHeight/2; 

     var meshes = []; 

     init(); 
     animate(); 

     function init() { 

      container = document.createElement('div'); 
      document.body.appendChild(container); 

      camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH/SCREEN_HEIGHT, 1, 100000); 
      camera.position.x = 400; 
      camera.position.y = 200; 
      camera.position.z = 400; 

      scene = new THREE.Scene(); 

      // LIGHTS 
      var ambient = new THREE.AmbientLight(0x666666); 
      scene.add(ambient); 

      var directionalLight = new THREE.DirectionalLight(0xffeedd); 
      directionalLight.position.set(0, 70, 100).normalize(); 
      scene.add(directionalLight); 

      // RENDERER 
      webglRenderer = new THREE.WebGLRenderer(); 
      webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
      webglRenderer.domElement.style.position = "relative"; 

      container.appendChild(webglRenderer.domElement); 
      var loader = new THREE.JSONLoader(), 
       callbackKey = function (geometry, materials) { 
        createScene(geometry, materials, 0, 0, 0, 6); 
       }; 
      loader.load("chameleon.js", callbackKey); 

      window.addEventListener('resize', onWindowResize, false); 

     } 

     function createScene(geometry, materials, x, y, z, scale) { 


      zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
      zmesh.position.set(x, y, z); 
      zmesh.scale.set(scale, scale, scale); 
      meshes.push(zmesh); 
      scene.add(zmesh); 

     } 

     function onWindowResize() { 

      windowHalfX = window.innerWidth/2; 
      windowHalfY = window.innerHeight/2; 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      webglRenderer.setSize(window.innerWidth, window.innerHeight); 
     } 

     function animate() { 
      for (var i = 0; i < meshes.length; i++) { 
       meshes[i].rotation.y += 0.01; 
      } 
      requestAnimationFrame(animate); 
      render(); 
     } 

     function render() { 
      camera.lookAt(scene.position); 
      webglRenderer.render(scene, camera); 
     } 

Но моя модель имеет четыре текстуры. Что я должен изменить, чтобы загрузить все из них? Live Link

Answer 1

он появляется учебник ваш следующий игнорирует материалы из формата JSON модели и просто проходящее геометрию и прямую текстовую ссылку на один файл текстуры, как так:

var loader = new THREE.JSONLoader(), 
    callbackKey = function(geometry) {createScene(geometry, 0, 0, 0, 15, "chameleon.jpg")}; 
loader.load("chameleon.js", callbackKey); 

JSONLoader не только вытягивает в геометрии, но все материалы в массиве. (См: https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js линия 45), то Вы можете передать этот массив в MeshFaceMaterial (arrayOfMaterials) как так:

var loader = new THREE.JSONLoader();, 
    callbackKey = function(geometry, materials) {createScene(geometry, materials, 0, 0, 0, 15,)}; 
loader.load("chameleon.js", callbackKey); 

Затем в функции createScene изменить первую строку быть:

zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 

Редактировать: Добавить информацию об исправлении экспорта майя

Так что ваша модель загружается, но черная. В этом случае проблема находится в файле модели chameleon.js. Посмотрите на каждый материал colorAmbient и colorDiffuse. Обратите внимание, что все они [0.0, 0.0, 0.0]. Это известная ошибка экспорта в Maya. Таким образом, у вас есть 3 варианта исправить это.

1) Откройте файл chameleon.js и изменить все colorAmbient и colorDiffuse линии на что-то вроде этого (вы должны играть с ценностями, чтобы сделать его смотреть прямо)

"colorAmbient" : [0.8, 0.8, 0.8], 
"colorDiffuse" : [0.8, 0.8, 0.8], 

ИЛИ

2) В Maya перед применением вашей диффузной карты всегда обязательно используйте значение цвета по умолчанию. По какой-то причине, как только карта на вас больше не могут получить доступ к свойству цвета и экспортер использует по умолчанию значение 0.

ИЛИ

3) После экспорта из Maya вы можете изменить файл OBJ путем изменения этих линии от:

Kd 0.00 0.00 0.00 

Для

Kd 0.80 0.80 0.80 

Я проверил это здесь дома и ваша модель выглядит хорошо, дайте мне знать, как она идет?