3D-Orientation Demo (3DOri)

Live at kuldeepjambhulkar.github.io/3DOri

Overview

3DOri is a tool that 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.

Features

• Interactive Controls: Adjust the pitch, roll, and yaw of the plane using range sliders.
• Grid Helpers: Toggle grid helpers on and off to better visualize the 3D space.
• Reset Button: Quickly reset the orientation of the plane to its default state.
• Real-Time Values: Display the current pitch, roll, and yaw values.

Coordinate System

This tool uses the right-hand coordinate system, which is a common convention in 3D graphics:

• X-axis: Points to the right.
• Y-axis: Points forward.
• Z-axis: Points upward.

Plane Colors

The plane in this tool 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.

Getting Started

Prerequisites

• A modern web browser
• Internet connection to load Three.js and other dependencies

Installation

1. Clone the repository:

   git clone https://github.com/your-username/3DOri.git

2. Navigate to the project directory:

   cd 3DOri

Usage

1. Open index.html in your web browser.
2. Use the sliders to adjust the pitch, roll, and yaw of the plane.
3. Toggle the grid helpers using the checkbox.
4. Click the reset button to reset the plane's orientation.

Acknowledgements

• Three.js - JavaScript 3D library