The PointLight fails to cast any illumination

UPDATE: Now I have two simple examples using MeshBasicMaterial and MeshLambertMaterial:

PointLight_MeshBasicMaterial.html

PointLight_MeshLambertMaterial.html

both utilize PointLight but the LambertMaterial geometry isn't fully illuminated (although there are small blinking dots on the screen?).


I created a geometry using MeshBasicMaterial. Strangely, it seems to illuminate itself.

In addition, I added a PointLight:

light = new THREE.PointLight( 0xaaaaaa );
light.position.set = new THREE.Vector3(-400, 0, 0);
makeScene.scene.add( light );

However, the light has no effect on the scene. I want only the PointLight to illuminate the scene.

I experimented with other materials for my geometry like MeshPhongMaterial, MeshNormalMaterial, MeshLambertMaterial, and MeshFaceMaterial.

Here is how I applied the MeshBasicMaterial:

material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh(aGeometry, material);

I suspect there might be an issue with my PointLight. How can I confirm that the PointLight is correctly affecting the scene?

Answer №1

THREE.MeshBasicMaterial() does not react to light sources. Consider using THREE.MeshLambertMaterial() or THREE.MeshPhongMaterial().

UPDATE:

Furthermore, when using THREE.PointLight() with THREE.MeshBasicMaterial(), it will not have any impact based on the documentation found at http://threejs.org/docs/#Reference/Lights/PointLight.

Regarding the usage of PointLight() in conjunction with MeshLambertMaterial(), there seems to be an error in your code: The following lines

light1.position.set = new THREE.Vector3(0, -120, 150);
light2.position.set = new THREE.Vector3(0,  120, 150);

should actually be

light1.position.set (0, -120, 150);
light2.position.set (0,  120, 150);

Answer №2

MeshBasicMaterial does not react to light sources, consider using a different material type as advised by gaitat.

I frequently encounter situations where the lighting is insufficient or positioned too distantly from the object I wish to highlight. Perhaps you are experiencing this issue as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating dynamic properties in JavaScript based on another object is a powerful way to manipulate data

In my current scenario, I am faced with the task of creating a new object named result based on an existing object called source. This new object must contain all properties from source, and also include additional "methods" named after the properties to ...

Transferring data between two HTML files through the POST method

Is there a way to pass two values (parameters) from one HTML page to another without displaying them in the URL, similar to using the POST method? How can I retrieve these values on the second HTML page using JavaScript, AJAX, or jQuery? For example: cli ...

Exploring the world of Django and JSON POSTs in the realm of Google API mania

Project Overview I am currently developing an application aimed at assisting users in finding rides. My tech stack includes Django, Python 2.7, and integration with Google Maps and Directions APIs. Within a specific view, I present a map where users can ...

Audio playback system in Node.js

I'm looking to create a seamless playlist of mp3 files that play one after the other. While it may seem straightforward, I'm facing challenges keeping the decoder and speaker channel open to stream new mp3 data in once a song finishes playing. Be ...

Removing exclamation points from the routing of a state URL is a key aspect of mastering full stack development

Is there a way to remove exclamation marks from the url in state routing using mean.io? Currently, my url looks like http://localhost:3000/#!/auth/register I just want to get rid of the "!" marks after the "#" symbol. Is it possible? Here is the content ...

Looking to Add Dynamic Website Embed Link?

When a user arrives at the website and the Current Top URL is "https://website.com/?code=https://webbbb.com", I need to dynamically set the iframe URL to "https://webbbb.com" for embedding purposes. This way, I can automatically link my complete other web ...

Extracting JSON data from a string using jQuery

http://localhost/project1/index.php //AJAX region $(function(){ $.ajax({ type : 'GET', url : 'https://jsonplaceholder.typicode.com/posts/1', success : function(data){ console.log('success \n', data); }, error ...

What steps are involved in sending a POST request from a web browser?

I am currently developing a Java server that needs to handle requests sent from a browser. However, I am encountering an issue where the browser is only sending an OPTIONS request instead of the POST request that I need. The error message in the browser is ...

Why did my datatable append HTML only to get suddenly refreshed?

Having trouble figuring out why my code isn't working as expected. I believe the logic is correct, but for some reason the custom HTML doesn't persist after the second click. The goal is to display my custom HTML after a new tr element is added. ...

Is it possible to receive an Infinite value from the Vector.project() function in Three.js

Could someone please explain why I am getting {x:Infinity, y:-Infinity, z:-Infinity} as my position values {x:0.50516157, y:-0.62950189, z:0} when attempting to project my position vector onto the camera? I have come across a similar issue on Stack Overf ...

Comparing dates for equality in Sequelize - a comprehensive guide

Can someone help me with comparing equality between two dates in my code? I have attempted the following but it does not seem to work: const result: SomeModel= SomeModel.findOne( {where: { startTime : { [ ...

Is there a way to update the parameter name in an array.map function?

I'm a little unsure. Is there a way to dynamically change the marker parameter to marker1, marker2, marker3, and so on depending on the number of elements in the map? Currently, I have this code but I would like each element in the map to have a mark ...

Handling redirection on a single-page website without javascript functionality turned on

Currently, I am in the process of creating a single-page website using html, css, javascript, and php. My aim is to use jQuery for navigating through the website - allowing the content to fade out when a user clicks on a link in the navigation menu and hav ...

The DoubleSided material in Three.js fails to create shadows on both sides of planar parametric geometry

Take a look at this fiddle: http://jsfiddle.net/blwoodley/5Tr4D/1/ In my scenario, I have a blue spotlight shining on a rotating square, creating a shadow on the ground below. However, the shadow is only being cast on one side of the square. I came acros ...

Removing an article from a Vue.js localStorage array using its index position

I am facing an issue while trying to remove an item from localStorage. I have created a table to store all the added items, and I would like to delete a specific article either by its index or ideally by its unique id. Your assistance is greatly apprecia ...

Navigate a camera within a glTF model exported from Blender using Three.js

In my current project, I am collaborating with a game developer who has utilized Blender to implement all aspects of the boardgame. He has successfully integrated sprites within Blender and connected them to the camera in such a way that they always face t ...

If I click on the datalist link option during an ajax append, I would like to be redirected

When I try to link after clicking an option in the appended AJAX, it does not seem to work as expected: More details: $('#input-friends').on('input', function () { var id = $('#input-friends').val(); $.ajax({ ...

GLTF file: Error 404 - File could not be located

Working on loading a GLTF file and encountering a specific error: https://i.sstatic.net/EbovJ.png Curious as to why the file cannot be located and opened. Is it necessary to establish a local server for this process? After reviewing other examples online ...

Retrieving deeply nested objects within an array of objects in MongoDB

Here is the structure of my database: [ { "title": "man", "articlesType": [ { "title": "shoes", "articles": [ { ...

Unlocking the Potential of Checkbox Values in AngularJS

I am attempting to extract data from a $rootScope object that has been linked to the checkboxes. HTML: <tr ng-repeat="system_history in SystemHistoryResponse.system_history"> <td><input type="checkbox" ng-model="versionValues[system_histor ...