Updating the light and OrbitControls in three.js

I am currently utilizing threejs to showcase an object and using OrbitControls to manage the movement of the scene with my mouse. Additionally, my scene features a DirectionalLight.

Initially, when the scene is rendered, the DirectionalLight illuminates my object as anticipated. However, upon making modifications to the scene by rotating it using my mouse, the DirectionalLight source fails to update and illuminate the object from the new angle as expected.

I am seeking guidance on how to update my scene so that the light adjusts based on my rotation using OrbitControls. Can someone provide assistance with this issue?

Answer №1

To keep the relationship between the direction of light and the camera's view consistent, my recommendation is to attach the light to the CAMERA rather than the SCENE.

Instead of doing something like scene.add(dirLight), try using camera.add(dirLight)

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

Prevent side-to-side scrolling on elements that exceed the width of the screen

I am working on building a navigation system similar to Google Play, where there are fixed tabs for browsing through the app. I have created a container div that holds various content sections. <div id="container"> <div class="section"> .. ...

Guide on making a personalized object in JavaScript

I am struggling with a piece of JavaScript code that looks like this: var myData=[]; $.getJSON( path_url , function(data){ var len = data.rows.length; for (var i = 0; i < len; i++){ var code = data.rows[i].codeid; var ...

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

Is it possible to integrate ng-repeat with ng-model in Angular?

Is it possible to link the ng-model of a button with the ng-repeat loop? <a ng-repeat="x in [1,2,3,4]" ng-model="myButton[x]">{{myButton[x]}}</a> In the Controller: var id = 4; $scope.myButton[id] = ' :( '; I am interested in crea ...

issues with search functionality in angular

Just diving into the world of angular and struggling with implementing a 'live search' functionality. I've stored my JSON data as a variable in a JavaScript file and successfully displayed it in the HTML. I also have a 'list' radio ...

JavaScript and AJAX are showing an error message that says: "ReferenceError: x is not

I am currently working on a jQuery function that retrieves the value from a PHP-generated checkbox and sends it through AJAX. The value being sent is always a single word consisting only of letters. Here is the script I have written: <script type="text ...

What is the best way to refresh data in a React component so that it displays the recently added data?

My website features a todo list that functions like this: Todo list Upon clicking the plus button, an input field appears allowing users to add items. Although the item is successfully added to the database, it does not immediately reflect on the webpage ...

Checking URL validity with regular expressions in Vue JS

Currently, I am attempting to validate URL strings utilizing a regular expression. The following regex is what I am using for this purpose: var regex = /^(http|https):\/\/+[\www\d]+\.[\w]+(\/[\w\d]+)?/ With thi ...

Transferring information via a TCP socket in Node.js from an HTML webpage

Hey there! I'm curious about net sockets in Node.js and would love some clarity: I've set up a simple server that echoes back received data. Here's the code: var net = require('net'); var HOST = '127.0.0.1'; var PORT = ...

javascript verify that the input is a valid JSON object

Seeking assistance with an if statement that checks for a json object: updateStudentData = function(addUpdateData) { var rowDataToSave; if(addUpdateData.data.row) { rowDataToSave = addUpdateData.data.row; } else { rowDataToSav ...

Incorporate tinyMCE into a colorbox module

Currently, I am facing an issue on my website where there are textareas with tinymce. While I can view all the textareas correctly, when trying to open colorbox within a textarea, it does not inherit the tinymce properties. The code snippet used to open co ...

The getJSON function is showing [object Object] instead of the expected values

Having trouble displaying JSON data in an HTML list? When trying to loop through the JSON file, you might encounter issues such as displaying [object Object]. Check out the script below for assistance: Here is the original JSON: [ { "us":"USA ...

A guide on understanding tab-formatted text in a textarea using JavaScript (Vuejs)

Trying to decipher a text that has been copied into a Word table, the formatting is very confusing. I am looking to extract the rows as objects in an array, with the columns serving as properties of each object. I would like to accomplish this using Vuejs ...

Leveraging configuration files in AngularJS

I'm working on an Angular application that communicates with a Node.js backend Express application. I am using a config file to store environment variables for my Node app. Here's how I access the config file in my Node app: index.js var port = ...

Navigating to a specific element following an AJAX request

Can't seem to get the page to scroll to a specific element after an ajax call. What could be causing this issue? index.php <style> #sectionOne { border: 1px solid red; height: 100%; width: 100%; } #sectionTwo { border: 1px solid blue; heigh ...

Creating a line of functions pool in Javascript with a delay feature

Recently, I created a code snippet that simulates a function line. It involves calling functions such as fn1, delay, fn2, delay, and so on. The idea is to call a function, remove it from the line, have a short sleep, and repeat. However, I've encount ...

Solution to bypass JavaScript PHP login system

Creating a login/register system with JavaScript to display specific divs for the system: 1st div = menu option to either log in or register 2nd div = shows login form or register form depending on what was clicked (login or register) 3rd div = displays ...

concealing the dropdown in React upon clicking outside of it

I have been delving into learning React by challenging myself with a React problem. The code challenge I'm facing involves trying to close a drop-down when clicking outside of it. Despite my efforts to debug, I haven't had much luck in solving th ...

What are the steps to determine if a radio has been examined through programming?

In my form page, users can input an ID to fetch profile data from a MySQL database using AJAX. The retrieved data is then displayed in the form for editing. One part of the form consists of radio buttons to select a year level (e.g., "1", "2", "3", etc). ...

When I delete the initial element from the array, the thumbnail image disappears

Using react-dropzone, I am attempting to implement image drag and drop functionality. The dropped image is stored in the React state within a files array. However, a problem arises when removing an image from the array causing the thumbnails of the remain ...