2
$\begingroup$

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()
$\endgroup$

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.