I've been attempting to incorporate a texture into this shader, but it's displaying as black. I suspect there's a small detail I'm overlooking, despite my search yielding no relevant information for ThreeJS version r160. The shader code currently remains default, although I intend to personalize it.
Using a diffuse color yields the desired outcome. You can view the page at mfzcreations.com/HRD
Edit: Upon testing the material on a basic box mesh, the result mirrors what is seen on the field mesh.
Here's the JS code:
let dirtTexture = new THREE.TextureLoader().load("textures/fieldDirtTexture.jpg");
let standard = THREE.ShaderLib['standard'];
let dirtMaterial = new THREE.ShaderMaterial({
lights: true,
uniforms: THREE.UniformsUtils.clone( standard.uniforms ),
defines: {
PHYSICAL: true
},
vertexShader: document.getElementById( 'dirtVS' ).textContent,
fragmentShader: document.getElementById( 'dirtFS' ).textContent
});
dirtMaterial.map = dirtTexture;
// dirtMaterial.uniforms.diffuse.value = new THREE.Color( 0x91773d );
dirtMaterial.uniforms.roughness.value = 1.0;
dirtMaterial.uniforms.metalness.value = 0.0;
dirtMaterial.uniforms.ior.value = 0.0;
This is the shader code:
<script id="dirtVS" type="GLSL">
#define STANDARD
varying vec3 vViewPosition;
#ifdef USE_TRANSMISSION
varying vec3 vWorldPosition;
#endif
// Remaining shader code omitted for brevity
</script>
<script id="dirtFS" type="GLSL">
// Shader code continued from above...
</script>