3

シンプルなブレンダー モデルを作成しました。たった一つのオブジェクトです。次に、異なる色の 2 つのマテリアルを作成し、オブジェクトのいくつかの面を最初のマテリアルで色付けし、他の面を 2 番目のマテリアルで色付けしました。

次に、提供された 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

4

1 に答える 1

4

これを試して：

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

materialsが 2 つのマテリアルを含む配列であることを確認してください。

そして、ジオメトリの各面がmaterialIndex0 または 1 に設定されていることを確認してください。

three.js r.54

于 2013-01-04T17:42:52.890 に答える