Turn the camera to focus on the chosen object using three.js

I've been working on designing a map and I'm trying to achieve a specific functionality. When I select any geometry, I want the object to be positioned at the center of the viewport with the camera looking directly at it. Despite searching extensively online, I haven't been able to find a solution yet. It's important to note that I don't want to rotate the object, just update the camera. I'm aiming for a similar effect to the example shown in this link where clicking on a number brings it to the center:

Here is my attempted solution that has been the closest to achieving the desired output:

       `camera.position.x = select.position.x;
        camera.position.y = select.position.y;
        camera.position.z = select.position.z;
        camera.Translate(0,0,-1);
        camera.updateProjectionMatrix ();`

The 'select' variable contains the selected object. While the above code does change the camera position, it does not make the camera look at the selected object as intended.

I also tested lookAT(select.position) but that did not yield the desired results either.

I would greatly appreciate any assistance with this issue.

Answer №1

When utilizing Orbit or Trackball controls in your project, simply adjusting the camera's lookAt property will not suffice. It is crucial to also update the controls' target. To test this, disable the controls and alter the camera's lookAt direction.

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

Hide or show list items in an unordered list using jQuery

I am interested in creating a script that can toggle between "show more" and "show less" functionality for elements in a list. I came across this script: HTML <ul id="myList"> <li>One</li> <li>Two</li> <li> ...

Different ways to categorize and tally a collection of objects

I'm having trouble reshaping my data in order to create a stacked bar graph. The data from the backend is structured like this: [ {date: 'January', category: 'A'}, {date: 'January', category: 'B'}, ...

What steps should I take to address the error message "TypeError: express-validator is not a function

I am currently utilizing express-validator version 6.4.0 and encountering an error when running the server. I have attempted to implement custom validation by organizing separate files for validator, controller, and routes. Here is the primary server file ...

Dynamically add Select2 with a specific class name: tips and tricks

I need help adding a new row with a select2 instance using a class name. The new row is created with the select dropdown, but I am unable to click on it for some reason. var maxGroup = 10; //add more fields group $(".addMor ...

Is there a way to delay the start of this until a legitimate answer is provided in a pop-up window?

Is it possible to delay the loading of this content until a prompt box is answered with a valid response, and have it only appear once a month? Do I need anything beyond JS and HTML for this functionality? <script language="javascript"> function ...

Transforming JSON object to an array of arrays using JavaScript

Attempting to extract specific values from a JSON object and store them in an array can be quite tricky. Below is an example of what this process might look like: Example: var obj = { "1":{"class":2,"percent":0.99,"box":[0.2,0.3,0.4,0.5]}, "2 ...

Having difficulty creating JSON data following retrieval of rows by alias in MySQL

I am encountering an issue while trying to fetch rows from two tables using a JOIN and aliases. The problem arises when I attempt to convert the fetched rows into JSON data and assign them to a JSON array. Below is the code snippet: $personal = $db->p ...

Toggle visibility between 2 distinct Angular components

In my application, I have a Parent component that contains two different child components: inquiryForm and inquiryResponse. In certain situations, I need to toggle the visibility of these components based on specific conditions: If a user clicks the subm ...

What is the difference between TypeScript's import/as and import/require syntax?

In my coding project involving TypeScript and Express/Node.js, I've come across different import syntax options. The TypeScript Handbook suggests using import express = require('express');, while the typescript.d.ts file shows import * as ex ...

Accessing a global variable in AngularJS while using ng-data-repeat functionality

Currently in my Angular project, I am displaying block information using the ng-data-repeat directive and accessing various values. Below is a snippet of a table utilizing this repeat feature: <tr class="fader" ng-repeat='b in blocks'> ...

Arranging elements using the ng-repeat directive in AngularJS

My question pertains to an array I am working with: $scope.answers=["","","",""] This array contains several empty elements. <li ng-repeat="item in answers "><input type="text" ng-model="item"/></li> When running this code, an error i ...

Getting request parameters within Model in Loopback can be done by accessing the `ctx`

common/models/event.json { "name": "Event", "mongodb": { "collection": "event" }, "base": "PersistedModel", "idInjection": true, "options": { "validateUpsert": true }, "http": { "path": "organizer/:organizer_id/events" }, "properties": {}, "va ...

Determining the Nearest Form to an Element using jQuery

I developed a JavaScript/jQuery script that allows me to check all checkboxes within a form. The function works effectively, but the issue is that it checks all checkboxes on the page regardless of their form wrapper. Here is the function: function toggl ...

Is it possible to dynamically store JavaScript code in a variable and then have JavaScript execute it?

I'm uncertain if my current method is the most appropriate for my goal. Essentially, I am fetching data from a database using an ajax call, and I want this data to populate a JavaScript library where the layout is structured like this: data[ item{ ...

Browser fails to display input value when altered

I have noticed that when the value of the Input element changes, the browser does not display the updated value. However, you can verify this change by inspecting the DevTools in the browser. I am curious as to why the actual value of the Input element is ...

Combining arrays based on a key in Node.js

I have the following two objects that need to be merged: [ { "response_code": 1, "response_message": [{ "a": 1000, "b": 1000001, "c": 10000002 }] }] [ { "response_code": 1, ...

Issue: AngularJS not refreshing view after receiving server response

Currently, as I work on developing a mobile application, I've come across an issue related to relaying messages in the view after executing an ajax call and receiving data from the server. My goal is to display these messages to users only after they ...

States are consistently maintained in React and do not impact the rendering process

I am keeping track of a state value by declaring it like this: const [count, setCount] = useState(0); To increment the count: const incrementCount = () => { setCount(count + 1); } I use this function in a loop to iterate through an array, exec ...

Having trouble extracting the Top-Level Domain from a URL

I'm struggling to find a reliable way to extract the Top-Level Domain from a URL. The challenge I'm facing is that the URLs entered by users can vary greatly - they might enter www.google.com, m.google.com, m.google.uk, google.uk, or www.m.google ...

Updating or swapping images using JavaScript and HTML

I am looking to implement a feature similar to Twitter, where uploading a picture automatically updates the avatar by displaying a spinner while the new image loads. I attempted to accomplish this with the following code: <script language="javascript"& ...