I am facing an issue where I am trying to light an object that has been created with ShaderMaterial using HemisphereLight, but the object does not appear to be affected by any of the lights. I have tested it with various other lights as well, and none seem to be affecting the object. What settings do I need to adjust in order for the object to be influenced by the lights?
<script src="https://threejs.org/build/three.js"></script>
<script type="module">
var clock = new THREE.Clock()
function main() {
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 200, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var vShader = `
precision mediump float;
uniform float uTime;
void main() {
float z = 0.1*cos(uTime) * cos(position.y*40. - uTime) * position.y*sin(log(position.y))*0.5 + 0.5;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, position.y, z, 1.0);
}
`
var fShader = `
precision mediump float;
uniform vec2 uRes;
void main() {
vec2 uv = 1.5*gl_FragCoord.xy/uRes;
gl_FragColor = vec4(uv.x, uv.y, 0.0, 1.0);
}
// `
var planeG = new THREE.PlaneGeometry(25, 60, 20, 20);
var planeM = new THREE.ShaderMaterial({
uniforms: {
//ambientLightColor: 0xffffff,
uTime: {
type:"f",
value:0.0,
},
uRes: {
type:"f",
value:new THREE.Vector2(window.innerWidth, window.innerHeight),
}
},
// wireframe:true,
//lights:true,
vertexShader:vShader,
fragmentShader:fShader,
side:THREE.DoubleSide,
});
var plane = new THREE.Mesh( planeG, planeM );
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 2);
//var light = new THREE.AmbientLight(0xFFFFFF, 1.0)
scene.add(light);
scene.add(plane);
plane.rotateZ(Math.PI/2)
camera.position.z = 4;
scene.background = new THREE.Color(0xfffffff);
var render = function (time) {
requestAnimationFrame( render );
plane.material.uniforms.uTime.value = time/100;
renderer.render(scene, camera);
};
render();
};
main()
</script>