javascript - 高效调用着色器颜色

Question

我是第一次在 Three.js 中使用着色器，除了更改 RGBA 之外，我无法调整一些必要的代码。例如，我不能将它放在 .html() 内方法。我想要应用 10 种不同的着色器颜色。

varying vec3 vNormal;
void main() {
  float intensity = pow( 0.4 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) ), 4.0 );
  gl_FragColor = vec4( 0, 0, 255, 1.0 ) * intensity; }
  //gl_FragColor = vec4( 0, 0, 255, 1.0 ) is the RGBA value
}

到目前为止，我无法对找到的那条线做任何事情，只能让它保持不变，这样它就能工作。我只能复制其脚本标签上的 ID，调整 RGBA 代码并将其引用到不同的 <script>元素。但我不想这样做十次。我的代码需要高效。

所需的全部代码都在 fiddle 内。您如何并且愿意更改该代码以便可以轻松调用着色器颜色？

Answer 1

您需要添加统一的颜色。
HERE你可以看到我在开始使用 Three.js 着色器时所做的第一个。
但基本上它就像......

HTML/着色器:

<script id="vertexShader" type="x-shader/x-vertex">
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 diffuse;
void main() {
  gl_FragColor = vec4(diffuse.x, diffuse.y, diffuse.z, 1.0);
}
</script>

在 JS 中创建着色器...

var uniforms = {
  diffuse: { type: "c", value: new THREE.Color(0xeeeeee) }
};
var vertexShader = document.getElementById('vertexShader').text;
var fragmentShader = document.getElementById('fragmentShader').text;
material = new THREE.ShaderMaterial({
  uniforms : uniforms,
  vertexShader : vertexShader,
  fragmentShader : fragmentShader,
});

要更改颜色，请更改uniforms.diffuse.value。

我的示例不包括您的 vNormal 和强度，但您明白了。
另外，我有 HTML 格式的着色器，但它们显然可能只是 javascript 变量/字符串。

检查this version of your fiddle

您可能会找到THIS我的其他有趣实验的页面。