Guide to configuring the initial lookAt/target for a Control

I'm looking to establish the initial 'lookAt' point for my scene, which will serve as both the center of the screen and the rotation control's focus. Ideally, I'd like to set a specific point or object position rather than rotation angles.

The control in use is OrbitControl. Simply setting lookAt before initializing the Control results in the center defaulting to (0,0,0) on the first user interaction, creating a noticeable 'gap'...

// camera
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 20000);
camera.position.set(0,20,20);
camera.lookAt(new THREE.Vector3(0,10,0));

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

What is the correct way to set the initial point so that this issue can be avoided?

Answer №1

To improve the control of the target, try adjusting the controls without using the camera.lookAt function:

controls.target = new THREE.Vector3(0, 15, 0);
controls.update();

Answer №2

Alternatively (without creating a new instance of THREE.Vector3 but adjusting the values):

controls.target.set(0, 10, 0);

Note: It is still recommended to use controls.update() for the initial frame according to this source

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

An issue occurred during compilation with 1 error: The required dependency could not be located

Encountering an issue in a Vue component while attempting to import another JavaScript file located in the services/AuthenticationService directory. Error message: Module not found: Error: Can't resolve '@/services/AuthenticationService'. ...

Getting a jquery lightbox up and running

After experimenting with three different jquery plugins in an attempt to create a lightbox that appears when clicking on a link containing an image, I am currently testing out this one: . Despite adding the plugin source in the head and ensuring that the l ...

Displaying dynamic data with Vue.js and Chart.js

I am currently working on a VueJS code to display a bar-chart: Vue.component('bar-chart', { extends: VueChartJs.Bar, data: function () { return { datacollection: { labels: ['MICROFINANZAS -SECTOR C ...

Guide on including a JavaScript file in HTML during execution on Node.js

I have developed a basic nodeJs server with the following code in my server.js file: var http = require('http'); var fs = require('fs'); var path = require('path'); var server = http.createServer(function(req, resp){ // P ...

What is the reason behind the inability to send an object from the parent component to a child component within a Vue 3 application?

I've encountered an issue while working on a Vue 3 app involving a component and its <User /> subcomponent. Within App.vue: <template> <Navbar /> <Sidebar /> <Content title="Users" /> <Footer ...

Exploring jasmine-node: unraveling the mysteries of errors

As I embark on my journey to learn JavaScript, I decided to tackle some exercises on exercism.io. This platform provides pre-written tests that need to be passed. While things were going smoothly initially, I hit a roadblock with the latest exercise where ...

Dealing with website links in Next.js and Chakra-UI: Tips and Tricks

When incorporating react linkify directly with chakra-ui components such as Text, the links cannot be managed. Issue Example import Linkify from 'react-linkify'; import {Box, Text} from '@chakra-ui/react'; export default function Usag ...

What is the method for incorporating parameters into an array filter?

Imagine having an array containing multiple duplicate objects. How can we create a condition to specifically identify objects with certain criteria, such as matching IDs, duplicate status, and duplicate dates? The goal is to only display the object with th ...

Tips for enabling autofocus in mat-select列表。

I am working on an angular project where I am using Angular Material and a mat-select element. In my form, the mat-select is the first element, and I want to set auto-focus on it when the page loads. However, I have been facing some difficulties achieving ...

Error message "Module not found in Vue" occurs when changing image URL to an online image

I am currently working on a dynamic image display feature where I retrieve image names as strings from a backend. To manage a large number of images, I plan to store them online while maintaining the same logic for displaying them. Previously, I achieved t ...

Deactivate Firestore listener in useEffect to cease updates

Looking for a solution with useEffect to stop listening to Firebase Firestore collection changes? Data from Firebase can be retrieved successfully, but encountering issues accessing the unsubscribe function. Any ideas on how to resolve this problem? l ...

Sending the id as a prop in react-router-dom

Is it possible to pass an ID in props to a React component using react-router-dom? Take a look at my app.js file below: <Switch location={this.props.location}> <Route exact path="/" component={Home} /> <Route path= ...

Leveraging the power of `.vue` files in modern web browsers that have native support for

Chrome 60 and the most recent version of Firefox, when used with certain flags enabled, have implemented support for import/export directives. I am interested in utilizing .vue files without relying on NodeJS, but I haven't been able to figure out how ...

Is there a way to transfer a variable from Angular 2 Frontend Express JS to an Angular 2 component?

After conducting thorough research, I have made specific modifications to my code. However, I am encountering some errors in my console that I cannot seem to resolve. Despite following a tutorial step by step. Your assistance would be highly valued as I a ...

The error message "Uncaught TypeError: Unable to retrieve the 'length' property of an undefined object in Titanium" has occurred

Here is the data I am working with: {"todo":[{"todo":"Khaleeq Raza"},{"todo":"Ateeq Raza"}]} This is my current code snippet: var dataArray = []; var client = new XMLHttpRequest(); client.open("GET", "http://192.168.10.109/read_todo_list.php", true); c ...

How should filtering be properly done on a data array within a Redux reducer function?

I am trying to develop a function that filters an array based on a search input. The goal is for the filter action to trigger when there's a change in the SEARCH_TEXT. However, I'm facing confusion when it comes to handling the state when the del ...

Is there a way to divide my time during work hours using Javascript?

This is just a simple example. 9.00 - 18.00 I am looking to modify the schedule as follows: 9.00 - 10.00 10.00 - 11.00 11.00 - 12.00 12.00 - 13.00 13.00 - 14.00 14.00 - 15.00 15.00 - 16.00 16.00 - 17.00 17.00 - 18.00 The current code implementation see ...

When working with an outdated package, you may encounter a situation where babelHelpers is not

My current focus is on a vuetify v1.5 project. Unfortunately, one of the dependency packages (d3-flextree) is causing an issue with the 'babelHelpers is not defined' error. The solution I came across suggests using transform-runtime instead of th ...

Exporting a VueJS webpage to save as an HTML file on your computer

Scenario: I am working on a project where I need to provide users with the option to download a static export of a webpage that includes VueJS as a JavaScript framework. I attempted to export using filesaver.js and blob with the mimetype text/html, making ...

Having trouble retrieving parameters within the expressjs router.delete endpoint implementation

Check out my code snippet below where I utilized Express router and Mongoose Model. I am encountering an issue accessing the id parameter. router.delete('/task/:id', function (req, res) { Task.remove({ ...