The lookAt method in THREE.js is not functioning properly when called after the rendering process

The code snippet below seems to be causing some issues. It requires jquery and three.js to function properly. The problematic lines are as follows:

// change the view so looking at the top of the airplane
views[1].camera.position.set( 0,5,0 );
views[1].camera.lookAt(objectManager.airplane.position);

Interestingly, when these two lines are commented out, the two similar lines that come before them work as expected:

views[1].camera.lookAt(objectManager.airplane.position);

and

view.camera.position.set( 5,0,0 );

It appears that the call to camera.lookAt only functions correctly the first time. Subsequent calls do not make the camera follow the airplane object. I would greatly appreciate any help in identifying what might be going wrong here!

You can find the complete script below.

Thank you

$(function(){
    // JavaScript code goes here
});

Answer №1

To achieve the desired result, follow these steps:

views[1].camera.position.set( 0, 5, 0 );
views[1].camera.lookAt( new THREE.Vector3() );

Avoid the following approach:

views[1].camera.position.set( 0, 5, 0 );
views[1].camera.lookAt( objectManager.airplane.position );

Remember, your camera is connected to the airplane. Therefore, it must lookAt ( 0, 0, 0 ) within its own coordinate system, not the airplane's global position.

There is no need for your updateProjectionMatrix() calls. Simply refer to the three.js examples for guidance.

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

Tips for changing the focus between various modals and HTML pages after minimizing a modal with jQuery

I have been utilizing a plugin from to minimize a bootstrap modal within my angular application. The problem I am facing with this plugin is that whenever I minimize a modal, I am unable to interact with the html page, such as typing in input boxes or sc ...

Setting the `setCustomValidity()` method for dynamically inserted HTML elements Explanation on how to use

I am dynamically adding elements to my view and setting their attributes using the jQuery attr function as demonstrated in the code snippet below: var input = $("<input type='text' name='"+inputFieldName+"' '>"); input.attr( ...

Avoiding metacharacters and utilizing them as a string variable for selection

For example, I have a variable called myid, and its value is "abc xyz". Then, I use a function to escape metacharacters and assign the result to another variable like this: var x = "#"+escapechars(myid);. The evaluated value of x is #abc\\xyz. ...

Rotating images on a canvas

We're currently implementing Ionic and Angular in our project. One issue we are facing is regarding image rotation on canvas. When we click on an image, the rotation works perfectly if it's a jpg file. However, when we pass a base64 image, the r ...

What is the process of transforming a JSON string into a JavaScript date object?

{"date":"Thu Dec 06 14:56:01 IST 2012"} Is it possible to convert this JSON string into a JavaScript date object? ...

Discover how to retrieve service response data from an API and populate it into the Select Option with Angular 2

Api.services.ts getListOfNames() { return this.http.get(this.BaseURL + 'welcome/getnama') .pipe(map(response => { return response; })); } After making the API call, I receive the following resp ...

Tips on passing methods to form provider with unique name for managing nested forms

As discussed in #60277873, when creating nested forms, it is necessary to rename the methods of the nested form as follows: const { register, formState: { errors }, handleSubmit, } = useForm({ mode: "onBlur", }); This code sh ...

The process of generating an efficient build gets stuck and never finishes

I am currently facing an issue while attempting to build my React app. Whenever I execute "npm run build," the terminal gets stuck at "Creating and optimized production build..." and doesn't complete the process. I have tried running this on a system ...

Error in Typescript for the prop types of a stateless React component

When reviewing my project, I came across the following lines of code that are causing a Typescript error: export const MaskedField = asField(({ fieldState, fieldApi, ...props }) => { const {value} = fieldState; const {setValue, set ...

What is the reason for sending a single file to the server?

A function called "import File" was developed to send multiple files to the server, but only one file is being received. Input: <input type="files" id="files" name="files" multiple onChange={ (e) => this.importFile(e.target.files) } ...

Accessing a factory's functions within itself in Angular

I'm really trying to understand how all of this operates. It seems like it should be working as intended. I have an Auth factory that, when the jwt token expires, calls its 'delegate' method which obtains a new token using the refresh token. ...

Looking to display parent and child elements from a JSON object using search functionality in JavaScript or Angular

I am trying to display both parent and child from a Nested JSON data structure. Below is a sample of the JSON data: [ { "name": "India", "children": [ { "name": "D ...

AngularJS meta tags featuring dynamic asynchronous content

I am currently facing a challenge with my angular application that is running within a .net application. My main goal is to implement meta tags for SEO and other purposes. However, the issue I'm encountering is that I cannot determine the page title u ...

Is there a specific method for organizing cached buffer conversions in Node.js for optimal efficiency?

In a GitHub discussion, it was pointed out that the Map's .has method does not work with buffers because identical buffers are considered as distinct objects. This limitation became apparent when attempting to store buffer string conversions in a map ...

Exploring cookies to extract and display my email using Express.js

I am currently working on retrieving the name and value fields as cookies through a loop in my app.get method, then posting the field values in the app.post method using expressjs. I would appreciate it if someone could review the 'for loop' bel ...

Retrieve information from a form in AngularJS without relying on two-way data binding

Utilizing two-way data binding, the code operates effectively. However, there is a stipulation - instead of using =, use <. Upon the initial launch of the application, the text inputs will contain predefined values. The objective is to enable users to ...

How can I pass the data-attribute ID from JavaScript to PHP on the same index page using ajax?

I am struggling with the title for this section. Please feel free to modify it as needed. Introduction: I have been working on setting up a datatables.net library server-side table using JSON and PHP. Most of the work is done, but I am facing challenges w ...

Trigger ng-click after ng-model updates

Is there a way to create an ng-click function that will only execute after the value of the ng-model in a scope variable changes? In my scenario, I have a list of analysis objects within a list called analyses, each with an include boolean attribute used f ...

Explore the category options in the reference document using Node.js

Category Schema const CategorySchema = mongoose.Schema( { catName: { type: String, required: true } }, { timestamps: true } ); Product Schema const ProductSchema = new mongoose.Schema( { brand: { type: String, required: true }, title: ...

"Error: The functionality of finding places on Google Maps is not

I've encountered an issue while trying to integrate Google Maps into my Node application. The map is loading correctly and I'm able to retrieve my location. However, I am facing a problem with implementing the Google Places API code to allow user ...