Ad Astra Trans Abyssum

Andre's Hack on Vue Forge Episode 5 - 2024

Let's see how this works shall we!

For Related TS, Config & Other Tips see the "Code-Buddy" Page

---

Vue.JS Forge 2024 Speaker - Alvaro Saburido creator of Tres.JS

Vue Forge Excercise - Low Poly 3D Planet 🪐

Quick start repo for Tres.js projects

Features

• Tres.js and latest Three.js
• @tresjs/cientos package pre-installed 📦
• @tresjs/leches GUI controls for debuging 🍰
• Shader support (glsl) with vite-plugin-glsl 🎨

Usage

npx degit tresjs/starter my-tres-project

Install

cd my-tres-project
pnpm install

Run

pnpm dev

Build

pnpm build

The Coordinate Systems Involved

Visualizing the Axes

To solidify the concept, imagine a virtual box where:

• The center of the screen (viewport) is the origin (0,0,0).
• The axes align as follows:

                                          Y+ (moving upwards on the screen)
                                          |
                                          |    / Z- (moving into the screen)
                                          |   /
                                          |  /
                                          | /
  (moving left on screen)  X- ---------(0,0,0)--------- X+  (moving right on screen)
                                         /|
                                        / |
                                       /  |
                                      /   |
       (moving out of the screen) Z+ /    |
                                          |
         (moving downwards on the screen) Y+

In Our Current Scenario

Given this standard described above, let’s reanalyze: The Greek letters ψ, θ, and φ are typically used to describe the three axes in mathematics related to the Euler Angles of Rotation.

• For the Z-axis, Ψ is used. It is pronounced "Psi" (silent-P) in English and "See" in modern Greek. Uppercase Ψ, lowercase ψ or 𝛙; (It's the 23rd letter in the Greek alphabet : ψι psi).
• For the X-axis, Φ is used. It is pronounced "Phy" in English and in modern Greek. Uppercase Φ, lowercase ϕ or φ; (It's the 21st letter in the Greek alphabet : φι fi). - [Alt + 966] = lowercase ϕ and [Alt + 934] = uppercase Φ.
• For the Y-axis, θ is used. It is pronounced "Theta" in English and "Thita" in modern Greek. Uppercase Θ or ϴ, lowercase θ or ϑ; (It's the 8th letter in the Greek alphabet : θι thita). - [Alt + 952] = lowercase θ and [Alt + 920] = uppercase Θ.

Note: The [Alt + numerals] does not work as expected "out of the box" in the VS Code IDE. I have no clue about whether it does in other IDEs, so do some research if you need the functionality. That said, if you want the standard OS behaviour from your [Alt + "KEYs"] to behave as expected, you will need to configure, or reconfigure your VS Code Instance's Keybindings.

---

As a simple alternative, I often refer to Pat Kearns' Keynote Support or the Alt Code Unicode site and simply apply the HTML HEX or DEC values discoverable there. A Quick and easy C&P from Α to Ω ! By using the notation &#x + 0123 + ; for HTML HEX and &# + 123 + ; for HTML DEC the ALT-code values are osed in the 0123 or 123 positions respectively.

---

1. Z-Axis or ψ (Into/Out of the Screen):
As per our POV: Positive +Z moves toward the viewer, and negative -Z moves
into the screen.

2. X-Axis or Φ (Left/Right):
Horizontal movement along the monitor: Positive +X moves right; negative -X moves left.

3. Y-Axis or θ (Up/Down):
Vertical movement along the monitor: Positive +Y moves upward; negative -Y moves downward.

This matches how Three.js interprets the axes, so our intuition aligns perfectly.

Why Orientations and Rotations Might Feel Confusing — It's All About the Object's Origin POV

Remember this one thing: Your "Up" might be my "Down", and as easily... Your "X" can be my "Y"...

In the end, we have to make a decision about who or what will be regarded as the "Centre of the Universe" we're operating in here. This "centre" will be referred to as the "World" or "Global" axis.

The default Euler rotation order in Three.js (XYZ) can sometimes cause confusion:

• X-Axis Rotation : Affects Roll (rotation around the fuselage horizontal X-axis).
• Y-Axis Rotation : Affects Pitch (nose up/down, rotation around vertical Y-axis).
• Z-Axis Rotation : Affects Yaw (nose left/right, rotation around vertical Z-axis).

"Roll", "Pitch" and "Yaw" in 3D Space

When multiple rotations combine, especially with intrinsic rotations, the local axes of the object may change after each applied transformation. This is why the airplane's rotations may feel unintuitive if not carefully isolated.

---

Recommendations

The following is a summary extract from a very interesting explanation (with the math behind it) of Euler's and other's work on Rotation Representation.

In Euler angles, each rotation is imagined to be represented in the post-rotation coordinate frame of the last rotation: Rzyx(ψ,θ,φ) = Rz(ψ) Ry(θ) Rx(φ) — ZYX Euler Angles Yaw(ψ), Pitch(θ), Roll(Φ). In Fixed angles, all rotations are imagined to be represented in the original (fixed) coordinate frame.

R. Platt - Khoury College Four different ways to represent rotation.

Also read Noel Hughes' paper "Quaternion to/from Euler Angle of Arbitrary Rotation Sequence & Direction Cosine Matrix Conversion Using Geometric Methods"

To prevent misinterpretations or mix-ups

In practice while you are writing the code, you can enable a visualization helper for either Tres or Three JS to orientate yourself in the 3D space environment.

Visualization Helper for Debugging

Add a Tres.js or Three.js AxesHelper to visualize the coordinate system in the 3D space.

  <TresAxesHelper
  const
    axesHelper="new"
    Tres.AxesHelper(5);
    scene.add(axesHelper);
  />

This displays the axes directly in the scene:

- Red = (+X , 0 , -X),
- Green = (+Y , 0 , -Y),
- Blue = (+Z , 0 , -Z).

Clarify Local vs Global Axes

When applying rotations, remember that local axes can differ from world/global axes after an initial rotation.

• If needed, convert between world and local axes explicitly.

In Three.js, the transformation hierarchy means that objects have local axes (relative to their parent) and can also be described in terms of the global/world axes. To explicitly convert between these:

Methods to Use in TypeScript

• World to Local: Convert a position in world space to the object’s local coordinate system using:

object.localToWorld(vector);

Example:

const localPosition = new THREE.Vector3(1, 0, 0);
const worldPosition = airplane.localToWorld(localPosition.clone());
console.log('World Position:', worldPosition);

• Local to World: Convert a position in the object’s local space to world space using:

object.worldToLocal(vector);

Example:

const worldPosition = new THREE.Vector3(5, 0, 0);
const localPosition = airplane.worldToLocal(worldPosition.clone());
console.log('Local Position:', localPosition);

Practical Implementation in VS Code:

1. Use the console log approach to check intermediate results.
2. Combine these methods with object.getWorldPosition() and object.getWorldQuaternion() to fetch world-space properties.

Lets try this out next.

---

Log Key Values

Print the object’s position and rotation values at each frame and inspect them to verify that transformations behave as expected.