For more information, you can visit the original post here. The task at hand seems to be quite complex due to the lack of documentation and examples on this specific topic on the three.js website.
Currently, I am able to render the correct image and, with the generous help of @Mugen87, I have managed to make it cast shadows. However, it is still unable to receive shadows.
Below is the latest code snippet from the link provided above for better visibility:
var mat = new THREE.ShaderMaterial({
uniforms: THREE.UniformsUtils.merge([
THREE.UniformsLib.fog,
THREE.UniformsLib.lights,
THREE.UniformsLib.shadowmap,
{
mapMain: {value: null},
mapGlow: {value: null}
}
]),
vertexShader: [
// Vertex shader code here
].join("\n"),
fragmentShader: [
// Fragment shader code here
].join("\n")
});
And here is the error message:
three.js:15911 Uncaught TypeError: Cannot read property 'direction' of undefined
at StructuredUniform.setValue (three.js:15911)
at StructuredUniform.setValue (three.js:15911)
at Function.WebGLUniforms.upload (three.js:16039)
at setProgram (three.js:23023)
at WebGLRenderer.renderBufferDirect (three.js:21797)
at renderObject (three.js:22556)
at renderObjects (three.js:22526)
at WebGLRenderer.render (three.js:22288)
at GameModel.update (main.js:1632)
at render (main.js:2555)