Loading Maya model with Three.js

问题

I am following this tutorial on how to load Maya models with Three.js.

Everything is fine, but tutorial only explains how to load models with one texture.

Here's the source code from the tutorial:

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);
        }

Full 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);
        }

But my model has four textures. What should I change to load all of them?Live Link

回答1:

it appears the tutorial your following is ignoring the materials from the JSON model format and simply passing the geometry and a straight text reference to a single texture file like so:

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

The JSONLoader not only pulls in the geometry but all the materials in an array. (see: https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js line 45) You can then pass this array to the MeshFaceMaterial(arrayOfMaterials) like so:

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

Then in your createScene function you change the first line to be:

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

Edit: Adding details on fixing Maya exports

So your model is loading but black. In this case the issue is in the model file chameleon.js. Have a look at each material's colorAmbient and colorDiffuse property. Notice they're all [0.0, 0.0, 0.0]. This is a known obj export bug in Maya. So you have 3 options to fix it.

1) Open the chameleon.js file and alter all the colorAmbient and colorDiffuse lines to something like this (you'll need to play with the values to make it look right)

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

2) In Maya before applying your diffuse map, always make sure to apply a default color value first. For some reason once the map is on you can no longer access the color property and the exporter uses the default value of 0.

3) After exporting from Maya you can alter the OBJ file by change these lines from: