https://github.com/yousseffdil/three-js-tracker-object-mouse
A Three.js box with one face always oriented toward the mouse
https://github.com/yousseffdil/three-js-tracker-object-mouse
3d three-js three-js-example
Last synced: 4 months ago
JSON representation
A Three.js box with one face always oriented toward the mouse
- Host: GitHub
- URL: https://github.com/yousseffdil/three-js-tracker-object-mouse
- Owner: yousseffdil
- Created: 2024-08-08T20:50:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-08T20:59:36.000Z (almost 2 years ago)
- Last Synced: 2025-06-30T22:37:17.233Z (12 months ago)
- Topics: 3d, three-js, three-js-example
- Language: JavaScript
- Homepage: https://three-js-tracker-object-mouse.vercel.app
- Size: 9.66 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Three.js Interactive 3D Cube
## Overview
This project showcases a dynamic 3D scene created with Three.js, featuring an interactive 3D cube that follows the cursor. The cube is textured, projects shadows, and is illuminated by a point light. The background of the canvas is transparent, creating a clean and visually appealing effect.
## Features
- **3D Cube**: A textured cube rotates to face the cursor.
- **Shadows**: The cube casts shadows on a plane beneath it.
- **Transparent Background**: The canvas background is transparent, making the scene adaptable to various web designs.
- **Interactive**: The cube responds to mouse movements, enhancing the interactivity of the scene.
## Setup
To get started with this project, follow these steps:
1. **Clone the Repository**
```bash
git clone https://github.com/yourusername/threejs-interactive-cube.git
cd threejs-interactive-cube
```
2. **Install Dependencies**
This project uses Three.js from a CDN, so no additional dependencies need to be installed.
3. **Set Up the Project**
Make sure you have the following files in your project directory:
- `index.html`: The main HTML file.
- `texture.jpg`: Your texture file. Place it in the correct path (`../texture.jpg`) or update the path in the JavaScript code accordingly.
4. **Run the Project**
Open `index.html` in your preferred web browser to view the project. You can use a local server for a more robust development environment, such as [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.liveServer) in Visual Studio Code.
## Code Explanation
- **Scene Setup**: Creates a Three.js scene, a camera, and a renderer. The renderer is configured to have a transparent background.
- **Cube**: A `Mesh` with a `BoxGeometry` and a `MeshStandardMaterial` that has a texture applied. The cube is set to cast shadows.
- **Lighting**: A `PointLight` is added to illuminate the scene and cast shadows.
- **Shadow Plane**: A `PlaneGeometry` with `ShadowMaterial` is used to receive shadows from the cube.
- **Mouse Interaction**: Updates the cube's rotation to face the cursor using mouse coordinates.
- **Animation Loop**: Continuously updates the scene to render the cube's interaction with the cursor.
## Customization
- **Texture**: Replace `../texture.jpg` with your own texture file.
- **Lighting**: Adjust the `PointLight` parameters (position, intensity) to suit your scene's needs.
- **Shadow Plane**: Modify the plane's size and position as needed.
## Acknowledgments
- [Three.js](https://threejs.org/) - The JavaScript library used for 3D graphics.
## Contact
For questions or feedback, please reach out to [fdilyoussef@gmail.com](mailto:fdilyoussef@gmail.com).
---