https://github.com/iluna007/portfolio_05_threejs_journey_04_landpage_portfolio

An interactive 3D scroll animation built with Three.js, featuring real-time color customization, scroll-triggered object rotation, and parallax camera movement. Includes a GUI for material color changes and uses GSAP for smooth animations.
https://github.com/iluna007/portfolio_05_threejs_journey_04_landpage_portfolio

javascript learning-by-doing threejs vitejs web-render

Last synced: about 1 month ago
JSON representation

An interactive 3D scroll animation built with Three.js, featuring real-time color customization, scroll-triggered object rotation, and parallax camera movement. Includes a GUI for material color changes and uses GSAP for smooth animations.

• Host: GitHub
• URL: https://github.com/iluna007/portfolio_05_threejs_journey_04_landpage_portfolio
• Owner: iluna007
• Created: 2024-10-16T20:10:28.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-16T20:11:35.000Z (3 months ago)
• Last Synced: 2024-10-31T23:08:57.957Z (3 months ago)
• Topics: javascript, learning-by-doing, threejs, vitejs, web-render
• Language: JavaScript
• Homepage: https://portfolioil.netlify.app/
• Size: 14.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Interactive 3D Scroll Animation with Three.js

This project creates a 3D scene with multiple objects and particles, where the user can interact by scrolling and moving the mouse. The objects animate as the user scrolls, and mouse movement creates a parallax effect. All animations and object colors can be modified via an interactive GUI.

Features

Scroll-based 3D object animations with GSAP.

Real-time material color changes through GUI.

Interactive mouse-based parallax effect on camera movement.

Particles system integrated with scene objects.

## Setup

Download [Node.js](https://nodejs.org/en/download/).

Run this followed commands:

``` bash

# Install dependencies (only the first time)

npm install

# Run the local server at localhost:8080

npm run dev

# Build for production in the dist/ directory

npm run build

```