Activate lighting in Three.js with a simple click

I successfully loaded a sphere mesh with Lambert material.

Now, I am trying to add a light source to the point where there is an intersection after clicking.

target = object that was clicked. to = vector3 of my click.

When the dblclick event listener is triggered, this code block executes:

var newLight = new THREE.PointLight( 0x808F8F,20 );
newLight.position.set(to.x,to.y,to.z);
scene.add( newLight );
newLight.updateMatrix();
newLight.updateMatrixWorld();
target.material.needsUpdate = true;

However, despite this code, the light source is only visible when another object is added to the scene, not on the targeted object that was clicked.

How can I force the recalculation of light sources on the target object?

Answer №1

I encountered a situation like this not too long ago, where I had to make sure all materials impacted by the lighting were updated. One method to achieve this is:

for(let j = 0; j < scene.children.length; j++){
    if(scene.children[j].material) {
        scene.children[j].material.needsUpdate = true;
    }
}

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

Welcome to the launch of OpenWeatherMap!

I just signed up for an account on the OpenWeatherMap website. My goal is to retrieve the current weather information for a specific location using the City ID API Call: http://api.openweathermap.org/data/2.5/weather?id=2172797&appid=myAPIKey How ca ...

Switching the cursor to the following input after a paste event using JQuery

I am currently working on an HTML form that consists of multiple input boxes. I'm looking to focus on the next input box after pasting content into one of them. Below is the code snippet I have been using: $("input").bind('paste', function( ...

Vue.js template is failing to properly render hyperlinks, although basic string output is functioning as expected

Whenever I print attrib.link, everything works perfectly fine, <div v-for="attrib in attributes"> {{ attrib.link }} </div> However, when I try: <div v-for="attrib in attributes"> <a target='_blank' href={{ attrib.link } ...

My data is not appearing with ng-repeat or ng-bind

One issue I am encountering is that my ng-repeat / ng-bind is not displaying the data within $scope.articles, even though I am getting the expected data in the console. To help identify the problem more easily, I have created a code snippet below: var A ...

Retrieve identical values from an array and display them using Vue.js

I am working with a product array that includes id, name, and category data for 5 products. For example, let's say there are 3 products assigned to the mobile category and 2 products assigned to the computer category. What is the best approach to rend ...

"Troubleshooting: Node.js encountering a path error while loading a JSON file with

I am organizing a collection of folders and files structured like this: viz |_ app.js // node application |_ public |_ css |_ bubblemap.css |_ images |_ nuts |_ nuts0.json |_ script ...

Encountering NPM Abortion Issue in Node.js

I am a beginner in node.js and have successfully installed it. However, when I try to initialize npm, I encounter an error that causes it to abort. My system has high memory capacity with 32GB RAM and 1TB HD. Although the 'npm -v' command works ...

Troubleshooting Issue with Angular Property Binding for Image Dimensions

Currently, I am exploring property binding in Angular through an example. The idea is to use an image and bind its width, height, and src attributes using property binding. Surprisingly, even though there are no errors and the image renders successfully vi ...

Issue with jQuery 'on' event not triggering following 'load' event

I am facing an issue on a page where similar events occur but when new content is loaded halfway through, most of the jQuery functionalities stop working. The scenario involves answering questions in a 'game' format using AJAX calls. Once all que ...

JavaScript code is failing to render data properly within HTML documents

I am facing an issue while trying to display data extracted from JSON in HTML. Despite my efforts, the data is not showing up on the webpage. I am unsure about what might be causing this error. Any assistance in resolving this matter would be greatly appre ...

A method for expanding the menu upwards to make room for newly added items

Looking at the images below, I have a menu that needs new items added to it while maintaining the position of the lower-left corner. Essentially, each time an entry is added, the menu should expand upwards from "the upper-left corner" while keepi ...

The download attribute is not functioning properly on both Chrome and Edge browsers

I've been trying to use the download attribute, but it doesn't seem to be working. I have also attempted to use the target attribute to see if there are any issues with downloading from the server or from a web (https) source. Unfortunately, noth ...

Update Jquery Dialog's Button After Making an Ajax Request

I am facing an issue with my dialog window that contains some confirmation elements following a form submission: $('#newUserDialog').dialog({ autoOpen: false, width: 600, modal: true, resizable: false, cl ...

What steps can be taken to turn off specific warning rules for CSS mode in ACE editor?

Utilizing the Ace Editor (through Brace and React-Ace) is a key aspect of my project. In our implementation, we specify the editor's mode as "css" and integrate it into our webpage. While this setup functions correctly, we have observed that some of ...

Create a new Chart.js Chart by using the data retrieved from an AJAX request and encoded in JSON

I am currently working on drawing a chart using the chart.js library. The initial draw works perfectly fine, but I am facing issues when trying to redraw the doughnut chart with new data retrieved from an ajax call. My approach involves PHP and Codeignite ...

Is there a way to incorporate unique shapes into mxGraph?

What is the process for including custom shapes in mxgraph? Image Representation of Shapes Check out these BPM shapes ...

Steps to fix issues with Cross-Origin Read Blocking (CORB) preventing cross-origin responses and Cross Origin errors

var bodyFormData = new FormData(); bodyFormData.set("data", "C://Users//harshit.tDownloads\\weather.csv"); bodyFormData.set("type", "text-intent"); //axios.post("https://api.einstein.ai/v2/language/datasets/upload", axio ...

Using three.js to control the opacity and size of points

I have returned with question number two about points. My query this time revolves around changing the opacity from 0 to 1 and back within specific pixel distances from the emitter. var particleCount = 14, particles = new THREE.Geometry(), pMaterial = new ...

How to add 1 to the final element in a JavaScript

I'm currently working on a task that involves incrementing the last element in an array using pop() and push(). However, I'm facing an issue where the original values are being retained after I try to increment the popped array. The objective is ...

Include the clicked link into the text input area using Ajax or Jquery

Hey there, I'm just starting out with jquery and ajax so please be patient with me. Below is a snippet of my script that fetches branch names from the database asynchronously: $(document).ready(function () { $("#pickup").on('keyup' ...