Usage

The editor works in two modes:

React — Import and use as a component
Vanilla JavaScript — Embed via <script> tag

React Integration

1. Install


npm install @amaspace-editor/editor-3d

2. Example

3. Code example


import {
  AMAMode,
  EditorConstructor,
  useCheckOptionActions,
  useUtilsEditor,
} from "@amaspace-editor/editor-3d";
import React from "react";
 
export default function App() {
  const { selectOptionWithRules } = useCheckOptionActions();
  const editor = useUtilsEditor();
 
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ flex: 1, height: "100%" }}>
        <React.Suspense fallback={null}>
          <EditorConstructor
            type={"scene"}
            assetId={"parent_2205"}
            apiKey={"861d6e91985e7921cf1b655a49ada38da891d622"}
            presetConfig={{
              baseURL: "https://api.amaspace.co/api/",
              mode: AMAMode.VIEWER,
              applyProductRules: true,
            }}
          />
        </React.Suspense>
      </div>
      <div
        id="BasicSidebar"
        style={{
          position: "absolute",
          right: 0,
          top: 0,
          height: "100%",
          width: "300px",
        }}
      >
        {editor?.optionsAMAUpdated.map((option) => {
          return (
            option.updated?.visible &&
            option.category && (
              <button
                disabled={editor.loadingProgress.loadingRules}
                style={{ width: "100%" }}
                onClick={() => {
                  selectOptionWithRules({
                    option,
                    onComplete: () => {
                      console.log("@complete");
                    },
                  });
                }}
              >
                {option.make || option.name}
              </button>
            )
          );
        })}
      </div>
    </div>
  );
}

Vanilla JavaScript Integration

1. No installation required

Add to your index.html:


<div id="app" style="height: 100vh"></div>
<button id="test">EDITOR</button>
 
<script src="https://unpkg.com/@amaspace-editor/editor-3d@0.0.224/dist/bundle.umd.js"></script>
<script>
  window.playerInit({
    el: document.getElementById("app"),
    assetId: 310,
    apiKey: "tY5ZPM7YQjTenCq8XJ8GpXaKS",
    type: "model",
  });
 
  document.getElementById("test").addEventListener("click", () => {
    window.customizer.setMode("EDITOR");
  });
</script>

When loaded, these globals become available:


window.customizer
window.customObjects

Prop	Description
customizer	Editor status and utilities: active model/mesh, active camera, modes (EDITOR/TryOn), scene configuration, material/annotation lists, scene/material/annotation management methods, etc.
customObjects	A set of factories/interfaces for creating and configuring custom scene objects (shapes, custom cameras, light sources).
customObjects.shape	API for creating/registering custom geometries/prefabs and their parameters.
customObjects.camera	Factory for creating/configuring custom cameras (positions, presets, controllers).
customObjects.light	Factory/settings for creating light sources (type, intensity, color, positioning, shadows).