"Utilizing Trackball controls, camera, and directional Light features in ThreeJS version r69

I am struggling to synchronize trackball controls and camera with the directional light.

Here is my situation: I start by initializing an empty scene with a camera, lights, and controls. Then, I load a bufferGeometry obj, calculate its centroid, and adjust the camera and controls position and target based on the object's centroid. To achieve this, I simply set the camera position and controls target like so:

camera.lookAt( position );
camera.position = position;
controls.target.copy( position );

The "position" mentioned here refers to a Three.Vector3 object.

It is crucial for the directional light to automatically sync with the controls.

In version threejs r66, I managed to do this successfully:

function init(){
...
directionalLight.position = controls.object.position;
directionalLight.target.position = controls.target;
...
}

Here, "controls" represents a THREE.TrackballControls object.

However, this approach no longer works in threejs r69. Any suggestions?

Thank you,

Simone


I found a solution by using a pointLight instead of a directionalLight.

Here is how I implemented it:

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

Thanks to everyone for their assistance!

Answer №1

With credit to the brilliant mind of WestLangley, we have arrived at our solution:

let spotLight = new THREE.SpotLight( 0xffffff, 1, 100 ); 
camera.add( spotLight );

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

Assign a variable to set the property of a class

Could something similar to this scenario be achievable? const dynamicPropName = "x"; class A { static propName = 1 // equivalent to static x = 1 } A[dynamicPropName] // will result in 1 or would it need to be accessed as (typeof A)[dynamicPropN ...

Exploring the process of generating, monitoring, and initiating personalized events in ReactJS

To establish a global custom event for listening and triggering purposes, here is how it can be achieved using jQuery: $(document).on('myCustomEvent', function(){ console.log("myCustomEvent triggered"); }) $(document).trigger('myCustom ...

Having trouble locating an external Javascript file in a Node.JS/Express app with Jade template?

In my Node.JS/Express app, I am using the Jade template engine. The issue arises when trying to reference a server-side Javascript file named common_routines. Despite placing the Javascript file in the directory above my views directory and referencing it ...

Explore numerous databases using mongoosastic

Currently in my Node.js application, I am utilizing Mongoosastic to fetch data from ElasticSearch : Article.search({ "match_all": {} }, function (err, results) { console.log(results.hits.hits); Post.search({ "match_all": {} }, function (err, r ...

Guide on performing an inner-join query in Firestore using NextJS

My Firestore database contains two collections that I need to work with. The 'uid' field in the users collection and the 'createdBy' field in the 'anuncios' collection both store the same string data, linking each 'anunc ...

Can you explain the varying methods of importing material-ui components and how they differ from each other?

After delving into the documentation for material-ui and exploring various online resources, it appears that there are multiple methods for importing the same component: import TextField from 'material-ui/TextField'; // or import TextField from ...

When working with the Google Sheets API, an error occurred: "this.http.put(...).map is not a valid

Having difficulty with a straightforward request to the Google Sheets API using the PUT method. I followed the syntax for http.put, but an error keeps popping up: this.http.put(...).map is not a function. Here's my code snippet: return this.http ...

Tips for implementing a null check within the findAll() function

I am inquiring about the database and some parameters on the request body are optional. Can someone please guide me on how to determine if certain fields, like categoryId, are nullable and perform the where query based on that? var categoryId = req.body ...

Navigating the complexities of managing group radio buttons in React JS within a functional component

I'm looking to implement a functionality where only one radio button can be selected at a time within a group. I've searched online for class component code, but I'm in need of a solution using React hooks. Can someone help me with an onChan ...

Obtain one option from the two types included in a TypeScript union type

I am working with a union type that consists of two interfaces, IUserInfosLogin and IUserInfosRegister. The TUserInfos type is defined as the union of these two interfaces. export interface IUserInfosLogin { usernameOrEmail: string; password: string; } ...

Close session when browser/tab is exited

After extensive searching online, I have been unable to find a satisfactory solution for ending a session when a browser or tab is closed without requiring the user to log off. I have attempted numerous JavaScript codes that I came across, but none of the ...

Node.js user update complete

I am currently working on enabling users to edit their profiles. However, the code I have set up does not seem to be functioning as expected. The form I am using looks like this: <form action="/dashboard/users/edit/:id" method="put"> And my route ...

Information is only displayed within the Node Request function and is not accessible to

I am currently developing a small web scraping tool using Node (Express) to search URLs from a list. However, I'm encountering an issue with accessing the results of the search outside of the request callback function in a forEach loop. Can anyone hel ...

What is the method for checking the pathname condition?

Hello, I am attempting to create an if statement for the pathname, but I am having trouble getting it to work properly. if (pathname == "/") { category = 'home'; pagetype = 'homepage'; } If the pathname matches "/", the script ...

Using Angular to display exclusively the selected items from a list of checkboxes

Is there a way to display only the checked items in a checkbox list? I am looking for a functionality where I can select multiple items from a checkbox list and then have an option to show only the selected items when needed, toggling between showing just ...

Exclude specific fields when updating a document in Firebase using the update()

Currently, I am storing a class in Firebase by using the update() function. Is there a way to stop specific fields (identified by name) of the object from being saved to the Firebase database? It's similar to how we use the transient keyword in Java ...

Rearrange the items in an array that contain different data types

After spending some time searching on SO, I did find some helpful information but I am still struggling to achieve the desired solution. My current issue involves a keypad with numbers 1 through 5. When a number key is selected, it gets added to an array n ...

Adding Options on the Fly

I am struggling with integrating option elements into optgroups within my HTML structure using JavaScript, particularly while utilizing the jQuery Mobile framework. Below is the initial HTML setup: <form> <div class="ui-field-contain"> ...

The variable is constantly reverting back to its initial value

Here is the code snippet: function send() { var nop = 6; var send_this = { nop: nop }; $.ajax({ type: "GET", data: send_this, url: "example.com", success: function(r) { ...

The input value is displaying one value, but the output is showing a different value

I am encountering a unique issue and could really use some assistance. <input class="testVal" type="number" id="GT_FIRING_TEMPERATURE" value="-17" name="degC" onchange="angular.element(this).scope().unitConversion(value,name, id)"> Despite the valu ...