create-aura3d 1.3.2 → 1.4.0

package/templates/three-compat-postprocess-scene/src/main.ts

@@ -0,0 +1,17 @@
+// Three-compat postprocess scene: emissive primitives pushed through the
+// engine's bloom post pass, authored via the public @aura3d/engine API.
+import { camera, createAuraApp, effects, lights, material, primitives, scene } from "@aura3d/engine";
+
+createAuraApp("#app", {
+  scene: scene()
+    .background("#070a11")
+    .camera(camera.orbit({ target: [0, 0.9, 0], distance: 6 }))
+    .add(primitives.box({ name: "dark deck", size: [8, 0.1, 8], position: [0, -0.05, 0], material: material.pbr({ color: "#101723", roughness: 0.92 }), receiveShadow: true }))
+    .add(primitives.sphere({ name: "bloom core", size: 1.1, position: [0, 1, 0], material: material.emissive({ color: "#1a2330", emissive: "#7dfcff", emissiveIntensity: 1.6 }), castShadow: true }))
+    .add(primitives.torus({ name: "neon ring", size: 1.5, position: [0, 1, 0], rotation: [1.1, 0, 0.2], material: material.emissive({ color: "#171120", emissive: "#ff42c8", emissiveIntensity: 1.3 }), castShadow: true }))
+    .add(primitives.box({ name: "amber pylon", size: [0.4, 1.6, 0.4], position: [-2.4, 0.8, -1.2], material: material.emissive({ color: "#221a10", emissive: "#ffb347", emissiveIntensity: 1.1 }), castShadow: true }))
+    .add(primitives.box({ name: "cyan pylon", size: [0.4, 1.1, 0.4], position: [2.3, 0.55, 1], material: material.emissive({ color: "#101d22", emissive: "#38d6ff", emissiveIntensity: 1.1 }), castShadow: true }))
+    .add(effects.bloom({ intensity: 0.55, threshold: 0.62, radius: 0.42 }))
+    .add(lights.ambient({ intensity: 0.26 }))
+    .add(lights.directional({ name: "soft key", position: [3, 5, 3], intensity: 0.9 }))
+});

package/templates/three-compat-postprocess-scene/tests/route-health.spec.ts

@@ -0,0 +1,16 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+
+test.setTimeout(60_000);
+
+test("Aura3D three-compat template reaches ready state", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const drawCalls = Number(await page.locator("body").getAttribute("data-aura3d-draw-calls"));
+  const diagnostics = await page.evaluate(() => (window as unknown as { __AURA3D_ROUTE_READY__?: { diagnostics?: { backend?: string } } }).__AURA3D_ROUTE_READY__?.diagnostics);
+  expect(diagnostics?.backend).toBe("webgl2");
+  expect(drawCalls).toBeGreaterThan(0);
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/route-health.json"), `${JSON.stringify({ ready: true, backend: diagnostics?.backend, drawCalls }, null, 2)}\n`);
+});

package/templates/three-compat-postprocess-scene/tests/screenshot.spec.ts

@@ -0,0 +1,15 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+
+test.setTimeout(60_000);
+
+test("Aura3D three-compat template screenshot shows content", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const screenshot = await page.screenshot({ fullPage: false });
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/screenshot.png"), screenshot);
+  writeFileSync(resolve("tests/reports/screenshot.json"), `${JSON.stringify({ bytes: screenshot.byteLength }, null, 2)}\n`);
+  expect(screenshot.byteLength).toBeGreaterThan(1000);
+});

package/templates/three-compat-postprocess-scene/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src", "tests"]
+}

package/templates/three-compat-premium-product-viewer/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aura3D Three-Compat Premium Product Viewer</title>
+    <style>
+      html, body, #app { margin: 0; width: 100%; height: 100%; background: #080d15; }
+      body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/three-compat-premium-product-viewer/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "aura3d-three-compat-premium-product-viewer",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run typecheck && vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "test": "playwright test tests/route-health.spec.ts tests/screenshot.spec.ts --workers=1"
+  },
+  "dependencies": {
+    "@aura3d/engine": "1.3.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.52.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.3.2"
+  }
+}

package/templates/three-compat-premium-product-viewer/playwright.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  use: {
+    baseURL: "http://127.0.0.1:4198"
+  },
+  webServer: {
+    command: "npm exec vite -- --host 127.0.0.1 --port 4198 --strictPort",
+    url: "http://127.0.0.1:4198",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000
+  }
+});

package/templates/three-compat-premium-product-viewer/src/main.ts

@@ -0,0 +1,18 @@
+// Three-compat premium product viewer: a hero sphere on a studio stage with
+// plinth, sweep, and softbox-style lighting via the public @aura3d/engine API.
+// Swap the sphere for `model(assets.product)` once you add a typed asset.
+import { camera, createAuraApp, effects, lights, material, primitives, scene } from "@aura3d/engine";
+
+createAuraApp("#app", {
+  scene: scene()
+    .background("#0a0d13")
+    .camera(camera.orbit({ target: [0, 0.95, 0], distance: 4.4 }))
+    .add(primitives.box({ name: "studio sweep floor", size: [7, 0.1, 7], position: [0, -0.05, 0], material: material.pbr({ color: "#171e2b", roughness: 0.85 }), receiveShadow: true }))
+    .add(primitives.box({ name: "studio sweep backdrop", size: [7, 3.2, 0.12], position: [0, 1.55, -3], material: material.pbr({ color: "#131927", roughness: 0.9 }), receiveShadow: true }))
+    .add(primitives.cylinder({ name: "product plinth", size: [1.5, 0.5, 1.5], position: [0, 0.25, 0], material: material.pbr({ color: "#222c3f", roughness: 0.4, metalness: 0.3 }), castShadow: true, receiveShadow: true }))
+    .add(primitives.sphere({ name: "hero product", size: 1.05, position: [0, 1.05, 0], material: material.metal({ color: "#e7d9b8", roughness: 0.14, clearcoat: 0.6 }), castShadow: true }))
+    .add(lights.studio())
+    .add(lights.rect({ name: "softbox key", position: [2.6, 2.8, 2.2], intensity: 1.4, width: 2, height: 1.4 }))
+    .add(lights.point({ name: "cool rim", position: [-2.6, 2.2, -1.8], intensity: 1.2, color: "#a9c8ff" }))
+    .add(effects.bloom({ intensity: 0.22, threshold: 0.78 }))
+});

package/templates/three-compat-premium-product-viewer/tests/route-health.spec.ts

@@ -0,0 +1,16 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+
+test.setTimeout(60_000);
+
+test("Aura3D three-compat template reaches ready state", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const drawCalls = Number(await page.locator("body").getAttribute("data-aura3d-draw-calls"));
+  const diagnostics = await page.evaluate(() => (window as unknown as { __AURA3D_ROUTE_READY__?: { diagnostics?: { backend?: string } } }).__AURA3D_ROUTE_READY__?.diagnostics);
+  expect(diagnostics?.backend).toBe("webgl2");
+  expect(drawCalls).toBeGreaterThan(0);
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/route-health.json"), `${JSON.stringify({ ready: true, backend: diagnostics?.backend, drawCalls }, null, 2)}\n`);
+});

package/templates/three-compat-premium-product-viewer/tests/screenshot.spec.ts

@@ -0,0 +1,15 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+
+test.setTimeout(60_000);
+
+test("Aura3D three-compat template screenshot shows content", async ({ page }) => {
+  await page.goto("/");
+  await expect.poll(() => page.locator("body").getAttribute("data-aura3d-ready"), { timeout: 45_000 }).toBe("true");
+  const screenshot = await page.screenshot({ fullPage: false });
+  mkdirSync(resolve("tests/reports"), { recursive: true });
+  writeFileSync(resolve("tests/reports/screenshot.png"), screenshot);
+  writeFileSync(resolve("tests/reports/screenshot.json"), `${JSON.stringify({ bytes: screenshot.byteLength }, null, 2)}\n`);
+  expect(screenshot.byteLength).toBeGreaterThan(1000);
+});

package/templates/three-compat-premium-product-viewer/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src", "tests"]
+}