"Directional Light in three.js that Tracks Alongside the Camera

I'm encountering an issue with Three.js and lighting that follows a camera.

I am utilizing orbit control for mouse movement.

In release 66, the following code used to function properly:

    light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position = camera.position;
    scene.add(light);

However, in releases 67 and 68, the lighting no longer tracks the camera. Instead, the light only illuminates one side.

Answer №1

Utilizing the information provided above, I was able to successfully implement the solution.

controls = new THREE.OrbitControls(camera);
controls.addEventListener( 'change', light_update );

function light_update()
{
    light.position.copy( camera.position );
}

Appreciate the assistance.

Answer №2

In r68, some of the Object3D properties have become immutable, making direct copying to .position ineffective. To address this issue, utilize the appropriate methods for manipulating these properties:

light.position.copy( camera.position );

While I haven't personally tested these lights, the documentation suggests that they do not automatically track anything. Additionally, their position is insignificant as they behave as if they are at an infinite distance; only the rotation holds significance.

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

How to trigger a horizontal scroll on load for a specific ID in HTMLDivElement

Looking for advice on how to make one of the horizontally scrolling DIV containers on a site scroll to a specific position onLoad. The challenge is that this particular container is located far down the page vertically, and we want it to scroll horizontall ...

Send JSON data using jQuery and process it in Node.js

Looking for guidance on how to send json form data from JavaScript by clicking the submit button and then receiving that json data on a Node.js server. My attempts so far have only resulted in printing '{} ' on the Node.js server terminal Below ...

How to prevent page refresh when hitting enter in jQuery form?

Currently, my form does not refresh the page when I click the button to submit it. However, if I press Enter while a text input is selected, the page will refresh. Is there a way to make pressing Enter on the text input perform the same action as clicking ...

Ways to postpone a for loop in Jquery

Currently, I am working on creating an image gallery using a for loop to load all the images. However, I am facing an issue where the loop is running too fast, and I would like to add a delay after each iteration. I attempted to use a timeout function, bu ...

How to resolve: Preventing Ajax - Post request from executing repetitively

I am facing an issue with a table that is formatted using the Datatables script. There is a column in the table which contains icons for actions. When a user clicks on an icon, a modal is loaded and its content is fetched using the POST method. The modal ...

jScrollPane malfunctioning with Bootstrap 3's dropdown menu

I'm attempting to add a vertical scrollbar to a Bootstrap dropdown. Below is the HTML code I'm working with: <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle btn_drop_down" data-toggle="dropdown"> ...

The carousel spun around, each section moving to the side on its own

One issue I'm facing is that on my page, I have multiple carousel rows. However, when I click on the "next" or "prev" button to navigate through the items in the carousel, it affects all carousels instead of just the one I clicked on. I've attem ...

What is the best way to eliminate excess elements from overflow:hidden?

Whenever I click on a modal, it changes my body to overflow:hidden. As a result, the scrollbar disappears and my page becomes unscrollable. Once I close the modal, my body reverts back to overflow:auto allowing the page to scroll again. These functionaliti ...

Steps to retrieve hexadecimal addresses sequentially

Can anyone recommend a module or script that can generate sequential 64-bit hex addresses like the following: 0000000000000000000000000000000000000000000000000000000000000000 0000000000000000000000000000000000000000000000000000000000000001 00000000000 ...

dimming of dojo dijit.Dialog

I've been encountering issues with "undimming" a Dojo Dijit dialog. Even though I am using the appropriate calls, there are instances where parts of the page remain dimmed. I can still scroll through the windows and access the undimmed sections. Is th ...

What is the best way to update an existing cookie value using angularjs?

Currently, I am working with AngularJS. When a button is clicked, I am setting a cookie and it works perfectly fine. However, when the page is refreshed and another button click occurs, a new value is stored in the array while the old cookie value becomes ...

Halt execution of routes using backbone.js

Is it feasible to halt route execution within backbone.js solely using the router? I understand there is a callback function for each route where I could verify if routing is permitted, but I am unsure how to prevent execution based on a property (such as ...

Retrieving the value of the selected item when it is changed

I am currently using v-select/v-autocomplete in my project: <v-autocomplete v-modal="newRole" :items="roles" label="--Change role--" required return-object item-value="id" item-text=&qu ...

Is it feasible to showcase collections from MongoDB and every individual element from all collections on a single EJS page?

I am currently working on developing a forum for my website using NodeJs, Express, MongoDB, and EJS for HTML rendering. However, I encountered an error message saying: "cannot set headers after they are sent to the client." I am a bit confused about this i ...

Is the DOMContentLoaded event connected to the creation of the DOM tree or the rendering tree?

After profiling my app, I noticed that the event is triggered after 1.5 seconds, but the first pixels appear on the screen much later. It seems like the event may only relate to DOM tree construction. However, this tutorial has left me feeling slightly con ...

Creating a HMAC-SHA-256 signature in JavaScript for datatrans: A step-by-step guide

I'm currently working on an Angular project that involves implementing the Datatrans payment system. Unfortunately, I have been facing difficulties in generating a sign for the payment. I have been following the process outlined in this link (enter l ...

Having trouble adding/removing/toggling an element class within a Vue directive?

A successful demonstration can be found at: https://jsfiddle.net/hxyv40ra However, when attempting to incorporate this code within a Vue directive, the button event triggers and the console indicates that the class is removed, yet there is no visual chang ...

Creating a thumbnail with a close button using an image

My code is available at the following link: https://codepen.io/manuchadha/pen/PBKYBJ In this form I have created, I am trying to implement an image upload feature using a file input. The goal is to display a thumbnail of the selected image below the file ...

The Clash of Form Action and JavaScript

Can someone help me with this issue? I have a form and a script to trigger an alert message. The code I'm using is working well: <input id="autocomplete" class="input_message" type="text" name="message" autocomplete="off" placeholder="...typ ...

The date entered in the input field should also appear in all other textboxes on the

I currently have 2 tables set up on my page. In the first table, there is a textbox (txt1) that includes a date picker. The second table contains 5 similar textboxes (txt2, txt3, txt4, txt5, txt6) also with date pickers. My requirement is as follows: Ini ...