sgc93 / trisd

Interestingly minimalistic, customizable and user-friendly 3D model displayer tool -- with react, threejs, R3F and voltio

TRISD

TRIS (means 3 in klamegna) + D

A 3D WEB APP

Introduction

Last I cheaked Many large corporations already use 3D graphics to showcase their products.showcasing products and place visualization & prosentation are real world subjects that initiate me to learn 3D website development and do this project.

TRISD has a single major functionality:

• It allows users to display their 3d models (.glb/.gltf file)
  > actually its customizability gives it an intersting feature that enables users to change contents of the page (like changing the logo, updating all hero section text contents, change every components postion, resize texts and the logo, ... ) and have their own ui design ... take it a sreenshoot ... use it for something ... or just play around till you get something ...

Live Demo

https://trisd.netlify.app/ < it will take a little long time to load all data like textures and 3d model ... give it some time 😊.

Screenshots

Intro (Welcoming) Page < have patient to wait rendering while having fun with svg animations



Home Page < play with everything you see in this page



File Uploading Page < enjoy file uploading with drag and drop



3D Model Displayer Page < play around with your displayed 3D model with totally controllable and customizable 3D stage

Tech-Stack

• React.js -- as a front-end library
• Three.js -- rendering and 3d model animating
• React Three Fiber -- creating scene and make it interacting
• React Three Drei -- to get built in 3d related components
• Vite --- project creator
• Tailwind CSS -- styling elements and components
• Framer Motion -- animating react components and elements
• Valtio -- state management (it worths trying check documentation

Features

TRISD has the following intersting features:

• customizble homepage
  - change UI struecture by dragging components, by changing their contents and by styling them
  - change the texture of 3d model object
• file uploading with normal file input method and drag and drop method
• customizing 3d model displaying stage
  - chnage floor texture
• setttings to toggle between page properties
  - enable / disable component draggability
  - enable / disable model rotation , zoom or movement with cursor
  
• customized and animated cursor
• animated introduction page

contribute and use

clone

git clone https://github.com/sgc93/trisd.git
cd trisd

Installation

Install the project dependencies using npm :

npm install

Running the Project

npm run dev

Open http://localhost:5173 in your browser to view the project.

contact

feel free to contact -> send email