使用 Three.js 将 MeshBasicMaterial 应用于加载的 obj+mtl答案

【问题标题】：Apply MeshBasicMaterial to loaded obj+mtl with Three.js使用 Three.js 将 MeshBasicMaterial 应用于加载的 obj+mtl
【发布时间】：2015-09-02 11:15:12
【问题描述】：

当我用 Three.js 加载 obj+mtl+jpg 数据时，根据 three.js 文档将对象的材质设置为 MeshLambertMaterial。如果我想将材质更改为另一种材质，例如 MeshBasicMaterial，我该怎么做？

以下代码从我的服务器加载 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>

【问题讨论】：

标签： three.js

【解决方案1】：

您看到它完全是白色的，因为您没有为 MeshBasicMaterial 指定任何颜色。

试试这个：

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

你会看到所有的红色：它正在工作。

我认为您可能想要区分不同的网格，或者应用任何纹理，是吗？

【讨论】：

我可能误会了。我想要做的是应用不受阴影或不受光影响的材料。我应该使用什么材料？
MeshBasic 是正确的：实际上它不受光线影响，这就是为什么您只看到原始平面颜色（在您的情况下默认颜色：白色）
此代码使用 MeshBasicMaterial 将纹理应用于模型。但是你知道如何用 MeshBasicMaterial 加载 mtl 吗？ var material = new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('test2.psychic-vr-lab.com/temp/tex_0.jpg')});
从今天开始，您可能应该拦截 OBJ 解析（编写或修改导入程序），据我所知，您只能在加载场景后修改或替换材料。
我找到了这个地方！ MTLLoader.js 369: //this.materials[materialName] = new THREE.MeshPhongMaterial(params); this.materials[materialName] = new THREE.MeshBasicMaterial(params);