Positioning the camera relative to a 3D object in three.js

I am facing a challenge where I need to ensure that the camera stays at a fixed distance behind an object as it moves and rotates. Specifically, I am working on drawing an airplane and require the camera to always focus on its rear end, while allowing user interaction like mouse movement for viewing other angles.

Assuming I have defined the position and rotation of the airplane (represented by an instance of THREE.Object3D):


        airplane.position = {x: 1, y:2, z: 3};
        airplane.rotation = {x: Math.PI/4, y:1.2, z: 0};

If the initial configuration has the camera positioned at (5, 0, 0) when the airplane's rotation and position are both (0, 0, 0), what would be the simplest approach to calculate the vector for placing the camera?

Thank you in advance for any insight!

Apologies for the messy code presentation; I'm currently juggling with it. Unfortunately, I can't create a jsfiddle due to the absence of a server to host three.js resources...

javascriptvectormatrixthree.jswebgl

Answer №1

Attach the camera to the airplane as a subordinate.

airplane.attach( camera );
camera.position.set( 5, 0, 0 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

By doing this, when you make adjustments to the airplane's position or rotation, the camera will move accordingly.

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

Is there a way to incorporate a text box in javascript that displays the retrieved reference count from the database?

I'm currently working on creating a functionality that retrieves rows with the same ID from a database and displays them in a text box. Below is the PHP code I've written for retrieving all the rows: PHP: <?php include_once('pConfig ...

javascriptphp

Message displaying successful AJAX response

I'm currently updating my AJAX request to make it asynchronous, but I am wondering if there is an equivalent to var response = $.ajax({ in the success function. Previously, my code looked like this: var response = $.ajax({ type : "GET ...

javascriptjqueryajax

Loading an Angular2 app is made possible by ensuring that it is only initiated when a DOM element is detected

In my main.ts file, the code below is functioning perfectly: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); H ...

javascriptangularjsangulartypescriptwebpack

Converting an HTML menu to a WordPress menu: A step-by-step guide

Hey everyone, I've got some code in my HTML file that's using the 320 Bootstrap WP theme. I've created a menu and it's working fine. However, the box above the menu isn't moving along with it from menu to menu. Any ideas on how to ...

javascriptjqueryhtmlwordpress

Inquiry about CSS Media Queries

I am facing an issue with CSS media queries... For my HTML page, I have separate files for desktop and iPad styles - desktop.css and ipad.css. In desktop.css, I have used @import url("ipad.css"); and added a @media not only screen and (device-width:768px) ...

javascripthtmlcssw3cmedia-queries

Generate an image on Canvas using a URL link

I have a unique URL that generates canvas images with specific parameters. It functions properly when loaded in a browser. The final line of code is: window.location = canvas.toDataURL("image/png"); However, when attempting to use this URL from another ...

javascripthtmlcanvas

How to utilize map, reduce, and filter methods in JavaScript to print values from a nested array

The end goal is to have a unique entry for each name in the provided array. (Similar to the commented rows at the bottom of the snippet below) If there are identical names, only keep the entry with the highest count. In case of duplicate counts, choose th ...

javascriptnode.jsarrays

Having trouble with PHP's json_decode function with GET variables in an object?

I am currently working with an angular code that utilizes jsonp. One issue I am encountering is related to the object variable 'o_params' in my params. Here is the javascript code snippet: $http({ method: 'JSONP', ...

javascriptphpangularjsjsonjsonp

Creating a dynamic template in AngularJS directive

I am curious about how to create a dynamic template directive. Here's the challenge - when I am on the main page or main categories such as page1 or page2, my template should include all the divs. However, when I am on a submenu like subpage1 or subp ...

javascriptangularjstemplatesdynamicdirective

Running into trouble importing an ES module in Node.js during a migration

Currently, I am in the process of developing a straightforward application for my personal project using ExpressJS. To manage database changes, I have opted to utilize sequelize ORM. My current objective is to rollback a migration, and to achieve this goal ...

javascriptnode.jsecmascript-6sequelize.jsmysql2

Can the table be automatically updated on page reload?

My goal is to populate a table using $.ajax(), but the content is not showing up when the page first loads. Is there something missing in my implementation of the $.ajax() function? Here's the HTML structure: <div class="row"> <div clas ...

javascriptjqueryajax

Exploring TypeScript: Optional Sub-Properties

I've been exploring ways to create a type-alias with properties like "answer" that I came across in this post by another user (Typescript interface optional properties depending on other property). Here's an example: type Sample = { key1: true, ...

javascripttypescript

Tips for extracting value from PHP and transferring it to a jQuery function

I am trying to calculate the distance between two airports and pass this value back to a jQuery function to use it in further calculations. I'm unsure of where I went wrong? HTML: The 'dept' and 'dest' inputs fetch airport informa ...

javascriptphpjquery

Is it possible for the r.js optimizer to generate a fresh index.html file that links to the compiled files

After using r.js to optimize my project, I'm wondering how to generate a single index.html file that includes just one optimized script and one CSS file. Would I need to manually write this post-build or is there another way to achieve this? ...

javascriptnode.jsrequirejs

Is it possible to determine if a sorted vector in C++ contains duplicate values?

I'm seeking to verify the presence of duplicates within a vector without altering the vector itself or creating a new one. An example would be: {90, 80, 70, 60, 50, 40, 30, 20, 10, 10} -> true {90, 89, 88, 87, 86, 85, 84, 83, 82, 81} -> false ...

c++vectorstl

Retrieving JSON data from outside the React root directory

My current project includes an older javascript/php application with numerous JSON files used to retrieve data from the database. As I plan to migrate some modules to React, I am wondering if it's possible to still fetch data from these JSON files wi ...

javascriptjsonreactjs

Incorporating data sets from an already established highcharts chart

I created a chart using highcharts and I am looking to update it, but I am struggling with this particular line of code that is adding random data instead of the data I want to use from JavaScript. // Add the new series. chart.addSeries({ data: Highcharts ...

javascripthighcharts

Unexpected end of JSON input error in Laravel AJAX request

Hey everyone, I'm feeling a bit lost with the concept of Ajax and its syntax. So here's my issue: I have two forms on my webpage where the value of a hidden field determines the logic executed in my controller. It seemed simple at first, but now ...

javascriptphpjqueryajaxlaravel

What could be causing the issue of not being able to access an element visible in AngularJS Videogular?

I am currently working on integrating the videogular-subtitle-plugin with the most recent version of Videogular/AngularJS. As a newcomer to AngularJS, I believe there must be a simple solution that I am overlooking. My main challenge lies within a directi ...

javascriptjqueryangularjsdomvideogular

What could be the reason for the inability to install Angular JS 2?

Setting up Angular 2 for experimentation on my VPS has been quite a challenge. The initial steps can be found here. Upon trying the first command: $ npm install -g tsd@^0.6.0 I encountered success. However, the second step led to an error: tsd install ...

javascriptangularjsnode.js