Guide on integrating a HemisphereLight into a basic Three.js environment

Question

Guide on integrating a HemisphereLight into a basic Three.js environment

I've been experimenting with adding light to a simple scene in threejs, but no matter what intensity or color I set for the light, there is no visible change. Strangely, even when I exclude the light code altogether, nothing happens either. Why is HemisphereLight not functioning as expected in this scenario?

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

javascript graphics three.js scene

Answer 1

Answer №1

What version of Three.JS are you currently using?

I put together a JSFiddle incorporating your code, utilizing only Javascript and Three.js version 105, and everything functioned properly. However, when I switched to Three.JS version r54, the code stopped working as expected.

I apologize for presenting my question in this format, as I am unable to leave comments at the moment. Please let me know if it is an issue, and I will promptly remove it.

You can determine the version you are using by executing the following line of code:

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 the code above belongs within one HTML file.

Answer 2

What version of Three.JS are you currently using?

I put together a JSFiddle incorporating your code, utilizing only Javascript and Three.js version 105, and everything functioned properly. However, when I switched to Three.JS version r54, the code stopped working as expected.

I apologize for presenting my question in this format, as I am unable to leave comments at the moment. Please let me know if it is an issue, and I will promptly remove it.

You can determine the version you are using by executing the following line of code:

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 the code above belongs within one HTML file.

Guide on integrating a HemisphereLight into a basic Three.js environment

Answer №1

Similar questions

Saving a pointer to "this" for usage in a named function callback through the prototype pattern in JavaScript

The output varies with each reload even though the function remains constant

Employing switch statements to match regular expressions in JavaScript

Prevent any pop-up windows from appearing when a specific link is clicked

Struggling with integrating HTML Canvas within Vue.js

Unable to run the method in the parent component from the child component

Error: Attempting to modify a constant value for property 'amount' within object '#<Object>'

Tips for sending an array of "FormData" through ajax and retrieving it in a Laravel controller

The functionality of JQuery's `.on("click"... is sporadically functioning

What is the method to retrieve results using 'return' from NeDB in vue.js?

I require the use of Nodejs with the gm module to process images, but it is essential that it

Retrieving JSON information and refreshing the display

Accessing Private Files with Signed URLs from AWS S3

Importing a form input as a constant in an API endpoint script

How to effectively implement addEventListener() / attachEvent()?

What is the best way to display or conceal buttons when the textarea is in focus or out of focus, while still allowing them

I am encountering an issue with the dropdown navigation menu in bootstrap

The response from the node is not accurate

Disable menu bar | customize menu bar in electronJS

What is the most effective way to retrieve 'this' within an object method that is being used as a callback function?