使用Three.js将MeshBasicMaterial应用于加载的obj+mtl
当我用Three.js加载obj+mtl+jpg数据时,根据Three.js文档,对象的材质设置为MeshLambertMaterial。如果我想将材质更改为另一种材质,如MeshBasicMaterial,我如何才能做到这一点 下面的代码从我的服务器加载obj+mtl+jpg,并使用MeshLambertMaterial显示数据。我尝试应用MeshBasicMaterial,并对以下代码进行了注释,但失败了,对象显示为白色使用Three.js将MeshBasicMaterial应用于加载的obj+mtl,three.js,Three.js,当我用Three.js加载obj+mtl+jpg数据时,根据Three.js文档,对象的材质设置为MeshLambertMaterial。如果我想将材质更改为另一种材质,如MeshBasicMaterial,我如何才能做到这一点 下面的代码从我的服务器加载obj+mtl+jpg,并使用MeshLambertMaterial显示数据。我尝试应用MeshBasicMaterial,并对以下代码进行了注释,但失败了,对象显示为白色 <!DOCTYPE html> <html lang
<!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>
因为没有为MeshBasicMaterial指定任何颜色,所以可以看到它完全为白色 试试这个:
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
你会看到所有的红色:它正在工作
我认为您可能想要区分不同的网格,或者应用任何纹理,是吗?我可能误解了。我想做的是应用不受阴影影响或不受光线影响的材质。我应该使用什么材质?MeshBasic是正确的:实际上它不受光线的影响,这就是为什么在您的情况下只看到原始的平面颜色默认的颜色:白色此代码使用MeshBasicMaterial对模型应用纹理。但您知道如何使用MeshBasicMaterial加载mtl吗?var material=new THREE.MeshBasicMaterial{map:THREE.ImageUtils.loadTexture'};到今天为止,您可能应该拦截OBJ解析写入或修改导入器,据我所知,只有在加载场景后,您才能修改或替换材质。我找到了位置!MTLLoader.js 369://this.materials[materialName]=新的THREE.MeshPhongMaterial参数;this.materials[materialName]=新的3.mesh基本材质参数;