Question

我正在尝试编写一个THREE.ShaderMaterial来渲染使用THREE.OBJMTLLoader加载的模型，但我不明白如何访问顶点/片段着色器中的顶点颜色。使用我的着色器时的结果（参见下面的代码）是纯白色模型（由于我猜的默认颜色值）。

不使用我的着色器时的结果是可以的，即使用正确的颜色渲染模型。

我设置了shaderMaterial.vertexColors = THREE.VertexColors;和child.material = shaderMaterial;对象中的所有孩子。

顶点着色器：

varying vec3 vecColor;
void main()
{
    vecColor = color;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片段着色器：

varying vec3 vecColor;
void main()
{
    gl_FragColor = vec4(vecColor, 1.0);
}

Answer 1

我终于意识到我实际上用自己的材料替换了OBJMTLLoader生成的材料。我找到的解决方案是从原始child.material中提取信息并将其插入到我的着色器的实例中，并在地图中进行组织：

var materialMap = {};
object.traverse( function ( child ) {
    if ( child instanceof THREE.Mesh ) {
        if (child.material.id in materialMap) {
            console.log("Using predefined material");
            child.material = materialMap[child.material.id];
        }
        else {
            console.log("Creating new material");
            materialMap[child.material.id] =  new THREE.ShaderMaterial({
                uniforms: { 
                    bumpMap: { type: "t", value: texture }, 
                    color: { type: "v3", value: new THREE.Vector3( child.material.color.r, child.material.color.g, child.material.color.b ) } 
                },
                vertexShader:   vShader,
                fragmentShader: fShader
            });
            child.material = materialMap[child.material.id];
        }
    }
});

如何使用THREE.OBJMTLLoader访问THREE.ShaderMaterial中的颜色

1 个答案: