Question

我创建了一个简单的搅拌机模型。这只是一个对象。然后，我创建了两种不同颜色的材质，并使用第一种材质为对象的某些面着色，而使用第二种材质对其他面进行着色。

然后我使用提供的Three.js-Export-Plugin导出模型并检查浮动：顶点，面，法线，骨骼，蒙皮，UV，颜色，材质，FlipYZ和所有网格。

然后我尝试使用以下代码导入生成的JS-Model：

<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>

结果，我只得到一个白色的屏幕（在Firefox中测试过），所以我似乎做错了。

所以问题是：我如何正确地将这些模型（包括颜色）导入three.js？

我之前已经成功导入了纹理和顶点颜色的模型，但这种模型似乎不起作用。

非常感谢你的帮助！

更新

当然，您可以在此处获取Model.blend文件：https://docs.google.com/open?id=0B82XARuHCQOKYjRjam5UQzdoUzA

Answer 1

试试这个：

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

确保materials是包含两种材料的数组。

确保几何体的每个面都有materialIndex设置为0或1。

three.js r.54

在Three.js中使用“Per-Face-Materials”加载Blender-Model

1 个答案: