Discovering the orientation of an object in relation to the camera

I'm encountering a challenge in determining the angle of an object in relation to the camera. My goal is to write code for a spaceship with a camera that follows it. While I have successfully made the camera track the ship, there are instances where the rotation of the camera is slightly off. Here's my current camera code:

var focalpoint = new THREE.Vector3(
    actor.position.x,
    actor.position.y, 
    actor.position.z + 14
);

//move camera closer to the object if it gets too far away
var calculatedDistance = distance(camera.position, actor.position);
var cameraTolerance = calculatedDistance - this.cameradistance.min;
var closingvelocity = cameraTolerance * 0.02;

if(calculatedDistance > this.cameradistance.max)cameravelocity.z = -closingvelocity;

if(calculatedDistance < this.cameradistance.min)cameravelocity.z = closingvelocity;

//slow down the camera
if(calculatedDistance < this.cameradistance.max && calculatedDistance > this.cameradistance.min){
    cameravelocity.z = 0;
}

camera.translateX( cameravelocity.x );
camera.translateY( cameravelocity.y );
camera.translateZ( cameravelocity.z );
camera.lookAt(focalpoint);
camera.rotation.z = 0;

Currently, I am faced with the task of limiting the spaceship's (actor) rotation so that it doesn't veer towards the camera, and also resolving the issue of camera flipping over. To address this, I need to determine how to calculate the rotation of the actor in relation to the camera, but I'm unsure of where to begin.

Answer №1

discovered the solution by reversing the target's rotation and then combining it using this method:

let rotationOffset = player.quaternion.clone().reverse();
let newRotation = viewer.quaternion.clone().multiply( rotationOffset );

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

Error Handling with Node.js Sequelize RangeError

Currently, I am in the process of setting up a table to store user sessions. Specifically, I plan to save the IP address as an integer and have been exploring various methods for achieving this. You can find more information on this topic here: IP-addresse ...

Utilizing the JSON result of an AWS MySQL query to display data as a DataTable on a webpage

I recently managed to link a website to a Lambda function via AWS API Gateway to execute a SQL query on an Aurora Serverless MySQL database. The JSON response is currently displayed in string form on the webpage, appearing like this: https://i.sstatic.net ...

Challenges compiling 'vue-loader' in Webpack caused by '@vue/compiler-sfc' issues

The Challenge Embarking on the development of a new application, we decided to implement a GULP and Webpack pipeline for compiling SCSS, Vue 3, and Typescript files. However, my recent endeavors have been consumed by a perplexing dilemma. Every time I add ...

Objects within an array are not sorted based on their properties

I'm currently struggling with sorting an array of objects based on a specific property. Despite my efforts, I can't seem to figure out what's causing the issue as it remains unsorted. Would appreciate some assistance. You can take a look at ...

What could be the issue with this particular Ajax script?

I am facing an issue with this JavaScript code - it runs smoothly in Chrome and IE, but encounters a problem in Firefox. I need assistance in identifying the issue. Can anyone help? <script> function checkGurantee() { var gurantee = document.get ...

Consistent column heights within each row

I currently have Bootstrap implemented on my website and have integrated jQuery to adjust the height of each column to match the tallest one. However, the issue I am facing is that the height adjustment applies globally across the entire page, rather than ...

Avoiding scrolling when a button (enveloped in <Link> from react-scroll) is pressed in React

Currently, I am implementing the smooth scroll effect on a component using react-scroll. However, adding a button inside the component to create a favorite list has caused an issue where the smooth scroll effect is triggered upon clicking the button. Is ...

After resizing, reordering, hiding, or showing columns in the kendo grid, the grid's data source will be set to

I am encountering an issue with my kendo grid where the data disappears after performing certain actions: Reordering columns using mouse drag and drop Resizing columns using mouse drag and drop Hiding columns through the column menu Showing columns throu ...

Ways to reduce lag while executing a for loop

How can I optimize my prime number generation process to avoid lagging? For example, is there a way to instantly display the results when generating primes up to 1000? HTML: <!DOCTYPE html> <html> <meta name="viewport" content="width=dev ...

How to send configuration data to an external library in Angular 6 in the app.module.ts file

My goal is to provide basic configuration settings to an external or third-party module. These settings are stored in a JSON file for easy modification across different environments without the need to rebuild the code. import { BrowserModule } from &apos ...

Update database upon drag-and-drop using jQuery

I have a dataset (shown below) that undergoes sorting by 'section'. Each item is placed into a UL based on its section when the page loads. My goal is to automatically update the section in the database when a user drags an item to a different s ...

How can one keep object values constant or unchanging in JavaScript?

Here is a simple example where I need to clarify my requirement. I want to ensure that the values of object a are not changed after assigning it to constant b and modifying its values. I want the console to display the original values of object a, not the ...

Can you explain how to achieve auto-assigning arrays in JavaScript similar to the PHP feature?

I'm seeking a way to update a JavaScript array automatically, without specifying a key as a number or string. The value should simply take the next available numeric key in the array. In PHP, you can achieve this using: <? myarray = array(); mya ...

I am utilizing Python Django to display a message from a Python file in HTML. While the current code is functional, I would like the message to be showcased as a pop-up or alert notification

Using Python Django. The message is coming from a Python file and I would like to display it in HTML. The current code is functioning, but I would like the message to appear as a pop-up or alert. Register {% if messages %} {% for result in messages %} < ...

How can I transfer a PHP variable into a JavaScript variable nested within another PHP variable

After my php/html script generates the image, I am looking to display it without needing to reload the page. I currently call a javascript function within the PHP code to change the image. However, I am unsure how to pass the new image name to this javasc ...

Having trouble locating my images in a project created with Webpack-simple and Vuejs using vue-cli

My folder structure looks like this: https://i.sstatic.net/dEhAN.png Since my website is simple, I prefer using just a json file to feed data instead of requiring an administrator. In my Cases.vue file, I have a v-for loop that iterates through my data/ ...

Detecting when the "enter" key is pressed using Jquery instead of relying on a mouse click

One issue I am facing is that jQuery is detecting the "enter" key press instead of mouse clicking on the submit button when trying to submit a form. The submit button works fine on the first attempt, but after that it only responds to the "enter" key. He ...

Use jQuery to update the field without affecting the observable

Greetings to the wonderful stackoverflow community! I recently delved into using knockout just a few days back. Currently, I am utilizing it to create a dynamic menu builder for a CMS project that I'm deeply engrossed in. If you'd like to take ...

Application with Single Page design has a Large DOM, leading to sluggish performance

I've been working on a single page application that heavily relies on widgets like grids and tabs from the jqWidgets library. These widgets are all loaded when the page is first opened. However, I've noticed that after interacting with the site f ...

tips for building angularjs widgets with limited scope

Is there a way to generate widgets from HTML scripts on a webpage? For example: <script type="text/html" id="widget-simple"> <div class="widget-simple"> This is my widget and its name is {{ test }} </div> </script> & ...