https://github.com/ariyanmlzm/threejs-react-3dshowcase

🚀 3D app that can be used to showcase a 3d model or product, created with React and Three.js.
https://github.com/ariyanmlzm/threejs-react-3dshowcase

3d-models frontend gsap javascript react tailwindcss threejs typescript webapp webdevelopment

Last synced: 2 months ago
JSON representation

🚀 3D app that can be used to showcase a 3d model or product, created with React and Three.js.

• Host: GitHub
• URL: https://github.com/ariyanmlzm/threejs-react-3dshowcase
• Owner: AriyanMLZM
• Created: 2025-09-22T15:30:58.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-09-22T16:16:48.000Z (9 months ago)
• Last Synced: 2025-09-22T18:33:13.143Z (9 months ago)
• Topics: 3d-models, frontend, gsap, javascript, react, tailwindcss, threejs, typescript, webapp, webdevelopment
• Language: TypeScript
• Homepage: https://ariyanmlzm.github.io/threejs-react-3DShowcase/
• Size: 1.59 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Minimal 3d Showcase

3d app that can be used to showcase a 3d model or product.

[![Youtube 3d Showcase](https://i.postimg.cc/g2ts4n46/thum.png)](https://www.youtube.com/watch?v=TtGYcrUBqYc)

[👆🏼 YouTube](https://www.youtube.com/watch?v=TtGYcrUBqYc)

## Techs

  

    Three.js

    React.js

    Typescript

  

  

    

    

    

  

  

    Tailwindcss

    Gsap

    Blender

  

  

    

    

    

  

  

    Vite

    

    

  

  

    

    

    

  

## Features

### Main

- Orbit Controls to explore the scene.

- View Hotspots to enhance the showcase.

- Smooth Camera animations to professionalize the showcase.

### Technical

- Using **React-Three-Fiber** & **React-Three-Drei** to use the best of Three.js in React.js.

- Using **Gsap** for smooth camera animations.

- Using **Tailwindcss** for styling.

- Using **Vite** as project builder.

- Using **Typescript** for better development.

- Complete **CSR** app with React.js.

##

[![](https://i.postimg.cc/pTq6WPjr/card.png)](https://github.com/AriyanMLZM)