What, Why & How...

This project demonstrates the concepts of yaw, pitch, and roll using Three.js. It allows users to interactively adjust the orientation of a plane in 3D space using sliders.

Philosophy of Coordinate Systems

In 3D graphics, the coordinate system is crucial for defining the position and orientation of objects. This project uses the following conventions:

• Pitch (X-axis): Rotation around the X-axis.
• Roll (Y-axis): Rotation around the Y-axis.
• Yaw (Z-axis): Rotation around the Z-axis.

The camera is positioned on the negative Y-axis, looking towards the positive Y-axis, with the Z-axis pointing upwards. This setup helps in visualizing the rotations clearly.

Right-Hand Coordinate System

This project uses the right-hand coordinate system, which is a common convention in 3D graphics. In this system:

• The X-axis points to the right.
• The Y-axis points forward.
• The Z-axis points upward.

Plane Colors

The plane in this project has distinct colors for its front and back sides:

• Front: Orange
• Back: Teal

This color distinction helps in understanding the orientation of the plane as it rotates.

===========================

Code available on GitHub

Tool is live here

Note: This tool is made with GitHub Copilot. If you find any discrepancy, please reach out.