Guide on positioning a 3D model to face forward in the direction of its movement

I'm just starting to learn about 3D graphics, so a lot of the terminology is unfamiliar to me...

In my ThreeJs project, I have a 3D model flying around a room and avoiding walls. When it gets near a wall, it needs to turn slightly to avoid hitting it.

However, I'm having trouble getting the model to face the new direction of motion after turning. No matter what I try, it always ends up facing a random direction.

Below is the code I've been using in an attempt to make it face the correct direction. I've included comments to explain my thought process behind each step.

(the specific model I'm working with is stored as an attribute of the object named "bird")

// convert the current rotation angle to a directional vector
const currentMotionDirection = new THREE.Vector3()
     .setFromEuler(bird.model.rotation)
     .normalize();
// calculate the angle between the current direction and the desired direction
const angle = currentMotionDirection.angleTo(directionToGo);
// rotate the model to face the desired direction
const quaternion = new THREE.Quaternion().setFromAxisAngle(axis, angle);
bird.model.quaternion.copy(quaternion);

// update velocity to move in the new direction
bird.setVelocity(directionToGo);

.

This is what happens based on the above code:

https://i.sstatic.net/Lzafe.gif

Any assistance would be greatly appreciated, thank you!

Answer №1

After some troubleshooting, I managed to solve my issue by making a small code change:

bird.model.quaternion.copy(quaternion);

needed to be swapped out for

model.quaternion.premultiply(myQuaternion)

This adjustment was necessary because the copy function replaces the existing quaternion while the premultiply method ensures that the computed quaternion is relative and multiplied with the current one.

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

Unable to execute multiple queries within a CloudCode query

In my quest to discover new users who I have not connected with before using a cloud function, I am utilizing several tables: Users table - This standard table includes an additional "hasLight" boolean column Connected table: 'user' - a point ...

Message displayed in a div element on the status bar

I am working on implementing a loading description box that will display information about what is currently loading or show the percentage of the loading progress. My current approach involves using a basic "show div after on document.all" setup where th ...

What is the best pattern to utilize for these types of tasks?

I've been struggling a bit with understanding the MVC principle, but I always believed that business logic should be contained within models - please correct me if I'm mistaken. In my current project, I am following the MVC pattern. The rou ...

Searching for the precise error name being thrown in MySQL using Node.js

Currently, I am in the process of constructing a server using node.js (express) and mysql felix. The issue I am facing is that occasionally I encounter a duplicate error when running a certain query. I have exhausted all of my attempts to handle this err ...

Tips for displaying a download prompt in a new window using a Bootstrap modal?

When attempting to implement a download functionality in a normal HTML page, the code provided below successfully starts the download in a separate window. However, when using the same code within a bootstrap modal form, it does not work. What other step ...

Playing audio from local blob data is not supported on mobile browsers

I'm trying to stream blob data in mp3 format, but I'm experiencing difficulties with mobile browsers. The code below works perfectly on PC browsers, but not on mobile: // Javascript var url = URL.createObjectURL(blob); audio = document.getEleme ...

Guide to setting up a datePicker in a cellEditorSelector

In my grid, I want to have different editors for different rows within the same column. The ag-Grid documentation provides information on how to achieve this using colDef.cellEditorSelector as a function: link I have successfully created unique editors fo ...

Achieving functionality with Twitter Bootstrap's "Tabs" Javascript in a Ruby on Rails application

Encountering a JavaScript issue within a Rails application. Although Twitter's documentation is very clear, I'm still struggling to make dynamic tabs work (tab switching and dropdown). I even went ahead and copied their source code, downloaded t ...

The AngularJS beginner routing application is malfunctioning and needs fixing

I've been diving into Angular JS but hit a roadblock with a basic angular routing program. I need some guidance on what's going wrong. If you want to check out the complete project code, visit my GitHub repository: https://github.com/ashpratap00 ...

Experiencing difficulty importing .pem files into Express

Referred to by this previous inquiry which went unanswered: I've stumbled upon something peculiar. Despite my efforts, I am still unable to import my certificate. Every time I attempt to run my Node/express application, it crashes with the same error ...

Erasing the content of a text field with the help of a final-form computation tool

I'm attempting to utilize the final-form calculator in order to reset a field whenever another field is modified. In my scenario, there are two fields. Whenever the first field changes, the second field gets reset as expected. However, an issue aris ...

"Step-by-step guide on setting up Angularjs ng-model in a Rails environment

Question regarding the utilization of two-way binding in AngularJS and Rails ERB files. Let's say the input value in my .erb file has an initial value like this: example.erb <input type="text" value=" <%= @item.title %> " ng-model ="item.t ...

Avoiding redundant EventEmitters when transferring @Output to a child component

While working on a form component, I decided to separate the form action buttons into a child component. This led me to create two EventEmitter and handlers for the same action. I'm wondering if there is a way to directly pass the 'onDiscard&apo ...

vue implementing autoscroll for long lists

I am looking to implement an autoscrolling log feature on my webpage that is dynamically fetched from a REST endpoint. To handle the potentially large size of this log, I decided to use vue-virtual-scroll-list. Additionally, I wanted the log to automatical ...

Need two clicks for React setState() to update the user interface

As someone who is new to React, I've come across a common issue that many developers face. Despite trying various solutions, I still find myself having to click twice to update the UI state. The first click triggers the event handler but does not upda ...

Real-time form validation in Bootstrap 4 while completing the form

After exploring the form validation section in Bootstrap 4.4 (https://getbootstrap.com/docs/4.4/components/forms/#how-it-works), I have successfully integrated the code into my project. The code example and script for triggering validation seem quite impre ...

How can I modify the dot colors on a graph using chart.js?

Need assistance with changing the color of graph data points https://i.sstatic.net/QGJBv.png Here is my JavaScript code snippet I have successfully created a graph using chart.js. However, I now want to differentiate data points by displaying different c ...

Modifying the CSS attributes within an iframe by referencing the parent window's properties

I am facing a challenge involving running an iframe on two separate pages within the same website, each with distinct CSS properties. The dilemma arises from the limited space available on my index.php page, where I aim to confine text within the iframe to ...

Assign values to a nested FormGroup in Angular 10 based on the provided JSON object

What is the most efficient way to set values for a JSON object coming from the backend? I am familiar with manually setting values based on the key param, but are there any other optimized approaches I should consider? //backend response "response": { ...

The lookat() function in three.js isn't functioning according to my requirements

Here is the code snippet I am working with: http://codepen.io/usf/pen/pGscf This is the specific section of interest: function animate() { //sun.rotation.x = t/1000; sun.rotation.y += 0.01; t += 0.1; earth.position.x = Math.sin((2*Ma ...