使用Three.js加载具有“面材料”的Blender模型

Question

使用Three.js加载具有“面材料”的Blender模型

3

我创建了一个简单的blender模型，只有一个对象。然后我创建了两种不同颜色的材质，并用第一种材质给一些面着色，用第二种材质给其他面着色。

接下来，我使用提供的Three.js-Export-Plugin导出了模型，并检查了以下内容：顶点，面，法线，骨骼，皮肤，UV，颜色，材质，FlipYZ和所有网格。

然后，我尝试使用以下代码导入生成的JS模型：

<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

- Van Coding

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WestLangley · Accepted Answer

试试这个：

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

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

并且确保您几何体的每个面都设置了materialIndex为0或1。

three.js r.54