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页面。

有效地调用着色器颜色

1 个答案: