在Three.js中使用「Per-Face-Materials」加載Blender-Model

我創建了一個簡單的攪拌器模型。這只是一個對象。然後，我創建了兩種不同顏色的材料，並用第一種材料爲對象的一些面着色，另一面使用第二種材料着色。在Three.js中使用「Per-Face-Materials」加載Blender-Model

然後，我使用提供的Three.js-Export-Plugin導出模型，並檢查了浮雕：頂點，面，法線，骨骼，蒙皮，UV，顏色，材質，翻轉和所有網格。

然後我嘗試使用下面的代碼來導入生成的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

來源

2013-01-04 Van Coding

試試這個：

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

確保materials是包含您的兩種材料的陣列。

，並確保您的幾何形狀的每個面有materialIndex設置爲0或1。

three.js所r.54

來源

2013-01-04 17:42:52 WestLangley

這個作品！非常感謝你！ –

您是否必須在導入後編輯幾何體'materialIndex'，還是隻是工作？ – WestLangley

它只是工作。但還有一件事：仍然有邊界線可見（我可以看到電線），我怎樣才能將它們剔除？啊！找到了。它是'material.overdraw = true' –

在Three.js中使用「Per-Face-Materials」加載Blender-Model

回答

相關問題