Three.js 用于着色的制服答案

【问题标题】：Three.js uniforms for shadingThree.js 用于着色的制服
【发布时间】：2013-04-27 09:52:44
【问题描述】：

您好，我正在尝试使用threejs 进行看似简单的着色。我正在使用 O'reilly 的 Up and Running 书。

一切正常，直到我尝试这样做：

                var shader = THREE.ShaderLib["normal"];
            var uniforms = THREE.UniformsUtils.clone(shader.uniforms);

            uniforms["tNormal"].texture = normalMap;
            uniforms["tDiffuse"].texture = surfaceMap;
            uniforms["tSpecular"].texture = specularMap;

这一直抛出这个错误：

TypeError: uniforms.normal 未定义 [打破这个错误]

制服[“正常”].texture = normalMap;

我在网上搜索了一段时间，不确定需要更改什么语法来解决这个问题。

感谢任何帮助。

【问题讨论】：

shader.uniforms 没有“tNormal”属性。你想用这个着色器做什么？
我跟着这本书。我还有漫反射和镜面反射的其他线，它们也会引发类似的错误。

标签： javascript html three.js webgl

【解决方案1】：

我认为应该是这样的：

uniforms["tNormal"] = {
    texture: normalMap
};

tDiffuse、tSpecular 也一样。

【讨论】：

【解决方案2】：

我发现在运行您的代码时，在以下行之后：

var shader = THREE.ShaderLib["normal"];
var uniforms = THREE.UniformsUtils.clone(shader.uniforms);

制服是一个具有一个成员的对象：不透明度。因此 uniforms["tNormal"] 还不存在。正如 Olivia 建议的那样，您可以使用以下方法添加这些：

uniforms["tNormal"] = {
    texture: normalMap
};

【讨论】：

【解决方案3】：

您的错误和您的代码不同。错误报告未定义纹理：

uniforms["normal"].texture = normalMap;

你引用的代码说你正在使用：

uniforms["tNormal"].texture = normalMap;.

我正在编写相同的书籍示例，试试这个：

var shader = THREE.ShaderLib[ "normalmap" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

uniforms[ "tNormal" ].texture = normalMap;
uniforms[ "tDiffuse" ].texture = surfaceMap;
uniforms[ "tSpecular" ].texture = specularMap;

uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;

【讨论】：