Skip to Content
API ReferenceEditorConstructor

EditorConstructor

It is the main component of the library, allows you to visualize the scene

🎛 EditorConstructor Props

PropTypeDescription
type"model" | "material" | "scene" | "texture" Select the type of asset that will be displayed in the 3D scene. The type must match the asset that you specify in the assetId field.
assetIdnumber | string Asset/Product ID taken from the Amaspace platform
apiKeystringAPI key taken from the Amaspace platform
presetConfigobjectEditor settings

🎛 presetConfig Props

PropDefaultTypeDescription
mode"VIEWER" | "EDITOR" | "TRYON"Defines the operating mode of the customizer/editor. Untitled
applyProductRulesfalsebooleanallows you to enable/disable the application of product option rules
controls AMAControlsPropsUntitled
baseURLstringThe API URL through which all requests will be sent is mainly needed for internal development of Amaspace. You can use “https://api.amaspace.co/api/”  by default.

🎛 mode Description

ModeDescription
VIEWERRead-only mode — the user can preview the scene or product, but cannot make edits. Useful for embedding a 3D viewer.
EDITORFull editing mode — allows users to interact with the scene, apply customization options, and modify objects/materials.
TRYONVirtual try-on mode — optimized for product placement on a live camera feed (e.g., trying on accessories).

🎛 AMAControlsPropsProps

PropDefaultTypeDescription
pantruebooleanEnables or disables panning (moving the camera across the scene).
zoomToCursorfalsebooleanControls whether zoom is centered on the cursor position instead of scene center.
disable falsebooleanDisables all camera controls (pan, zoom, rotation).

Example:

<EditorConstructor
  type="model"
  assetId={assetId}
  apiKey={apiKey}
  presetConfig={{
    mode: AMAMode.EDITOR,
    applyProductRules: false,
    customDomain: "https://custom.domain.com"
  }}
/>

🪝 Hooks

Hooks work only when the editor is mounted in the DOM.

  • useUtilsEditor — Core hook for models/scenes Untitled
  • useUtilsMaterial — Core hook for materials Untitled
  • useCustomObjects — Create simple shapes Untitled
  • useCustomLights — Create lights Untitled
  • useCustomCameras — Create cameras Untitled
  • useCheckOptionActions — Work with options Untitled

📜 Workflow

  1. Add <EditorConstructor /> where needed
  2. Wait for scene load via useUtilsEditor().loadingProgress
  3. Use hooks to manipulate the scene

Example:

import { useUtilsEditor } from '@amaspace-editor/editor-3d'
 
const editor = useUtilsEditor()
 
useEffect(() => {
  if (editor.loadingProgress.sceneLoaded) {
    console.log("Scene loaded");
  }
}, [editor.loadingProgress.sceneLoaded]);
Last updated on
Dynamic ComponentsApply Option