Question

我正在创建一个自定义的three.js应用程序，我在其中加载了一个用于渲染的OBJ / MTL模型。我想将自定义着色器应用于加载的模型，但颜色和＆amp;我手动传递给RawShaderMaterial的镜面制服没有更新。或者更确切地说，它们都填充了相同的值。从而使我的模型呈现相同的颜色。

他是一些示例代码。如果有一个简单的解决方案或更好的方法，我会非常有兴趣知道。

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath(path);
mtlLoader.load(mtlName, function(materials) {
var objLoader = new THREE.OBJLoader();
materials.preload();


objLoader.setMaterials(materials);


objLoader.setPath(path);
objLoader.load(objName, function(object) {
    if (shader) {
        object.traverse(function (child) {
            if (child instanceof THREE.Mesh) {
                var customShader = shader;
                var color = child.material["color"];
                customShader.uniforms["color"] = {type: 'v3', value: color};
                customShader.uniforms["specular"] = {type: 'v3', value: child.material["specular"]};

                child.material = customShader; 
            }
       });
    }
}

顶点着色器：精密介质浮子; precision mediump int;

    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;

    attribute vec3 position;
    attribute vec3 normal;
    attribute vec2 uv;

    varying vec3 Normal;
    varying vec2 UV;

    void main() {
        Normal = normal;
        UV = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }

片段着色器：精密介质浮子; precision mediump int;

    uniform vec3 color;
    uniform vec3 specular;

    varying vec3 Normal;
    varying vec2 UV;

    void main() {
        gl_FragColor = vec4(color, 1.0);
    }

Answer 1

我发现了我的问题。

这只是因为我没有正确克隆我的ShaderMaterial。

object.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            var customShader = shader.clone();
            var color = child.material["color"];
            customShader.uniforms["color"] = {type: 'v3', value: color};
            customShader.uniforms["specular"] = {type: 'v3', value: child.material["specular"]};

            child.material = customShader; 
        }
   });

在自定义着色器

1 个答案: