https://github.com/ashgole/aastra_threejs_drawwall

This project is a 3D wall-drawing tool using React Three Fiber and Jotai for state management, allowing users to toggle between 2D and 3D views. Users can draw walls interactively on a plane, with dynamic positioning and rotation based on user input.
https://github.com/ashgole/aastra_threejs_drawwall

3d html5 react react-three-fiber reactjs tailwindcss threejs

Last synced: about 2 months ago
JSON representation

This project is a 3D wall-drawing tool using React Three Fiber and Jotai for state management, allowing users to toggle between 2D and 3D views. Users can draw walls interactively on a plane, with dynamic positioning and rotation based on user input.

• Host: GitHub
• URL: https://github.com/ashgole/aastra_threejs_drawwall
• Owner: ashgole
• Created: 2024-11-14T14:29:24.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-15T03:45:34.000Z (2 months ago)
• Last Synced: 2024-11-27T03:40:31.222Z (2 months ago)
• Topics: 3d, html5, react, react-three-fiber, reactjs, tailwindcss, threejs
• Language: JavaScript
• Homepage: https://ashgole.github.io/aastra_threejs_drawwall/
• Size: 1.51 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  





 We offer freelance web development using 
 MERN, NextJS and ThreeJS.



# Threejs DrawWall Project for Astra

### This project is a 3D wall-drawing tool using React Three Fiber and Jotai for state management, allowing users to toggle between 2D and 3D views. Users can draw walls interactively on a plane, with dynamic positioning and rotation based on user input. The project includes controls for panning, zooming, and adjusting camera angles in 3D mode, providing an intuitive interface for 3D modeling and visualization.

## Resource links

webapp : https://ashgole.github.io/aastra_threejs_drawwall/

Github : https://github.com/ashgole/aastra_threejs_drawwall

## Tags

`React`, `React Three Fiber`, `Jotai`, `3D Modeling`, `Interactive Drawing`, `2D/3D Toggle`, `Camera Controls`, `Three.js`, `3D Visualization`, `Frontend Development`, `UI Design`

## Screenshots

![page 1](https://github.com/ashgole/aastra_threejs_drawwall/blob/main/screenshots/1.png)

![page 2](https://github.com/ashgole/aastra_threejs_drawwall/blob/main/screenshots/2.png)

## how to run

```

git clone https://github.com/ashgole/aastra_threejs_drawwall.git

cd aastra_threejs_drawwall

npm i

npm run dev

```