https://github.com/kuldeepjambhulkar/3dori
3D-Orientation Demo (3DOri) is a web-based 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, providing a visual understanding of 3D rotations.
https://github.com/kuldeepjambhulkar/3dori
3d 3d-graphics geometry threejs threejs-example
Last synced: 3 months ago
JSON representation
3D-Orientation Demo (3DOri) is a web-based 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, providing a visual understanding of 3D rotations.
- Host: GitHub
- URL: https://github.com/kuldeepjambhulkar/3dori
- Owner: kuldeepjambhulkar
- Created: 2025-02-10T14:18:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-10T15:07:09.000Z (over 1 year ago)
- Last Synced: 2025-04-05T20:44:13.042Z (over 1 year ago)
- Topics: 3d, 3d-graphics, geometry, threejs, threejs-example
- Language: JavaScript
- Homepage: https://kuldeepjambhulkar.github.io/3DOri
- Size: 16.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 3D-Orientation Demo (3DOri)
Live at [kuldeepjambhulkar.github.io/3DOri ](https://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:
```sh
git clone https://github.com/your-username/3DOri.git
```
2. Navigate to the project directory:
```sh
cd 3DOri
```
### Usage
1. Open [index.html](http://_vscodecontentref_/0) 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](https://threejs.org/) - JavaScript 3D library