113 lines
2.9 KiB
Markdown
113 lines
2.9 KiB
Markdown
# Material and Texture Editor
|
|
|
|
This was a fast test to test the ability of OpenAI ChatGPT with Coding.
|
|
|
|
## Overview
|
|
|
|
This project is a self-contained, browser-based 3D scene editor built with Three.js. It provides interactive tools for creating primitive shapes, assigning and editing materials, uploading PBR texture maps, transforming objects, and persisting scene state locally or as a JSON export.
|
|
|
|
The application runs entirely on the client side and requires no build step or backend.
|
|
|
|
## Features
|
|
|
|
* **Interactive 3D Scene**
|
|
|
|
* Orbit camera controls
|
|
* Real-time lighting with shadows
|
|
* Screen Space Ambient Occlusion (SSAO) post-processing
|
|
|
|
* **Primitive Shape Creation**
|
|
|
|
* Box, sphere, cylinder, and plane
|
|
* Add shapes dynamically via UI
|
|
* Objects are selectable and transformable
|
|
|
|
* **Transform Controls**
|
|
|
|
* Translate, rotate, scale, or detach
|
|
* Visual gizmos via `TransformControls`
|
|
* Automatic persistence of transforms
|
|
|
|
* **Material Management**
|
|
|
|
* Create and name reusable materials
|
|
* Edit base color, roughness, metalness, displacement, and opacity
|
|
* Drag-and-drop materials onto meshes
|
|
* Per-object material assignment
|
|
|
|
* **Texture Uploading**
|
|
|
|
* Color (albedo) map
|
|
* Normal map
|
|
* Roughness map
|
|
* Metalness map
|
|
* Alpha map (with transparency handling)
|
|
|
|
* **Scene Persistence**
|
|
|
|
* Automatic saving to `localStorage`
|
|
* Manual export to `scene.json`
|
|
* Scene reconstruction on page reload
|
|
|
|
## Controls
|
|
|
|
### Mouse
|
|
|
|
* **Left click**: Select object
|
|
* **Drag**: Orbit camera
|
|
* **Hover**: Dynamic point light movement
|
|
|
|
### UI
|
|
|
|
* **Material panel**: Create, update, and assign materials
|
|
* **Property sliders**: Adjust selected material parameters
|
|
* **Texture inputs**: Upload texture maps to selected object
|
|
* **Transform buttons**: Switch transform mode
|
|
* **Shape panel**: Add new primitives
|
|
* **Save Scene**: Export scene as JSON
|
|
|
|
## File Structure
|
|
|
|
This project is intentionally minimal:
|
|
|
|
* `index.html`
|
|
Contains all HTML, CSS, and JavaScript logic, including:
|
|
|
|
* Scene setup
|
|
* UI creation
|
|
* Event handling
|
|
* Persistence logic
|
|
|
|
External dependencies are loaded via ES modules from CDN.
|
|
|
|
## Dependencies
|
|
|
|
Loaded at runtime from CDN:
|
|
|
|
* `three`
|
|
* `OrbitControls`
|
|
* `TransformControls`
|
|
* `EffectComposer`
|
|
* `RenderPass`
|
|
* `SSAOPass`
|
|
|
|
No local installation is required.
|
|
|
|
## Usage
|
|
|
|
1. Open the HTML file in a modern browser with WebGL enabled.
|
|
2. Add shapes using the **Add Shape** panel.
|
|
3. Select objects by clicking them in the scene.
|
|
4. Modify transforms, materials, and textures via the UI.
|
|
5. The scene auto-saves to `localStorage`.
|
|
6. Use **Save Scene** to download a JSON snapshot.
|
|
|
|
## Limitations and Notes
|
|
|
|
* Materials are cloned on assignment to avoid shared state side effects.
|
|
* Scene export currently stores geometry type, position, and rotation only (no textures or materials).
|
|
* This is an editor prototype, not a full asset pipeline.
|
|
|
|
## License
|
|
|
|
MIT |