https://github.com/mattazz/theeyethreejs

This project is a test environment for experimenting with 3D graphics using JavaScript.
https://github.com/mattazz/theeyethreejs

framer-motion framer-motion-3d javascript react react-three-fiber threejs

Last synced: 5 days ago
JSON representation

This project is a test environment for experimenting with 3D graphics using JavaScript.

• Host: GitHub
• URL: https://github.com/mattazz/theeyethreejs
• Owner: mattazz
• Created: 2024-10-16T16:17:13.000Z (21 days ago)
• Default Branch: main
• Last Pushed: 2024-10-17T01:16:50.000Z (21 days ago)
• Last Synced: 2024-11-01T17:06:19.435Z (5 days ago)
• Topics: framer-motion, framer-motion-3d, javascript, react, react-three-fiber, threejs
• Language: JavaScript
• Homepage: https://mattazz.github.io/TheEyeThreeJS/
• Size: 3.62 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple Eye using ThreeJS, React Three Fiber, and Framer Motion

# 3D JS Test

This project is a test environment for experimenting with 3D graphics using JavaScript.

![sample](./sample.gif)

## Technologies Used

- **Three.js**:

- **React Three Fiber**: 

- **Framer Motion**:

- **Vite**: 

## Mouse Tracking

The eye follows the mouse cursor using useSpring and useMotionValue from Framer Motion. These hooks create smooth animations for the eye's rotation based on the mouse position.

## Grain Background

The grainy background effect is achieved using a custom shader. The shader is applied to a large plane positioned behind the eye model.