What is the method for determining the y angle between two vectors using Three.js?

When working with Three.js, I encountered a challenge involving 2 3D vectors and the need to determine the angle between them along both the x-axis and y-axis.

To calculate the x-axis angle, I used the following formula:

toDegrees(atan2(A.z, A.y) - atan2(B.z, B.y))

I found this solution on Stack Overflow, and it worked perfectly. However, when attempting to find the y-axis angle using:

toDegrees(atan2(A.z, A.x) - atan2(B.z, B.x))

I encountered an issue where it provided incorrect results. Does anyone know how to rectify this problem?

Many thanks in advance!

javascriptthree.jslinear-algebraangleeuler-angles

Answer №1

Utilizing Vector3.angleTo directly will provide the angle in radians. For easy readability, I have converted it to degrees by multiplying it by 180 degrees/pi rad= 1.

// It's important to note that v1 points towards the x-axis.
const v1 = new THREE.Vector3(10,0,0);
const v2 = new THREE.Vector3(3,3,0);
const v3 = new THREE.Vector3(0, 50, 23);
// Angle between v1 and v2
console.log(v1.angleTo(v2)*180/Math.PI)
// The operation is commutative
console.log(v2.angleTo(v1)*180/Math.PI)
// An example where angle is at 90 degrees
console.log(v1.angleTo(v3)*180/Math.PI)
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

This allows for determining angles in any direction. For instance, if you need the angle to a plane, it can be calculated using ans(a - 90), with 'a' representing the angle in degrees to the normal vector of the plane.

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 innerhtml (or innertext) with the h() function for adding content?

Due to certain requirements, I need to utilize virtual DOM. Below is the code snippet that I am working with: // test.js import { h, ref } from 'vue' const ButtonCounter = { name: 'button-counter', props: { tag: { type: S ...

javascriptvue.jsvuejs3

Cypress and Cucumber collaborate to reinitialize the requests within Next Js

In my upcoming project with Next.js, I am utilizing Cypress for testing a specific page. The objective is to validate two scenarios: 1. Successful outcome and 2. Error handling when a user encounters an issue. Before(() => { return void cy.server() ...

javascriptnext.jscypress

Concealing a form after submission using JavaScript

After submitting the form, I am attempting to hide it and display a loading GIF. I've experimented with various methods, including changing ClassName to Id, but haven't had success. This is for a school project, and I've spent a significant ...

javascriptphphtmljquerycss

Utilizing NodeJS to initiate an http request and interact with a hyperlink

I am implementing website conversion testing and want to modify this code so that 10% of the http requests also click on a specific #link within the page. What additional code do I need to achieve this? var http = require('http'); http.createSer ...

javascriptnode.jsasynchronoushttprequest

Is it possible to execute a controller function only when the textarea has completely loaded?

My current setup includes a textarea as shown below: <textarea rows="3" maxlength="144" ng-maxlength="144" type="text" name="testPost" id="testPost_{{item.id}}" ng-init="focusText('testPost', item.id)" ng-model=" ...

javascriptangularjs

Steps for including a path to a base64 encoded image

I am currently facing a challenge in embedding images into my emails where I need to encode them using an online tool. The issue I am encountering is that the email template I am using has a dynamic URL, with ${loginurl}/images as the path to my image. H ...

javascripthtmlhtml-email

Having trouble with implementing both filter and infinite scroll simultaneously in an Ionic list?

I've encountered an issue with my ionic hybrid app related to angularjs filters. The code snippet below showcases the problem: <input type="search" placeholder="Search personalities" ng-model="name" ng-change='alert("changed!")&apo ...

javascriptangularjsionic-framework

Integrating a conditional statement into the existing for loop code to conceal the covers

My goal is to hide the covers after they are clicked using an if statement within the for loop code. I believe this is where it should be placed. Trying to prevent this action from happening. https://i.sstatic.net/eLSto.png I made an attempt at achievin ...

javascriptfor-loopif-statement

Updating padding through local storage does not function as intended

I recently added two buttons to my website for adjusting the padding. While they are functional, I find myself manually setting the padding for nav, main, and footer in the CSS. Here is the snippet of the code: main { padding: 20px 25%; } footer { ...

javascripthtmljquerycss

Choose the ngModel option from the dropdown menu

I have a project where I need the first question from a list to be displayed automatically. I found an example of how to do this using the index, like so: <select> <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selec ...

javascripthtmlangularangular-ngmodelangular2-ngmodel

I am interested in incorporating various forms within this code

I followed an online tutorial to create this code, and I've made some edits myself, mainly related to the buttons that display information. However, I'm still learning and struggling with adding different forms to each section. I would really app ...

javascripthtmlcssdeployment

What is the reason behind not being able to assign identical names to my SailsJS models and MySQL tables?

Recently diving into Sails JS, I found myself in unfamiliar territory with RESTful APIs. Following the guide, I created a User model to correspond with my existing users table. Adding attributes based on the table's columns was straightforward, and a ...

javascriptmysqlmodel-view-controllerexpresssails.js

The component you are trying to import requires the use of useState, which is only compatible with a Client Component. However, none of the parent components have been designated with the "use client" tag

I encountered an issue with the code snippet below in my Next.js app directory when utilizing useState: When trying to import a component that requires useState, I received this error message. It seems that the parent components are marked as Server Co ...

javascriptreactjsnext.js

Creating animated direction indicators in the "aroundMe" style with ngCordova

I am attempting to recreate a compass or arrow similar to the one featured in the AroundMe Mobile App. This arrow should accurately point towards a pin on the map based on my mobile device's position and update as I move. I have been struggling to fi ...

javascriptangularjsgoogle-mapsionic-frameworkngcordova

What is the best way to eliminate duplicate items in JavaScript?

Note: I am aware that we use Set to eliminate duplicates in an array. I have a date dropdown. When I select a date, it displays the date correctly in a list. However, the problem arises when I select an already chosen date, it still shows up in the list. ...

javascriptreactjs

What could be causing the data toggle feature in my navbar to not work on Bootstrap?

Here is a code snippet to create a simple collapsible navbar with Bootstrap 5 that includes a logout button. However, the data toggle feature for the logout button doesn't seem to work when clicked. Any suggestions on how to fix this? <!DOCTYPE ...

javascripthtmljquerycssbootstrap-5

Choose an item from a list that does not have a particular class

Here is a list of items: <ul id='myList'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li class='item-selected'>Item 4</li> <li>Item 5</li> & ...

javascriptjqueryhtmlcss

issue involving extension that interrupts downloads

Trying to develop a browser extension that can intercept downloads and automatically rename them. manifest.json: { "name": " Book Renamer", "description": "Automatically rename downloaded ebooks from gutenberg.or ...

javascriptjqueryjsongoogle-chromegoogle-chrome-extension

What is causing my JavaScript not to load properly within Bootstrap tabs?

I am facing an issue with my website which has Bootstrap 4 tabs implemented in a blade template. The problem arises when there are tabs within tabs, and upon clicking one tab, the slicks Javascript plugin that I created does not load on other tabs. It on ...

javascriptjquerylaravel-5.4bootstrap-4slick.js

Would it be frowned upon in JavaScript to use "if (somestring in {'oneoption':false, 'secondoption':false})"?

Is the use of this construct considered a bad practice in JavaScript and could it lead to unexpected behavior? if (e.target.name in {name: '', number: ''}) { // do something } This code checks if the 'name' attribute of an ...

javascriptperformance