Repository files navigation

TRIS (means 3 in klamegna) + D

Last I cheaked Many large corporations already use 3D graphics to showcase their products.showcasing products andplace 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 ...

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

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

• 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 tryingcheck documentation

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

clone

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

Installation

Install the project dependencies using npm :

npm install

Running the Project

npm run dev

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

feel free to contact ->send email