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>
我可能會誤解。我想要做的是塗抹不受陰影或不受光線影響的材料。我應該使用什麼材料? – Masa
MeshBasic是正確的:實際上它不受光線的影響,這就是爲什麼你只能看到原始的平面顏色(在你的情況下默認爲白色) – pietro909
這段代碼將紋理應用到帶有MeshBasicMaterial的模型。但是你知道如何使用MeshBasicMaterial加載mtl嗎? var material = new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('http://test2.psychic-vr-lab.com/temp/tex_0.jpg')}); – Masa