Documentation is work in progress and not completeEditor
3D System
3D Properties Panel
The properties panel appears when a threed-shape element is selected. This page maps every control to the underlying property it drives.
Canvas Position
| Control | Type | Maps To |
|---|---|---|
| X / Y | Numeric input | element.x, element.y |
| W / H | Numeric input | element.width, element.height |
| R | Numeric input (step 1) | element.rotation |
| Op | Range slider (0-1, step 0.01) | element.opacity |
Gizmo and Transform
Three gizmo buttons — Translate, Rotate and Scale — with the active one highlighted in cyan. Below them, the 3D object transform appears only when an object inside the scene is selected.
| Sub-section | Controls | Maps To |
|---|---|---|
| Position | X, Y, Z numeric inputs (step 0.1) | Object3DConfig.position |
| Rotation | X, Y, Z numeric inputs (step 0.1) | Object3DConfig.rotation |
| Scale | X, Y, Z numeric inputs (step 0.1) | Object3DConfig.scale |
The Geometry section is shown only for non-imported primitives and extruded shapes, with controls that vary by geometry type.
Base Material Properties
| Label | Control | Range | Default |
|---|---|---|---|
| Color | Color picker | — | #3B82F6 |
| Opacity | Slider | 0-1 (step 0.01) | 1 |
| Transparent | Toggle | — | false |
| Side | Segmented (Front/Back/Double) | — | Double |
| Wireframe | Toggle | — | false |
| Flat Shade | Toggle (hidden for Lambert/Toon/Wireframe) | — | false |
| Depth Write | Toggle | — | true |
Setting Opacity below 1 sets transparent automatically.
PBR Properties (Standard and Physical)
| Label | Range | Three.js Property |
|---|---|---|
| Roughness | 0-1 (step 0.01) | material.roughness |
| Metalness | 0-1 (step 0.01) | material.metalness |
| Emissive | — | material.emissive |
| Emiss Int | 0-3 (step 0.01) | material.emissiveIntensity |
| Env Map | 0-3 (step 0.01) | material.envMapIntensity |
Physical Properties
| Label | Range | Three.js Property |
|---|---|---|
| Transmission | 0-1 (step 0.01) | material.transmission |
| Thickness | 0-10 (step 0.1) | material.thickness |
| IOR | 1-2.5 (step 0.01) | material.ior |
| Clearcoat | 0-1 (step 0.01) | material.clearcoat |
| CC Rough | 0-1 (shown when clearcoat > 0) | material.clearcoatRoughness |
| Sheen | 0-1 (step 0.01) | material.sheen |
| Sheen Color / Rough | shown when sheen > 0 | material.sheenColor, sheenRoughness |
| Iridescence | 0-1 (step 0.01) | material.iridescence |
| Irid IOR / Min / Max | shown when iridescence > 0 | material.iridescenceIOR, iridescenceThicknessRange |
| Specular Int / Col | 0-1 | material.specularIntensity, specularColor |
IOR preset buttons are provided for Water (1.33), Glass (1.5) and Diamond (2.4).
Texture Maps
| Map | Color Space | Available For |
|---|---|---|
| Color (Albedo) | sRGB | All types |
| Roughness | Linear | Standard, Physical |
| Metalness | Linear | Standard, Physical |
| Normal | Linear | Standard, Physical, Phong |
| Bump | Linear | Standard, Physical, Phong |
| AO | Linear | Standard, Physical |
| Emissive Map | sRGB | Standard, Physical |
| Alpha | Linear | All types |
Each slot shows an Upload button when empty, and the filename with expand and remove buttons when loaded. Loading an alpha map sets transparent automatically.
Texture Transform Controls
| Label | Range | Three.js Property |
|---|---|---|
| RepX / RepY | step 0.1 | texture.repeat |
| Offset X / Y | -1 to 1 (step 0.01) | texture.offset |
| Rotation | 0-360 degrees (step 1) | texture.rotation (converted to radians) |
| Wrap | Clamp / Repeat / Mirrored | texture.wrapS, texture.wrapT |
| Anisotropy | 1-16 (step 1) | texture.anisotropy |