What is the process of rotating a vector by 90 degrees to align it with a perpendicular plane, and then adjusting it further by 15 degrees out of

Question

What is the process of rotating a vector by 90 degrees to align it with a perpendicular plane, and then adjusting it further by 15 degrees out of

My ultimate objective is to determine a vector that represents the direction of the green line depicted in the image below, based solely on the positions of the yellow and green dots.
To clarify, the angle of the vector can vary as long as its endpoint lies somewhere on the green-blue surface of the cylinder. Hence, there is 360° freedom around the cylinder, with a limitation of approximately 15° at the edges. The cylinder is positioned perpendicular to the line connecting the yellow and green dots. The length of the vector is insignificant, only the direction matters. My primary challenge lies in figuring out how to derive a vector perpendicular to the one from the Yellow to the green dot. PS: None of these elements are aligned along the x, y, z axis. The grid is not based on the xyz coordinates, but is provided for visualization purposes. https://i.sstatic.net/4OFVc.png

javascript three.js 3d

Answer 1

Answer №1

Provided here is a code snippet that calculates a vector starting from a specified point in a perpendicular direction to the vector between two given points:

function perpendicularVector(pointStart, pointEnd, theta){
    let vDiff = new THREE.Vector3(0, 0, 0)
        .subVectors(pointEnd, pointStart) 
        .normalize()
  
    let V = new THREE.Vector3(
        vDiff.y + vDiff.x * vDiff.z,
        vDiff.y * vDiff.z - vDiff.x,
        -(vDiff.x * vDiff.x) - vDiff.y * vDiff.y
    )

    return
        V   .applyAxisAngle(vDiff, theta)
            .applyAxisAngle( new THREE.Vector3().multiplyVectors(V, vDiff).normalize(), 15*Math.PI/180 )
}

For illustration purposes, a basic demonstration of the functionality of the above code is provided below:

(Use the mouse to zoom, rotate, and pan in the rendered output after running the snippet)

body {
  font-family: sans-serif;
  margin: 0;
  background-color: #e2cba9;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
}

<div id="app"></div>

<script type="module">
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26524e5443436616081714170817">[email protected]</a>/examples/jsm/controls/OrbitControls.js";

import * as THREE from "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a5e42584f4f6a1a041b181b041b">[email protected]</a>/build/three.module.js";

var scene = new THREE.Scene, theta = 0;
let point1 = new THREE.Vector3(4, 2, 1),
  point2 = new THREE.Vector3(0, 3, 3);

// Rest of the code provided for visualization and demonstration

...

// End of demonstration code snippet for showcasing the functionality

</script>

Answer 2

Provided here is a code snippet that calculates a vector starting from a specified point in a perpendicular direction to the vector between two given points:

function perpendicularVector(pointStart, pointEnd, theta){
    let vDiff = new THREE.Vector3(0, 0, 0)
        .subVectors(pointEnd, pointStart) 
        .normalize()
  
    let V = new THREE.Vector3(
        vDiff.y + vDiff.x * vDiff.z,
        vDiff.y * vDiff.z - vDiff.x,
        -(vDiff.x * vDiff.x) - vDiff.y * vDiff.y
    )

    return
        V   .applyAxisAngle(vDiff, theta)
            .applyAxisAngle( new THREE.Vector3().multiplyVectors(V, vDiff).normalize(), 15*Math.PI/180 )
}

For illustration purposes, a basic demonstration of the functionality of the above code is provided below:

(Use the mouse to zoom, rotate, and pan in the rendered output after running the snippet)

body {
  font-family: sans-serif;
  margin: 0;
  background-color: #e2cba9;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
}

<div id="app"></div>

<script type="module">
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26524e5443436616081714170817">[email protected]</a>/examples/jsm/controls/OrbitControls.js";

import * as THREE from "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a5e42584f4f6a1a041b181b041b">[email protected]</a>/build/three.module.js";

var scene = new THREE.Scene, theta = 0;
let point1 = new THREE.Vector3(4, 2, 1),
  point2 = new THREE.Vector3(0, 3, 3);

// Rest of the code provided for visualization and demonstration

...

// End of demonstration code snippet for showcasing the functionality

</script>

Answer 3

Answer №2

Utilizing mathematical calculations, achieving this is entirely feasible. The concept you are referring to is that of "Orthogonal vectors", which denotes vectors that are perpendicular to one another. The radius of the cylinder is perpendicular to the line connecting the blue and yellow points.

Nonetheless, given that you are already leveraging Three.js, you can delegate the complex tasks to it by using an Object3D.

// Defining vectorA (center, green)
const vecA = new THREE.Vector3(xA, yA, zA);

// Defining vectorB (destination, yellow)
const vecB = new THREE.Vector3(xB, yB, zB);

// Creating a helper object
const helper = new THREE.Object3D();

// Positioning the helper at vecA
helper.position.copy(vecA);

// Orienting the helper towards vecB
helper.lookAt(vecB);

// Moving the helper perpendicularly along its own y-axis
const cylinderRadius = 27;
helper.translateY(cylinderRadius);

// The final position is now determined!
console.log(helper.position);

In the illustration below, the helper Object3D is represented as a red line solely to provide a visualization of its rotation and position, however, in actuality, it remains invisible unless a Mesh is added to it.

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

If you wish to adjust by adding or subtracting 15 degrees from the perpendicular, you can rotate the helper along its own x-axis prior to using translateY()

const xAngle = THREE.MathUtils.degToRad(15);
helper.rotateX(xAngle);

const cylinderRadius = 27;
helper.translateY(cylinderRadius);

Answer 4

Utilizing mathematical calculations, achieving this is entirely feasible. The concept you are referring to is that of "Orthogonal vectors", which denotes vectors that are perpendicular to one another. The radius of the cylinder is perpendicular to the line connecting the blue and yellow points.

Nonetheless, given that you are already leveraging Three.js, you can delegate the complex tasks to it by using an Object3D.

// Defining vectorA (center, green)
const vecA = new THREE.Vector3(xA, yA, zA);

// Defining vectorB (destination, yellow)
const vecB = new THREE.Vector3(xB, yB, zB);

// Creating a helper object
const helper = new THREE.Object3D();

// Positioning the helper at vecA
helper.position.copy(vecA);

// Orienting the helper towards vecB
helper.lookAt(vecB);

// Moving the helper perpendicularly along its own y-axis
const cylinderRadius = 27;
helper.translateY(cylinderRadius);

// The final position is now determined!
console.log(helper.position);

In the illustration below, the helper Object3D is represented as a red line solely to provide a visualization of its rotation and position, however, in actuality, it remains invisible unless a Mesh is added to it.

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

If you wish to adjust by adding or subtracting 15 degrees from the perpendicular, you can rotate the helper along its own x-axis prior to using translateY()

const xAngle = THREE.MathUtils.degToRad(15);
helper.rotateX(xAngle);

const cylinderRadius = 27;
helper.translateY(cylinderRadius);

What is the process of rotating a vector by 90 degrees to align it with a perpendicular plane, and then adjusting it further by 15 degrees out of

Answer №1

Answer №2

Similar questions

Guide to retrieving PDFs and images from a Spring Application as an API response and manipulating the data using JS/React

Is there a way to identify when a radio button's value has changed without having to submit the form again?

Is there a way to modify the material of individual objects in THREE.js without creating separate Meshes?

Obtain the value stored in the session

Raspberry Pi encountering a TypeError with Node.js async parallel: "task is not a function" error

Navigate through intricate nested JSON array structures in JavaScript

Utilizing a function within the App.js file located in the public folder using React JS

AngularJS: Advanced Routing for Dynamic Web Applications

What is the best way to modify a CSS property using logical operators in JQuery?

Use jQuery's change method to initiate a hidden file input

Creating a repository of essential functions in AngularJSDiscover the steps to set up a

A bounding box aligned with the camera's perspective

Clicking to enter fullscreen mode on a website will result in the Fullscreen API automatically closing

The Vue template is not able to recognize the Pug language syntax within the .vue file

Stop users from being able to copy text on their smartphones' internet browsers

Is there a way to temporarily toggle classes with jQuery?

What is the best way to transition an absolute positioned element from right to center?

What could be the reason for the lack of controller updates despite changes made to the service

JQuery clockpicker failing to fire change event for input field

The application is functional, however, the initial controller within is experiencing difficulties