CODEWITHSUNDEEP
javascriptgraphicsthree.jsscene
Jonas
Jonas

Reputation: 113

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();

Upvotes: 1

Views: 862

Answers (1)

JulianDotExe
JulianDotExe

Reputation: 123

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.

Upvotes: 1

Related Questions