Adding a light source to the camera in Three.js since version 69: A step-by-step guide

After version r69, the use of this pattern is no longer supported (*) :

directionalLight.position = camera.position;

Attempting to resolve this issue, I followed this advice :

var pointLight = new THREE.PointLight( 0xffffff, 1, 100 ); 
camera.add( pointLight );

However, the light does not seem to function properly (remains black), and the same occurs with a DirectionalLight

Any ideas on what might be causing this issue?


Note : It's worth mentioning that if I try this approach, the light no longer follows the camera:

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( camera.position.x, camera.position.y, camera.position.z );
scene.add( directionalLight );

Thank you in advance

Answer №1

When attaching a light to the camera in your scene, ensure that you also include the camera itself in the scene structure. This will properly integrate the light within the scene graph.

var spotLight = new THREE.SpotLight( 0xff00ff ); 
camera.add( spotLight );
scene.add( camera );

version three.js r.71a

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

Sending template reference from one Angular component to another

I have a main grid component that includes smaller grid-item components. The majority of these grid items navigate to a specific route when clicked. However, there is one particular item that should open a modal window instead of navigating. Is there a wa ...

What is the best method for passing a JavaScript object to PHP using Ajax?

I have looked into similar questions like this and this, but none of them have helped me solve my issue. When I check the console log for my data, it displays the following: Object["row_LM#00000010", "row_LM#00000002", "row_LM#00000009", "row_LM#00000008" ...

Unable to create a post request using jQuery with a JSON payload

When using the Chrome REST service, I successfully make a post request to a specific URL by sending a JSON string in the body and setting the content type as application/json. However, when trying to achieve the same with jQuery, I encounter some issues. ...

Exploring the paths with node.js variable walking

Currently facing an issue with the npm package "walk". The problem lies in the fact that it requires a string to define the path, which poses difficulty as the path varies based on the directory to be searched. var walkers = walk.walk(""+animeDir+"", opti ...

Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...

Tips for updating iframe source without refreshing the iframe?

I am facing an issue with two frames where I need to copy the content from the first frame (myframe) to the second frame (myframe2) using JavaScript. The challenge is that when I set the "src" attribute for myframe2, it causes a reload of FrameSecond. Is ...

Guide to Repairing Uncaught TypeError: players.setAttribute is not a recognized method?

I'm a beginner and encountered an error saying Uncaught TypeError: players.setAttribute is not a function when submitting an action. How can I solve this issue? Please share your insights. ''' //selecting all necessary elements const s ...

Issue: React error message indicates that the .map() function is not recognized. The API response is in the form of an object, making

As a newcomer to REACT.JS, I am currently facing the challenge of extracting data from an API for my project. Utilizing "Axios" for sending the get request, I have encountered a situation where the response comes back as an array in one API and as an objec ...

Ways to verify that window.open is being invoked from a React component

In my React component, I have a set of nested components, each with its own checkbox. The state hook rulesToDownload starts as an empty array and dynamically adds or removes IDs based on checkbox selection. Upon clicking the 'download' button, t ...

Navigating Angular: Discovering Route Challenges in Less Than an Hour

Can someone take a look at my code and help me out? I'm trying to learn Angular.js by following the popular Angular.js in 60 minutes video tutorial, but it seems like things have been updated since then. I'm having trouble getting my routes to wo ...

What is the best method for rounding a decimal number to two decimal places?

Here is the JavaScript code I am using: $("input[name='AuthorizedAmount'], input[name='LessLaborToDate']").change(function () { var sum = parseFloat($("input[name='AuthorizedAmount']").val()).toFixed( ...

Content is missing from the response of the AngularJS $http request

Attempting to retrieve content from a website using Angular's $http service. The request seems to be successful as console.log(response.data) displays most of the content but is missing some parts. Check out my code below: $http = angular.element(doc ...

When I attempt to press the shift + tab keys together, Shiftkey is activated

Shiftkey occurs when attempting to press the shift + tab keys simultaneously $("#buttonZZ").on("keydown",function (eve) { if (eve.keyCode == 9 && eve.shiftKey) { eve.preventDefault(); $("#cancelbtn").focus(); } if (eve. ...

Inquiring about JavaScript's substring method in String.prototype

let vowels = "AEIOU"; let result = vowels.substring(0, 3); document.write(result); I'm puzzled as to why the output is AEI instead of AEIO. Is this due to the indexing starting from zero in programming languages? ...

Customize your webpage's style to reflect your unique identity with user

Is there a way to allow users to customize the style of a webpage? I know I need multiple CSS files, but how can I implement the code that enables this customization based on user preferences? ...

Jasmine spies falsely report the calling of functions when they have not actually been called

Below is the code snippet I am currently working with: $scope.deleteJob = function(job) { SandboxService.deleteJob(job.id).then(res => { if (res.status == 200) { ngToast.success(); $scope.refreshApps(); } ...

How can you determine the index of a table column in JavaScript when you only know its class name?

I am looking for a way to dynamically hide/show table columns based on their classes, without having to add classes to each individual <td> element. This should be accomplished using classes on the columns themselves. Here is a sample of the table ...

Direct the /username path to /[user]/[tab].js instead of [user]/index.js in Next.js

My goal is to develop a user profile page that displays content based on the current tab the user is viewing. The tab is determined by what is provided in the URL (e.g. /username/tab1). The challenge I am facing is that one of the tabs the user can access ...

Is your list rendering in Vue.js with AJAX ready to go?

At this moment, my Vue.js component is retrieving data from an Elasticsearch query and displaying it in a list like this: <li v-for="country in countries">{{ country.key }}</li> The issue I am facing is that I want to show users only a snippe ...

Ways to have a React Component trigger a function with each state update

Using this specific component, the getDisplay function is triggered on every update like normal. When the <div> element is clicked, it becomes hidden: class Example extends React.Component { constructor(props) { super(props); thi ...