@aura3d/react 1.3.3 → 1.4.1

package/README.md

@@ -0,0 +1,25 @@
+# @aura3d/react
+
+`@aura3d/react` owns React components and helpers for mounting Aura3D scenes
+with typed assets, cameras, lights, effects, and product-viewer scene builders.
+
+## Public API
+
+- `AuraCanvas`: React canvas component that mounts `createAuraApp`, forwards
+  diagnostics/options, and disposes the app on unmount.
+- `Scene`: declarative scene wrapper for background, camera, timeline, and
+  diagnostics options.
+- `Model`: typed model node declaration using an `AuraAssetRef<"model">`.
+- `Camera`: orbit, dolly, follow, or perspective camera declaration.
+- `Lights`: studio, ambient, directional, and point light declaration.
+- `Effect`: fog, bloom, and rain effect declaration.
+- `buildSceneFromChildren`: converts supported React children into an
+  `AuraSceneBuilder`.
+- `productViewerScene`: convenience builder for a typed-asset product viewer
+  scene.
+
+## Package Boundary
+
+This package wraps the root `@aura3d/engine` public API for React apps. It does
+not replace the typed asset pipeline: model props should use generated
+`assets.name` references, not raw GLB URLs or guessed asset IDs.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aura3d/react",
-  "version": "1.3.3",
+  "version": "1.4.1",
   "type": "module",
   "exports": {
     ".": {
@@ -15,6 +15,37 @@
     "react": "^19.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@aura3d/engine": "1.3.3"
-  }
+    "@aura3d/engine": "1.4.1"
+  },
+  "description": "React components and helpers for mounting Aura3D scenes with typed assets, cameras, lights, effects, and product-viewer scene builders.",
+  "keywords": [
+    "aura3d",
+    "3d",
+    "browser-3d",
+    "web-3d",
+    "typescript",
+    "react",
+    "react-components",
+    "react-3d",
+    "aura-canvas",
+    "typed-assets",
+    "product-viewer"
+  ],
+  "homepage": "https://aura3d.auraone.ai",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/auraoneai/aura3d.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/auraoneai/aura3d/issues"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "dist"
+  ]
 }

package/src/index.ts

@@ -1,173 +0,0 @@
-import {
-  Children,
-  createElement,
-  isValidElement,
-  useEffect,
-  useMemo,
-  useRef,
-  type CSSProperties,
-  type ReactElement,
-  type ReactNode
-} from "react";
-import {
-  camera,
-  createAuraApp,
-  effects,
-  lights,
-  model,
-  scene,
-  type AuraApp,
-  type AuraAssetRef,
-  type AuraCameraSpec,
-  type AuraColor,
-  type AuraCreateAppOptions,
-  type AuraEffectNode,
-  type AuraLightNode,
-  type AuraMaterialSpec,
-  type AuraModelOptions,
-  type AuraSceneBuilder,
-  type AuraTimelineSpec
-} from "@aura3d/engine";
-
-export interface AuraCanvasProps {
-  readonly children?: ReactNode;
-  readonly diagnostics?: AuraCreateAppOptions["diagnostics"];
-  readonly pixelRatio?: number;
-  readonly autoStart?: boolean;
-  readonly resize?: boolean;
-  readonly className?: string;
-  readonly style?: CSSProperties;
-  readonly onReady?: (app: AuraApp) => void;
-}
-
-export interface SceneProps {
-  readonly children?: ReactNode;
-  readonly background?: AuraColor;
-  readonly camera?: AuraCameraSpec;
-  readonly timeline?: AuraTimelineSpec;
-  readonly diagnostics?: boolean;
-}
-
-export interface ModelProps extends AuraModelOptions {
-  readonly asset: AuraAssetRef<"model">;
-}
-
-export interface CameraProps extends Omit<AuraCameraSpec, "mode"> {
-  readonly mode?: AuraCameraSpec["mode"];
-}
-
-export interface LightsProps {
-  readonly preset?: "studio";
-  readonly type?: AuraLightNode["light"];
-  readonly intensity?: number;
-  readonly color?: AuraColor;
-  readonly position?: readonly [number, number, number];
-}
-
-export interface EffectProps extends Omit<AuraEffectNode, "kind" | "effect"> {
-  readonly type: AuraEffectNode["effect"];
-}
-
-export function AuraCanvas(props: AuraCanvasProps): ReactElement {
-  const ref = useRef<HTMLCanvasElement | null>(null);
-  const builtScene = useMemo(() => buildSceneFromChildren(props.children), [props.children]);
-  useEffect(() => {
-    if (!ref.current) return undefined;
-    const app = createAuraApp(ref.current, {
-      scene: builtScene,
-      diagnostics: props.diagnostics,
-      pixelRatio: props.pixelRatio,
-      autoStart: props.autoStart,
-      resize: props.resize
-    });
-    props.onReady?.(app);
-    return () => app.dispose();
-  }, [builtScene, props.autoStart, props.diagnostics, props.onReady, props.pixelRatio, props.resize]);
-  return createElement("canvas", {
-    ref,
-    className: props.className,
-    style: {
-      width: "100%",
-      height: "100%",
-      display: "block",
-      ...(props.style ?? {})
-    }
-  });
-}
-
-export function Scene(_props: SceneProps): null {
-  return null;
-}
-
-export function Model(_props: ModelProps): null {
-  return null;
-}
-
-export function Camera(_props: CameraProps): null {
-  return null;
-}
-
-export function Lights(_props: LightsProps): null {
-  return null;
-}
-
-export function Effect(_props: EffectProps): null {
-  return null;
-}
-
-export function buildSceneFromChildren(children: ReactNode): AuraSceneBuilder {
-  let builder = scene();
-  const sceneElement = findFirstElementOfType(children, Scene);
-  const sceneProps = (sceneElement?.props ?? {}) as SceneProps;
-  if (sceneProps.background) builder = builder.background(sceneProps.background);
-  if (sceneProps.camera) builder = builder.camera(sceneProps.camera);
-  if (sceneProps.timeline) builder = builder.timeline(sceneProps.timeline);
-  if (sceneProps.diagnostics) builder = builder.diagnostics(sceneProps.diagnostics);
-  const content = sceneElement ? sceneProps.children : children;
-  Children.forEach(content, (child) => {
-    if (!isValidElement(child)) return;
-    if (child.type === Model) {
-      const props = child.props as ModelProps;
-      builder.add(model(props.asset, props));
-    }
-    if (child.type === Camera) {
-      const props = child.props as CameraProps;
-      const mode = props.mode ?? "orbit";
-      if (mode === "dolly" && props.from && props.to) builder.camera(camera.dolly({ ...props, from: props.from, to: props.to }));
-      else if (mode === "follow" && props.targetNode) builder.camera(camera.follow({ ...props, targetNode: props.targetNode }));
-      else if (mode === "perspective") builder.camera(camera.perspective(props));
-      else builder.camera(camera.orbit(props));
-    }
-    if (child.type === Lights) {
-      const props = child.props as LightsProps;
-      if (props.preset === "studio" || !props.type || props.type === "studio") builder.add(lights.studio({ intensity: props.intensity }));
-      else if (props.type === "ambient") builder.add(lights.ambient(props));
-      else if (props.type === "directional") builder.add(lights.directional(props));
-      else builder.add(lights.point(props));
-    }
-    if (child.type === Effect) {
-      const props = child.props as EffectProps;
-      if (props.type === "fog") builder.add(effects.fog(props));
-      if (props.type === "bloom") builder.add(effects.bloom(props));
-      if (props.type === "rain") builder.add(effects.rain(props));
-    }
-  });
-  return builder;
-}
-
-export function productViewerScene(asset: AuraAssetRef<"model">, material?: AuraMaterialSpec): AuraSceneBuilder {
-  return scene()
-    .background("#08111f")
-    .add(model(asset, { material }).position(0, 0, 0).scale(1))
-    .add(lights.studio({ intensity: 1.1 }))
-    .camera(camera.orbit({ distance: 4 }))
-    .diagnostics(true);
-}
-
-function findFirstElementOfType(children: ReactNode, type: (props: never) => null): ReactElement | undefined {
-  let found: ReactElement | undefined;
-  Children.forEach(children, (child) => {
-    if (!found && isValidElement(child) && child.type === type) found = child;
-  });
-  return found;
-}