Issue with ThreeJS object's quaternion rotation deviating from expected axis rotation

I am currently working on a project where I need a 3D object to follow a specified path while always facing the direction in which it is moving. To achieve this, I have been using the following code snippet:

fishObject.quaternion.setFromAxisAngle(axis, radians)

In this context, radians represents the angle between an up vector and the direction of travel.

Within the provided pen, you can visualize the axes for better understanding. The blue line represents the axis, the purple one symbolizes up, and the red line illustrates the intended direction for the fish (tangent). Even though these components move correctly, the object's rotation does not align with its axis when setting the quaternion.

The pen may seem cluttered due to the fish construction details, but my main focus is line 281 and its parameters: 

fishObject.quaternion.setFromAxisAngle(axis, radians)

Being new to this concept, I believe resolving this issue should be straightforward for someone experienced in 3D rotations.

Link to CodePen

Your guidance and clarity on this matter would be greatly appreciated. Thank you.

javascriptthree.js

Answer №1

To create a tangent frame that behaves well, consider using the lookAt() method.

var axes = new THREE.AxesHelper( 10 );
scene.add( axes );

. . .

// Next, in the rendering loop

pt = swimPath.spline.getPoint( t );

tangent = swimPath.spline.getTangent( t );

axes.position.copy( pt );
axes.lookAt( pt.add( tangent ) );

Ensure that your "fish" is facing the local positive-z axis by default to avoid issues. If it isn't, you'll need to apply a rotation. Attach the object as a child of the tangent frame.

fishObject.rotation.set( 0, - Math.PI / 2, 0 );
axes.add( fishObject );

Using three.js version r.92

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

Simple method to modify the text size of the entire HTML page

Looking for a way to adjust the font size of an entire HTML document? I'd like to have two buttons - one to increase the font size and the other to decrease it. Each button will trigger a JavaScript function; function increaseFontSize(){ //Increase ...

javascriptjqueryhtmlcss

The MaterialTable component is indicating that there is no property called 'tableData' on the IPerson type

Incorporated an editable attribute to my MaterialTable component. Currently looking for a way to retrieve the index of updated or deleted items within the onRowUpdate and onRowDelete methods. To replicate the issue, refer to this minimal sandbox example: ...

javascriptreactjstypescriptreact-typescriptmaterial-table

Trigger an event upon completion of a write operation in AngularJS

I want to trigger a search after my user finishes typing (without hitting enter) in AngularJS. Here is a simplified version of my HTML: <div ng-class="input-append" ng-controller="searchControl"> <input type="text" ng-model="ajaxSearch" ng-cha ...

javascriptajaxangularjs

Can JavaScript be executed from the console while navigating between pages?

I am facing a challenge that I can't find any solutions for online or elsewhere. The task at hand seems straightforward. I am using the Chrome console and attempting to run Javascript code to navigate between pages with pauses in between. It feels lik ...

javascriptconsole

Building an array of ids that contain the checkbox type using jQuery: What's the best way?

Below is the HTML snippet I am working with: <!-- Parent checkbox code goes here --> <input id="ckbCheckAll" class="custom-check ez-hide" type="checkbox" name=""></input> <!-- Child checkbox codes follow --> <input id="practice_ ...

javascriptjqueryhtmlcheckbox

Mapping JSON schema to typed JavaScript objects

Are there any tools available to generate JavaScript typed objects (JS functions) from a JSON schema? Essentially, looking for the JS equivalent of this http://code.google.com/p/jsonschema2pojo/. Thank you. EDIT: Starting with: { "description": "An ...

javascriptjsoncode-generation

Building a custom login page with axios in a react-redux application

I've encountered an issue with my login page. When I click the submit button, it does not redirect to the main Dashboard page. Check out the code below for authentication/login.js: import React, { Component } from 'react' import { Field, ...

javascriptreactjsreact-reduxaxios

What is the best method to obtain the user id within a Redux action?

I am striving to display only user-related items, so I am attempting to retrieve items by sending a request for data to the user id /api/items/:userid. Utilizing Redux store in this process. Here is my server-side code snippet: router.get("/:userid", (req ...

javascriptreactjsredux

Day Change Triggers React [Native] View Update

I've been working on a React Native component that needs to update itself when the day changes, regardless of user interaction. Is there another method besides using setInterval for this task? If I use setTimeout in my viewDidLoad function with the n ...

javascriptiosreactjssettimeoutreact-native

Angular's separate scope variables allow for isolated data manipulation within individual components

Struggling with one scope variable affecting multiple elements in a div in AngularJS. Looking for help as a beginner in handling this issue. For a clearer understanding, here's an example: JS: /* controller-home.js ********************************* ...

javascriptangularjs

The JSON parsing failed due to an expected '}' character missing

I'm in the process of making an ajax request $.ajax({ url: 'url', data: {}, method: 'POST', enctype: 'multipart/form-data', dataType: 'json', success: function(data){ // handle success ...

javascriptjqueryajaxjson

Exploring the usage of multidimensional arrays in React components

How can I extract data such as teamId from the "teams" array using datas.map() method in a multidimensional array? Any tips or help would be appreciated. Is there another way to map out this data? { "gameId": 3226262256, "platformId": "NA1", " ...

javascriptreactjsjsx

Unpacking nested objects using dynamically generated property names in a React state - a guide

Having trouble with using setState and figuring out how to destructure the object with a dynamic property name, denoted by id. The state looks like this after computation: { "inputConfig": { "5d4d684cadf8750f7077c739": { "0": "5d4d ...

javascriptreactjssetstateobject-destructuring

The document.ready function does not seem to be functioning properly within an iframe

In the main page, there's an embedded iframe set up like this: <iframe src="facts.php" style="width:320px; height:500px; border:hidden" id="facts"> </iframe> Within that iframe, a jQuery function is implemented as follows: <script ty ...

javascriptjqueryiframe

Exploring the depths of a multidimensional dictionary within AngularJS

I am currently working on a project using AngularJS. The data I have is in the form of JSON: { "leagues":{ "aLeague":{ "country":"aCountry", "matchs":{ "aUniqueID1":{ "date":"2014-09-07 13:00:00", "guest_play ...

javascriptjsonangularjs

Getting data from a PHP request using AngularJS can be achieved by creating an HTTP request in

I am trying to send a basic REST service request using Angular for the PHP code below. Unfortunately, the request is resulting in an error. Check out the live code here PHP Code <?php /* Simple array */ $json = array("status" => 0, "msg" => ...

javascriptphpangularjs

Executing a jQuery code within a WordPress theme

I have been attempting to implement the following script within the header.php file of a Wordpress website: <script> jQuery(function($) { jQuery('[href=#membership]').attr( 'data-menu-top', '500' ); }); ...

javascriptjquerywordpresstemplatesattr

What is the best way to retrieve the value of a specific textfield using the map function with a collection of

These posts have identical text fields for comments, using the same useState hook. I am trying to extract the value of a specific text field without affecting others. It's similar to Facebook posts, but I'm unsure how to achieve this. const PostT ...

javascriptreactjsformsmaterial-ui

Advancement of Loading Techniques for Enhanced 3D Rendering in Three.js

Currently, I am integrating stl files into a three.js scene through the use of the STL loader. The size of these stl files varies from 5mb to 50mb. I am seeking a solution that would allow me to gradually load/stream/increase level of detail (unsure of te ...

javascriptthree.js

Is it possible to utilize jQuery for dynamically generating a file along with its content?

Here is the HTML snippet I am working on: <ul> <li> Download <a href="#">file1</a> </li> <li> Download <a href="#">file2</a> </li> <li> Download <a href="#">file3</a> </li> ...

javascriptjqueryajaxhtml