Be-Maya-Modell mit Three.js

Ich bin nach diese tutorial auf, wie zu laden, Maya Modelle mit Three.js.

Alles in Ordnung ist, aber die Anleitung wird nur erklärt, wie Sie die Last Modelle mit einer textur.

Hier ist der source-code aus dem 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);
        }

Aber mein Modell hat vier Texturen. Was sollte ich ändern, laden Sie alle?Live-Link

Schreibe einen Kommentar