Skip to Content
Developer DocumentationAPI Reference

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]);

API Highlights

Animations

editor.playAnimation(name)
editor.toggleAnimation(name)
editor.playAllAnimations()
editor.stopAllAnimations()
editor.getCurrentAnimation()
editor.animationList()

Post-Processing

editor.setPostProcessing({ name, effect: options })

Camera

editor.setActiveCamera(camera)
editor.setDynamicCamera({ position: Vector3, target: Vector3 })

Scene

editor.setActiveByName('MeshName')
editor.getMeshById('123')
editor.updateObjectData(node, newData)
editor.deleteModelPart(id)

Materials

utilsMat.createMaterialFromAsset(asset)
utilsMat.updateMaterialProps(props)
utilsMat.updateMaterialTextures(texture)
//Create custom shapes
import React from 'react'
import { useCustomObjects } from '...'
 
const AddObjectsPanel: React.FC = () => {
  const { create } = useCustomObjects()
 
  return (
    <div>
      <button onClick={() => create.plane()}>Add plane</button>
      <button onClick={() => create.box('box-1')}>Add box with id</button>
      <button onClick={() => create.sphere()}>Add sphere</button>
      <button onClick={() => create.shadowPlane()}>Addshadow plane</button>
      <button onClick={() => create.target()}>Add target</button>
    </div>
  )
}
//Create custom lights
import React from 'react'
import { useCustomObjects } from '...'
 
const AddObjectsPanel: React.FC = () => {
  const { create } = useCustomLights()
 
  return (
    <div>
	     <button onClick={() => create.pointLight()}>Add point</button>
			 <button onClick={() => create.hemisphereLight()}>Add hemi</button>
    </div>
  )
}
//Create custom camera
import React from 'react'
import { useCustomObjects } from '...'
 
const AddObjectsPanel: React.FC = () => {
  const { create } = useCustomCameras()
 
  return (
    <div>
	     <button onClick={() => create.perspective()}>Add perspective camera</button>
    </div>
  )
}

Dynamic Components

Example

import { RemoteComponent } from '@amaspace-editor/editor-3d'
 
const MyScene = () => {
  return (
    <canvas>
      <RemoteComponent />
      <mesh>
        <meshBasicMaterial color={0xff0000} />
        <boxGeometry args={[1, 1, 1]} />
      </mesh>
 
      <React.Suspense fallback={null}>
        <RemoteComponent color={color} url='https://cdn.somewebsite.com/some-component.js'/>
      </React.Suspense>
    </canvas>
  )
}

Remote Component Example (some-component.js):

import React from 'react'
 
const Component = ({ color }) => {
  return (
    <mesh>
      <meshStandardMaterial color={color} />
      <boxGeometry args={[1, 1, 1]} />
    </mesh>
  )
}
 
export default Component

Supported Dependencies:

React, animejs, @react-three/fiber, @react-three/drei, three, three-stdlib

🔄 Dynamic Component Hooks

import { useDynamicComponent, useDynamicComponents } from '@amaspace-editor/editor-3d'
 
const resultComponentsArray = useDynamicComponent('comp.js');
const ResultComponent = useDynamicComponents(['comp1.js', 'comp2.js']);
Last updated on
Getting StartedExamples