Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oguzhan18/3d-model-designer
3D Model Designer - a revolutionary Angular application that empowers you to create, manipulate, and customize 3D models effortlessly. With an intuitive interface and advanced Three.js integration, this tool is perfect for both beginners and seasoned professionals in the field of 3D modeling.
https://github.com/oguzhan18/3d-model-designer
angular threejs threejs-model
Last synced: 3 months ago
JSON representation
3D Model Designer - a revolutionary Angular application that empowers you to create, manipulate, and customize 3D models effortlessly. With an intuitive interface and advanced Three.js integration, this tool is perfect for both beginners and seasoned professionals in the field of 3D modeling.
- Host: GitHub
- URL: https://github.com/oguzhan18/3d-model-designer
- Owner: oguzhan18
- Created: 2024-07-01T22:14:47.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2024-08-07T11:54:52.000Z (6 months ago)
- Last Synced: 2024-08-08T14:41:21.786Z (6 months ago)
- Topics: angular, threejs, threejs-model
- Language: TypeScript
- Homepage:
- Size: 141 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 3D Model Designer
Welcome to the **3D Model Designer** - a revolutionary Angular application that empowers you to create, manipulate, and customize 3D models effortlessly. With an intuitive interface and advanced Three.js integration, this tool is perfect for both beginners and seasoned professionals in the field of 3D modeling.
## Features
### 1. Drag-and-Drop Tools
Easily add various 3D shapes (cube, sphere, cylinder, cone) to your scene by dragging and dropping them from the toolbox. Each shape can be customized and positioned to your liking.
### 2. Camera Controls
Navigate your 3D scene with ease using the integrated camera controls. Move the camera up, down, left, or right to get the perfect view of your models.
### 3. Object Properties Panel
Select any 3D object to access and modify its properties, including color, position, and scale. Make precise adjustments to bring your creative vision to life.
### 4. Export and Import Models
Export your 3D models in STL format for use in other applications or for 3D printing. Import STL files to continue working on existing models.
### 5. Dark Mode Toggle
Switch between light and dark mode to suit your preference or working environment. Enjoy a comfortable and visually pleasing experience.
## Getting Started
### Prerequisites
- Node.js
- Angular CLI
### Installation
1. Clone the repository:
```bash
git clone https://github.com/oguzhan18/3d-model-designer.git
```
2. Navigate to the project directory:
```bash
cd 3d-model-designer
```
### Running the Application
Start the development server:
```bash
ng serve
```
Open your browser and navigate to http://localhost:4200 to see the application in action.
## Usage
### Adding and Manipulating Objects
1. Drag a shape from the "Tools" panel and drop it onto the canvas.
2. Select the object to view and edit its properties in the "Properties" panel.
3. Use the camera controls to navigate around the scene and get the best view.
### Exporting Models
Click the export button to download your 3D model in STL format. The file can be used in other 3D applications or for 3D printing.
### Importing Models
Use the file input to load STL files into the application. Continue working on your models seamlessly.
## Technical Details
### Built With
**Angular** - Frontend framework for building dynamic web applications.
**Three.js** - A powerful 3D library that makes WebGL simpler.
**Tailwind CSS** - A utility-first CSS framework for styling.
### File Structure
* src/app: Angular components and services.
* src/assets: Static assets such as fonts and images.
* src/styles: Global styles and theme settings.