2015-09-02 131 views
0

當我使用Three.js加載obj + mtl + jpg數據時,根據three.js文檔將對象的材質設置爲MeshLambertMaterial。如果我想將材質更改爲另一個材質,例如MeshBasicMaterial,我該怎麼做?應用MeshBasicMaterial與Three.js加載的obj + mtl

以下代碼從我的服務器加載obj + mtl + jpg並使用MeshLambertMaterial顯示數據。我嘗試使用以下代碼應用MeshBasicMaterial(註釋),但它失敗並顯示爲白色的對象。

<!DOCTYPE html> 
<html lang="ja"> 
<head><meta charset="UTF-8"></head> 
<script src="http://threejs.org/build/three.min.js"></script> 
<script src="http://threejs.org/examples/js/loaders/MTLLoader.js"></script> 
<script src="http://threejs.org/examples/js/loaders/OBJMTLLoader.js"></script> 
<body> 
<div id="canvas_frame"></div> 
    <script> 
    var canvasFrame, scene, renderer, camera; 
    canvasFrame = document.getElementById('canvas_frame'); 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    canvasFrame.appendChild(renderer.domElement); 
    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000); 
    camera.position.set(50,50,50); 
    camera.lookAt({x: 0, y: 0, z: 0}); 
    var ambient = new THREE.AmbientLight(0xFFFFFF); 
    scene.add(ambient); 

    function animate() { 
     renderer.render(scene, camera); 
     requestAnimationFrame(animate); 
    } 

    function loadObjMtl(objUrl, mtlUrl, url, x, y, z){ 
      var loader = new THREE.OBJMTLLoader(); 
      loader.crossOrigin = 'anonymous'; 
      loader.load(objUrl, mtlUrl, 
       function (object) { 
       object.url = url; 
       object.position.set(x,y,z); 

      object.traverse(function(node) { 
       if(node.material) { 
        ////This doesn't work. How can I apply material for loaded obj? 
        //var material = new THREE.MeshBasicMaterial(); 
        //if (node instanceof THREE.Mesh) { 
        // node.material = material; 
        //} 
       } 
      }); 





       scene.add (object); 
      }); 
    } 

    objUrl = "http://test2.psychic-vr-lab.com/temp/mesh_reduced.obj"; 
    mtlUrl = "http://test2.psychic-vr-lab.com/temp/mesh_reduced.mtl"; 
    loadObjMtl(objUrl,mtlUrl,"",0,0,0); 

    animate(); 
    </script> 

    </body> 
</html> 

回答

0

你看,它完全白色的,因爲你沒有指定任何顏色MeshBasicMaterial

試試這個:

var material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 

你會看到所有紅:這是工作。

我認爲你可能想區分不同的網格,或應用任何紋理,你呢?

+0

我可能會誤解。我想要做的是塗抹不受陰影或不受光線影響的材料。我應該使用什麼材料? – Masa

+0

MeshBasic是正確的:實際上它不受光線的影響,這就是爲什麼你只能看到原始的平面顏色(在你的情況下默認爲白色) – pietro909

+0

這段代碼將紋理應用到帶有MeshBasicMaterial的模型。但是你知道如何使用MeshBasicMaterial加載mtl嗎? var material = new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('http://test2.psychic-vr-lab.com/temp/tex_0.jpg')}); – Masa

相關問題