Search code examples
javascriptgraphicsthree.jsscene

How to add HemisphereLight to a simple threejs scene?


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. Actually, if I don't include the light code, nothing changes as well, so why is HemisphereLight not working in my case?

  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 planeGeometry = new THREE.PlaneGeometry(25, 60, 20, 20);

  var planeMaterial = new THREE.MeshBasicMaterial({color:"green"})

  var plane = new THREE.Mesh( planeGeometry, planeMaterial );
  var light = new THREE.HemisphereLight(0xffffff, 0x000000, 2);

  scene.add(light);
  scene.add(plane);

  plane.rotateZ(Math.PI/2)
  camera.position.z = 10;

  scene.background = new THREE.Color(0xffffff);

  var render = function (time) {
              requestAnimationFrame( render );   
       
            renderer.render(scene, camera);
        };

        render();

Solution

  • What version of Three.JS do you use?

    I made a JSFiddle with your code, using only Javascript and Three.js version 105 and everything worked, when I used Three.JS version r54, it indeed didn't work.

    Sorry that I ask this question like this, can't comment yet haha. I'll remove this if asked

    You can check what version you're using with:

    console.log(THREE. REVISION)
    

        <script src="https://threejs.org/build/three.js"></script> 
        <script type="module">
        console.log(THREE. REVISION)
    
            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 planeGeometry = new THREE.PlaneGeometry(25, 60, 20, 20);
    
            var planeMaterial = new THREE.MeshBasicMaterial({color:"green"})
    
            var plane = new THREE.Mesh( planeGeometry, planeMaterial );
            var light = new THREE.HemisphereLight(0xffffff, 0x000000, 2);
    
            scene.add(light);
            scene.add(plane);
    
            plane.rotateZ(Math.PI/2)
            camera.position.z = 10;
    
            scene.background = new THREE.Color(0xffff00);
    
            var render = function (time) {
                        requestAnimationFrame( render );   
                
                    renderer.render(scene, camera);
                };
                render();
        </script>

    All of this goes into 1 HTML File.