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