Load Blender-Model with “Per-Face-Materials” in Three.js

Question

I've created a simple blender model. It's just one object. I then created two materials with different colors and colored some faces of the object with the first material, and the other faces with the second material.

I then exported the model using the provided Three.js-Export-Plugin and checked the floowing: Vertices, Faces, Normals, Bones, Skinning, UVs, Colors, Materials, FlipYZ and All Meshes.

Then I tried to import the generated JS-Model using the following code:

<html>
    <head>
        <script src="three.js/build/three.js"></script>
        <script>
            window.onload = function(){

                var camera, scene, renderer;
                var geometry,  mesh;

                init();
                animate();

                function init() {
                    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
                    camera.position.z = 1000;
                    scene = new THREE.Scene();
                    renderer = new THREE.CanvasRenderer();
                    renderer.setSize( window.innerWidth, window.innerHeight );
                    document.body.appendChild( renderer.domElement );

                    /* INTERESTING CODE */

                    var loader = new THREE.JSONLoader(true);
                    loader.load("./spiderhead.js",function(geometry) {
                        mesh = new THREE.Mesh(geometry,new THREE.MeshSpriteMaterial());
                        mesh.position.set(0,0,0);
                        mesh.scale.set(200,200,200);
                        scene.add(mesh);
                    });

                    /* END OF INTERESTING CODE */                   

                }
                function animate() {
                    requestAnimationFrame( animate );
                    renderer.render( scene, camera );
                }
            }
        </script>
    </head>
    <body>
    </body>
</html>

As a result, I just get a white screen (Tested in Firefox), so I seem to do something wrong.

So the question is: How do I correctly import such models including their colors into three.js?

I've previously imported models with textures and vertexcolors successfully, but models of this type don't seem to work.

Thank you so much for your help!

Update

Of course you can get the Model.blend file here: https://docs.google.com/open?id=0B82XARuHCQOKYjRjam5UQzdoUzA

WestLangley WestLangley · Accepted Answer · 2013-01-04T17:42:52

Try this:

loader.load("./spiderhead.js", function( geometry, materials ) {
    mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

Make sure materials is an array containing your two materials.

And make sure each face of your geometry has a materialIndex set to 0 or 1.

three.js r.54

Load Blender-Model with “Per-Face-Materials” in Three.js

1 Answers