What is the method for determining the new point coordinates and direction vector after a rotation of degrees in three.js?

How can I determine the coordinates of point A to H after rotating a certain number of degrees and aligning them with direction vector (-42, 51, 11) using three.js?

Thank you in advance for your help and please forgive any mistakes in my English. Best regards.

const tree = [
    [   0,   0,   0],  // A
    [   2, 151,   2],  // B
    [ -62, 283,  63],  // C
    [  62, 296, -58],  // D 
    [-104, 334,  74],  // E
    [ -58, 338,  45],  // F
    [  67, 403, -55],  // G
    [ 105, 365, -86],  // H
  ] 

https://i.sstatic.net/Mw3ED.jpg

Answer №1

This snippet of code will rotate all vectors in the tree by 90 degrees around the specified axis defined as a vertex [-42, 51, 11]. The rotation axis is determined by creating a line from the origin [0,0,0] to the vertex [-42, 51, 11], ensuring that point A remains unchanged after the rotation.

const tree = [
    [   0,   0,   0],  // A
    [   2, 151,   2],  // B
    [ -62, 283,  63],  // C
    [  62, 296, -58],  // D 
    [-104, 334,  74],  // E
    [ -58, 338,  45],  // F
    [  67, 403, -55],  // G
    [ 105, 365, -86],  // H
  ] 

// Define the rotation axis:
let axis = new THREE.Vector3(-42, 51, 11)

// Normalize the axis:
axis.normalize()

// Create the matrix:
let matrix = new THREE.Matrix4()

// Set the rotation angle in radians:
let radians = 90 * Math.PI / 180

// Apply the rotation to the matrix:
matrix.makeRotationAxis(axis, radians)

// Rotate all vectors in the tree using the new matrix
let newTree = []
for(const vector of tree) {
  // Define the vector3 object:
  let vec = new THREE.Vector3(vector[0], vector[1], vector[2])
  vec.applyMatrix4(matrix)
  newTree.push(vec.toArray()) // You can choose to keep the original Vector3 object without converting it to array
}

// The rotated vectors are now stored in newTree
console.log(newTree)

Check out the live version at https://codepen.io/mtveerman/pen/PoZZpvw for a demonstration

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 the state variable not being properly set by using React's setState within the useCallback() hook?

Within a React FunctionComponent, I have code that follows this pattern: const MyComponent: React.FunctionComponent<ISomeInterface> = ({ someArray, someFunction }) => { const [someStateObjVar, setSomeStateObjVar] = React.useState({}); const [ ...

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

Within my menu, I have a section for portfolios that transforms into a dropdown on desktop hover and mobile click. The issue arises on mobile devices where the first click displays the menu correctly, but subsequent clicks do not trigger any change. I att ...

Aggregate X and Y values based on a key in a scatter plot using dc.js

Here is a glimpse of my dataset: var items = [ {name: "X", duration: 1, quantity: 2}, {name: "X", duration: 2, quantity: 1}, {name: "Y", duration: 1, quantity: 4}, {name: "X", duration: 3, quantity: 1 ...

Steps to redirect to a webpage by clicking on an image without relying on anchor tags

Is it possible to redirect to a new webpage without using an anchor tag when someone clicks on an image? Below is my code for the image. <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_l ...

Differences Between Vuetify Breakpoints and CSS Helper Classes

As I browse through the Vuetify documentation and various code snippets on the web, I often come across examples that mention using either a Vuetify breakpoint or a CSS helper class to make an element responsive to screen size changes. Is there a preferre ...

Prevent the onscroll animation of the SVG from activating immediately upon its appearance on the screen

I am in the process of building a website that incorporates SVG technology. My issue is with some SVG icons that have animated effects when scrolling, but the animation triggers as soon as they come into view. What I really need is for these icons to sta ...

Merge two separate mongodb records

Just getting started with javascript / express / mongodb. For my initial project, I am working on a simple task manager where todos are categorized by priority - "high," "mid," or "low." However, I am facing an issue when trying to display different entri ...

The LatinSquare.js script has exceeded the maximum call stack size limit

In my current project, I am utilizing the latin-square library for node.js within a loop to search for a specific pattern. However, I encountered an error after running the script for 2 minutes: RangeError: Maximum call stack size exceeded var latin ...

What could be causing my GET route to return an empty array?

I've been attempting to retrieve an event by its id, but for some reason, I'm receiving an empty array as a result in Postman. Below is the code snippet of my route: import { events } from '../../../db.json'; const handler = async (re ...

Effective Ways to Redirect During or After Executing the onClick Function of Button

I am currently working on implementing a feature for my Next.js website. The functionality involves allowing users to create a new group by clicking a button, and then being redirected to an "Invite members" page with the auto-generated group_id included i ...

Is it possible to navigate between jQuery EditInPlace fields using the Tab key?

Seeking advice on implementing tab functionality for a page with multiple jquery EditInPlace fields. The goal is to allow users to navigate between fields by pressing the tab key. Currently using the 'jquery-in-place-editor' plugin available at: ...

Encountering a `Syntax Error` in a Jade view

I am attempting to create a basic chat application using the simple jade view engine with express. Upon running my app, I encountered a syntax error in the following view code, even though it seems quite straightforward. extends layout block scrip ...

Utilizing C# ASP.NET to Extract Data from a Web Page Post JavaScript Execution

Looking to extract all links from a web page in order to review where cookies are being set for compliance with UK legislation. In an effort to streamline the process, I am exploring automation options to save time. However, a challenge I am facing is tha ...

Encountering an issue with blogs.map function in a Next.js application

import Head from 'next/head' import { useState } from 'react' import Image from 'next/image' import styles from '../styles/Home.module.css' const Home = (props) => { const [blogs, setblogs] = useState(props.dat ...

Is there a way to distinguish mouseout/leave events based on the side in jQuery?

How can I detect if the mouse event has moved away from a particular side of an element? For example, I have a DIV with a mouseover/mouseenter event and I only want to activate the action when the mouse leaves from the left or right side of the DIV. If it ...

Is it possible for AJAX JSON response to return both accurate and undefined values sporadically?

In the process of developing JavaScript code to pinpoint the smallest unused number within a specified range of numbers, I encountered an issue with the AJAX request. Despite successfully retrieving all used numbers in the designated range, some undefined ...

How to create flexible, non-url-changing layout states with angular-ui-router?

My Objective I am working with two different styles of display: "Normal": [ Header | Body | Footer ] - primarily used for most views "Discreet": [ Body ] only, centered on screen - ideal for states like login/register, errors etc. These display styles ...

Cypress: Uncovering the method invoked by a button click

I'm currently utilizing Vue3 with Vite and Cypress. My Vue3 component utilizes the script setup SFC syntax. Below is the code snippet for my component: <template> <div> <button data-cy="testBtn" @click="btnClick()&q ...

How to Overcome Read-only HTML Components in Selenium with Python?

I am working on automating a task using Selenium in Python, and part of it involves selecting a date. The website I am testing has an input box for date selection that displays a standard date table when clicked. Unfortunately, the input text box is read- ...

A demonstration of VueJS Nested Builder functionality

I am currently exploring VueJS and working on a project to create a simple page builder application that allows users to add sections and subsections. I am seeking guidance on how to properly set up the Vue data property for this functionality. Any advice ...