如何将着色器添加到从 OBJMTLLoader 加载的 THREE.Object3D答案

【问题标题】：How to add shader to THREE.Object3D loaded from OBJMTLLoader如何将着色器添加到从 OBJMTLLoader 加载的 THREE.Object3D
【发布时间】：2013-04-21 09:20:57
【问题描述】：

我有一个使用 THREE.OBJMTLLoader 加载的模型。

var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function(event) {
    var mesh = event.content;
    scene.add(mesh);
});
loader.load('model/machine.obj', 'model/machine.mtl');

我需要对这个模型应用一个顶点和片段着色器。如何做到这一点？

【问题讨论】：

标签： javascript three.js webgl shader

【解决方案1】：

您需要一个着色器材质来添加顶点和片段着色器。

            var material = new THREE.ShaderMaterial( {

                fragmentShader: shader.fragmentShader,
                vertexShader: shader.vertexShader,
                uniforms: shader.uniforms

            } ),

【讨论】：

我知道这一点。它适用于盒子或球体，但对于模型，event.content 没有材质，如果将着色器材质设置为它，仍然没有任何变化。

【解决方案2】：

除了 Gero3 的回答，这将确保内容中的所有网格都会获得正确的材质：

var material = new THREE.ShaderMaterial( {

    uniforms: shader.uniforms,
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader

} );

var object = event.content;
object.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh ) {

        child.material = material;

    }

} );
scene.add( object );

【讨论】：

有效！很高兴 THREE.js 的作者回答了这个问题！ =D
嗨@mrdoob 它说shader is not defined