I'm trying to add light and see its changes in a simple scene in threejs but no matter the intensity or the color I set for the light, I see no change in a scene. Actually, if I don't include the light code, nothing changes as well, so why is HemisphereLight not working in my case?
import * as THREE from 'three';
import { OrbitControls } from './Assets/scripts/three.js/examples/jsm/controls/OrbitControls.js';
var clock = new THREE.Clock()
function main() {
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
console.log(window.innerHeight, window.innerWidth)
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);
console.log(planeG.parameters)
var planeM = new THREE.ShaderMaterial({
uniforms: {
uTime: {
type:"f",
value:0.0,
},
uRes: {
type:"f",
value:new THREE.Vector2(window.innerWidth, window.innerHeight),
}
},
// wireframe:true,
vertexShader:vShader,
fragmentShader:fShader,
side:THREE.DoubleSide,
});
var plane = new THREE.Mesh( planeG, planeM );
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 20000);
var controls = new OrbitControls(camera, renderer.domElement)
scene.add(light);
console.log(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 );
controls.update(clock.getDelta())
plane.material.uniforms.uTime.value = time/100;
renderer.render(scene, camera);
};
console.log(THREE.REVISION)
render();
};
main()