Studio — PhotoTo3D

PhotoTo3D
Cadence Pro case · material study
كيف يعمل
3D preview unavailableThis browser could not start WebGL. The model data and code export still work.
تهيئة مساحة العملتجهيز مسرح الـ3D
ترجمة الخامات وأدوات التحكم بالكاميرا ونظام تثبيت الأسطح.
STORY PATHInteractive hero
01
SilhouetteRead the complete pebble form
02
MaterialsLacquer, knurled steel and glass side by side
03
DetailMove into the hinge, lens and contacts
REFERENCECadence Pro case · material study
TYPESCRIPT FACTORY · 47 PARTS
import * as THREE from "three";
import { RoundedBoxGeometry } from "three/examples/jsm/geometries/RoundedBoxGeometry.js";

// Explicit types rather than `as const`: with literal inference each material
// gets its own type, so an optional field present on one and absent on another
// fails to compile. These interfaces keep the data uniform.
type SurfaceFinish = "smooth" | "brushed" | "matte-grain" | "bumpy" | "knurled";

type Material = {
  name: string;
  color: string;
  roughness: number;
  metalness: number;
  emissive: string;
  emissiveIntensity: number;
  clearcoat?: number;
  clearcoatRoughness?: number;
  transmission?: number;
  ior?: number;
  sheen?: number;
  surface?: SurfaceFinish;
};

type Part = {
  id: string;
  name: string;
  parentId: string;
  primitive: "box" | "sphere" | "cylinder" | "capsule" | "cone" | "torus";
  bevel?: number;
  size: [number, number, number];
  radiusTop: number;
  radiusBottom: number;
  height: number;
  radialSegments: number;
  tube: number;
  position: [number, number, number];
  rotation: [number, number, number];
  scale: [number, number, number];
  materialIndex: number;
  castShadow: boolean;
};

type View = { label: string; position: [number, number, number]; target: [number, number, number] };

type Motion = { nodeId: string; kind: "spin" | "open" | "slide"; axis: "x" | "y" | "z"; range: number };

// Optional in the schema, so optional here — but they must be declared. Omitting
// them made every download that carried views or motions fail to typecheck, since
// the spec is serialised verbatim into this annotated literal.
const spec: {
  version: string;
  objectName: string;
  objectClass: string;
  summary: string;
  confidence: number;
  suggestedCamera: { position: [number, number, number]; target: [number, number, number] };
  materials: Material[];
  nodes: Part[];
  criticalFeatures: string[];
  uncertainties: string[];
  views?: View[];
  motions?: Motion[];
} = {
  "version": "2.0",
  "objectName": "Cadence Pro case",
  "objectClass": "wireless earbud charging case",
  "summary": "A pebble-form charging case with a knurled hinge barrel, machined lid seam, translucent status lens and two seated earbuds on brushed contact pads.",
  "confidence": 0.93,
  "suggestedCamera": {
    "position": [
      4.2,
      2.9,
      5.2
    ],
    "target": [
      0,
      0.1,
      0
    ]
  },
  "materials": [
    {
      "name": "shell lacquer",
      "color": "#f2f0ea",
      "roughness": 0.34,
      "metalness": 0,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "surface": "matte-grain",
      "clearcoat": 0.9,
      "clearcoatRoughness": 0.18
    },
    {
      "name": "knurled steel",
      "color": "#6e7176",
      "roughness": 0.34,
      "metalness": 0.96,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "surface": "knurled",
      "clearcoat": 0.35,
      "clearcoatRoughness": 0.22
    },
    {
      "name": "status lens",
      "color": "#cfe3ef",
      "roughness": 0.06,
      "metalness": 0,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "transmission": 0.88,
      "ior": 1.52,
      "clearcoat": 1,
      "clearcoatRoughness": 0.04
    },
    {
      "name": "flocked interior",
      "color": "#16171b",
      "roughness": 0.95,
      "metalness": 0,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "sheen": 0.6,
      "surface": "bumpy"
    },
    {
      "name": "brushed contact",
      "color": "#c9ad72",
      "roughness": 0.3,
      "metalness": 0.9,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "surface": "brushed"
    },
    {
      "name": "bud gloss",
      "color": "#fbfaf7",
      "roughness": 0.12,
      "metalness": 0,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "clearcoat": 1,
      "clearcoatRoughness": 0.06
    },
    {
      "name": "silicone tip",
      "color": "#d8d4cb",
      "roughness": 0.82,
      "metalness": 0,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "surface": "matte-grain"
    },
    {
      "name": "signal accent",
      "color": "#e8863c",
      "roughness": 0.32,
      "metalness": 0.2,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "clearcoat": 0.6,
      "clearcoatRoughness": 0.2
    }
  ],
  "nodes": [
    {
      "id": "base",
      "name": "case base",
      "parentId": "",
      "primitive": "box",
      "size": [
        2.62,
        0.72,
        1.94
      ],
      "radiusTop": 1.31,
      "radiusBottom": 1.31,
      "height": 0.72,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        -0.34,
        0
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 0,
      "castShadow": true,
      "bevel": 0.12
    },
    {
      "id": "lid",
      "name": "case lid",
      "parentId": "",
      "primitive": "box",
      "size": [
        2.62,
        0.5,
        1.9
      ],
      "radiusTop": 1.31,
      "radiusBottom": 1.31,
      "height": 0.5,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        0.52,
        -0.62
      ],
      "rotation": [
        -0.62,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 0,
      "castShadow": true,
      "bevel": 0.1
    },
    {
      "id": "seam-front",
      "name": "machined seam front",
      "parentId": "",
      "primitive": "box",
      "size": [
        2.56,
        0.04,
        0.1
      ],
      "radiusTop": 1.28,
      "radiusBottom": 1.28,
      "height": 0.04,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        0.04,
        0.92
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true,
      "bevel": 0.012
    },
    {
      "id": "seam-back",
      "name": "machined seam back",
      "parentId": "",
      "primitive": "box",
      "size": [
        2.56,
        0.04,
        0.1
      ],
      "radiusTop": 1.28,
      "radiusBottom": 1.28,
      "height": 0.04,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        0.04,
        -0.92
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true,
      "bevel": 0.012
    },
    {
      "id": "seam-side-0",
      "name": "machined seam side 1",
      "parentId": "",
      "primitive": "box",
      "size": [
        0.08,
        0.04,
        1.9
      ],
      "radiusTop": 0.04,
      "radiusBottom": 0.04,
      "height": 0.04,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        -1.27,
        0.04,
        0
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true,
      "bevel": 0.012
    },
    {
      "id": "seam-side-1",
      "name": "machined seam side 2",
      "parentId": "",
      "primitive": "box",
      "size": [
        0.08,
        0.04,
        1.9
      ],
      "radiusTop": 0.04,
      "radiusBottom": 0.04,
      "height": 0.04,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        1.27,
        0.04,
        0
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true,
      "bevel": 0.012
    },
    {
      "id": "hinge-barrel",
      "name": "knurled hinge barrel",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.3,
        2.1,
        0.3
      ],
      "radiusTop": 0.15,
      "radiusBottom": 0.15,
      "height": 2.1,
      "radialSegments": 40,
      "tube": 0.08,
      "position": [
        0,
        0.22,
        -0.99
      ],
      "rotation": [
        0,
        0,
        1.5707963267948966
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "hinge-cap-0",
      "name": "hinge end cap 1",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.34,
        0.08,
        0.34
      ],
      "radiusTop": 0.17,
      "radiusBottom": 0.17,
      "height": 0.08,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        -1.06,
        0.22,
        -0.99
      ],
      "rotation": [
        0,
        0,
        1.5707963267948966
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "hinge-cap-1",
      "name": "hinge end cap 2",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.34,
        0.08,
        0.34
      ],
      "radiusTop": 0.17,
      "radiusBottom": 0.17,
      "height": 0.08,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        1.06,
        0.22,
        -0.99
      ],
      "rotation": [
        0,
        0,
        1.5707963267948966
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "hinge-strut-0",
      "name": "hinge strut 1",
      "parentId": "",
      "primitive": "box",
      "size": [
        0.36,
        0.22,
        0.3
      ],
      "radiusTop": 0.18,
      "radiusBottom": 0.18,
      "height": 0.22,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        -0.62,
        0.18,
        -0.86
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true,
      "bevel": 0.04
    },
    {
      "id": "hinge-strut-1",
      "name": "hinge strut 2",
      "parentId": "",
      "primitive": "box",
      "size": [
        0.36,
        0.22,
        0.3
      ],
      "radiusTop": 0.18,
      "radiusBottom": 0.18,
      "height": 0.22,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0.62,
        0.18,
        -0.86
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true,
      "bevel": 0.04
    },
    {
      "id": "lens-bezel",
      "name": "status lens bezel",
      "parentId": "",
      "primitive": "torus",
      "size": [
        0.3,
        0.05,
        0.3
      ],
      "radiusTop": 0.15,
      "radiusBottom": 0.15,
      "height": 0.05,
      "radialSegments": 32,
      "tube": 0.045,
      "position": [
        0,
        -0.3,
        0.98
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "lens",
      "name": "translucent status lens",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.24,
        0.07,
        0.24
      ],
      "radiusTop": 0.12,
      "radiusBottom": 0.12,
      "height": 0.07,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        -0.3,
        0.99
      ],
      "rotation": [
        1.5707963267948966,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 2,
      "castShadow": true
    },
    {
      "id": "accent-line",
      "name": "signal accent line",
      "parentId": "",
      "primitive": "box",
      "size": [
        0.72,
        0.04,
        0.03
      ],
      "radiusTop": 0.36,
      "radiusBottom": 0.36,
      "height": 0.04,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        -0.62,
        0.98
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 7,
      "castShadow": true
    },
    {
      "id": "well",
      "name": "flocked interior well",
      "parentId": "",
      "primitive": "box",
      "size": [
        2.3,
        0.34,
        1.62
      ],
      "radiusTop": 1.15,
      "radiusBottom": 1.15,
      "height": 0.34,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        -0.12,
        0
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 3,
      "castShadow": true,
      "bevel": 0.1
    },
    {
      "id": "cavity-0",
      "name": "bud cavity 1",
      "parentId": "",
      "primitive": "sphere",
      "size": [
        0.86,
        0.86,
        0.86
      ],
      "radiusTop": 0.43,
      "radiusBottom": 0.43,
      "height": 0.86,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        -0.56,
        -0.1,
        0.04
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        0.62,
        1
      ],
      "materialIndex": 3,
      "castShadow": true
    },
    {
      "id": "cavity-1",
      "name": "bud cavity 2",
      "parentId": "",
      "primitive": "sphere",
      "size": [
        0.86,
        0.86,
        0.86
      ],
      "radiusTop": 0.43,
      "radiusBottom": 0.43,
      "height": 0.86,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0.56,
        -0.1,
        0.04
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        0.62,
        1
      ],
      "materialIndex": 3,
      "castShadow": true
    },
    {
      "id": "pad-0",
      "name": "charging contact pad 1",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.34,
        0.04,
        0.34
      ],
      "radiusTop": 0.17,
      "radiusBottom": 0.17,
      "height": 0.04,
      "radialSegments": 28,
      "tube": 0.08,
      "position": [
        -0.56,
        -0.16,
        0.04
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true
    },
    {
      "id": "pad-1",
      "name": "charging contact pad 2",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.34,
        0.04,
        0.34
      ],
      "radiusTop": 0.17,
      "radiusBottom": 0.17,
      "height": 0.04,
      "radialSegments": 28,
      "tube": 0.08,
      "position": [
        0.56,
        -0.16,
        0.04
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true
    },
    {
      "id": "pin-0",
      "name": "contact pin 1",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.07,
        0.09,
        0.07
      ],
      "radiusTop": 0.035,
      "radiusBottom": 0.035,
      "height": 0.09,
      "radialSegments": 16,
      "tube": 0.08,
      "position": [
        -0.64,
        -0.12,
        -0.019999999999999997
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true
    },
    {
      "id": "pin-1",
      "name": "contact pin 2",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.07,
        0.09,
        0.07
      ],
      "radiusTop": 0.035,
      "radiusBottom": 0.035,
      "height": 0.09,
      "radialSegments": 16,
      "tube": 0.08,
      "position": [
        -0.48,
        -0.12,
        0.18000000000000002
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true
    },
    {
      "id": "pin-2",
      "name": "contact pin 3",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.07,
        0.09,
        0.07
      ],
      "radiusTop": 0.035,
      "radiusBottom": 0.035,
      "height": 0.09,
      "radialSegments": 16,
      "tube": 0.08,
      "position": [
        0.48,
        -0.12,
        -0.019999999999999997
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true
    },
    {
      "id": "pin-3",
      "name": "contact pin 4",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.07,
        0.09,
        0.07
      ],
      "radiusTop": 0.035,
      "radiusBottom": 0.035,
      "height": 0.09,
      "radialSegments": 16,
      "tube": 0.08,
      "position": [
        0.64,
        -0.12,
        0.18000000000000002
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true
    },
    {
      "id": "bud-0",
      "name": "earbud body 1",
      "parentId": "",
      "primitive": "sphere",
      "size": [
        0.62,
        0.62,
        0.62
      ],
      "radiusTop": 0.31,
      "radiusBottom": 0.31,
      "height": 0.62,
      "radialSegments": 40,
      "tube": 0.08,
      "position": [
        -0.56,
        0.12,
        0.12
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        0.92,
        1.05
      ],
      "materialIndex": 5,
      "castShadow": true
    },
    {
      "id": "bud-1",
      "name": "earbud body 2",
      "parentId": "",
      "primitive": "sphere",
      "size": [
        0.62,
        0.62,
        0.62
      ],
      "radiusTop": 0.31,
      "radiusBottom": 0.31,
      "height": 0.62,
      "radialSegments": 40,
      "tube": 0.08,
      "position": [
        0.56,
        0.12,
        0.12
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        0.92,
        1.05
      ],
      "materialIndex": 5,
      "castShadow": true
    },
    {
      "id": "stem-0",
      "name": "earbud stem 1",
      "parentId": "",
      "primitive": "capsule",
      "size": [
        0.19,
        0.46,
        0.19
      ],
      "radiusTop": 0.095,
      "radiusBottom": 0.095,
      "height": 0.46,
      "radialSegments": 24,
      "tube": 0.08,
      "position": [
        -0.56,
        -0.1,
        -0.1
      ],
      "rotation": [
        0.34,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 5,
      "castShadow": true
    },
    {
      "id": "stem-1",
      "name": "earbud stem 2",
      "parentId": "",
      "primitive": "capsule",
      "size": [
        0.19,
        0.46,
        0.19
      ],
      "radiusTop": 0.095,
      "radiusBottom": 0.095,
      "height": 0.46,
      "radialSegments": 24,
      "tube": 0.08,
      "position": [
        0.56,
        -0.1,
        -0.1
      ],
      "rotation": [
        0.34,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 5,
      "castShadow": true
    },
    {
      "id": "tip-0",
      "name": "silicone ear tip 1",
      "parentId": "",
      "primitive": "capsule",
      "size": [
        0.17,
        0.24,
        0.17
      ],
      "radiusTop": 0.085,
      "radiusBottom": 0.085,
      "height": 0.24,
      "radialSegments": 20,
      "tube": 0.08,
      "position": [
        -0.8,
        0.2,
        0.22
      ],
      "rotation": [
        0,
        0,
        0.9
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 6,
      "castShadow": true
    },
    {
      "id": "tip-1",
      "name": "silicone ear tip 2",
      "parentId": "",
      "primitive": "capsule",
      "size": [
        0.17,
        0.24,
        0.17
      ],
      "radiusTop": 0.085,
      "radiusBottom": 0.085,
      "height": 0.24,
      "radialSegments": 20,
      "tube": 0.08,
      "position": [
        0.8,
        0.2,
        0.22
      ],
      "rotation": [
        0,
        0,
        -0.9
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 6,
      "castShadow": true
    },
    {
      "id": "mesh-0",
      "name": "driver mesh 1",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.14,
        0.03,
        0.14
      ],
      "radiusTop": 0.07,
      "radiusBottom": 0.07,
      "height": 0.03,
      "radialSegments": 20,
      "tube": 0.08,
      "position": [
        -0.9000000000000001,
        0.22,
        0.24
      ],
      "rotation": [
        0,
        0,
        0.9
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true
    },
    {
      "id": "mesh-1",
      "name": "driver mesh 2",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.14,
        0.03,
        0.14
      ],
      "radiusTop": 0.07,
      "radiusBottom": 0.07,
      "height": 0.03,
      "radialSegments": 20,
      "tube": 0.08,
      "position": [
        0.9000000000000001,
        0.22,
        0.24
      ],
      "rotation": [
        0,
        0,
        -0.9
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true
    },
    {
      "id": "bud-band-0",
      "name": "bud trim band 1",
      "parentId": "",
      "primitive": "torus",
      "size": [
        0.5,
        0.03,
        0.5
      ],
      "radiusTop": 0.25,
      "radiusBottom": 0.25,
      "height": 0.03,
      "radialSegments": 32,
      "tube": 0.015,
      "position": [
        -0.56,
        0.04,
        0.12
      ],
      "rotation": [
        1.5707963267948966,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "bud-band-1",
      "name": "bud trim band 2",
      "parentId": "",
      "primitive": "torus",
      "size": [
        0.5,
        0.03,
        0.5
      ],
      "radiusTop": 0.25,
      "radiusBottom": 0.25,
      "height": 0.03,
      "radialSegments": 32,
      "tube": 0.015,
      "position": [
        0.56,
        0.04,
        0.12
      ],
      "rotation": [
        1.5707963267948966,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "port",
      "name": "usb-c port",
      "parentId": "",
      "primitive": "box",
      "size": [
        0.42,
        0.12,
        0.1
      ],
      "radiusTop": 0.21,
      "radiusBottom": 0.21,
      "height": 0.12,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        -0.58,
        -0.96
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true,
      "bevel": 0.04
    },
    {
      "id": "port-lip",
      "name": "port lip",
      "parentId": "",
      "primitive": "box",
      "size": [
        0.5,
        0.18,
        0.04
      ],
      "radiusTop": 0.25,
      "radiusBottom": 0.25,
      "height": 0.18,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        -0.58,
        -0.92
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 0,
      "castShadow": true,
      "bevel": 0.015
    },
    {
      "id": "foot-0",
      "name": "rubber foot 1",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.16,
        0.04,
        0.16
      ],
      "radiusTop": 0.08,
      "radiusBottom": 0.08,
      "height": 0.04,
      "radialSegments": 16,
      "tube": 0.08,
      "position": [
        -0.92,
        -0.7,
        -0.66
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 6,
      "castShadow": true
    },
    {
      "id": "foot-1",
      "name": "rubber foot 2",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.16,
        0.04,
        0.16
      ],
      "radiusTop": 0.08,
      "radiusBottom": 0.08,
      "height": 0.04,
      "radialSegments": 16,
      "tube": 0.08,
      "position": [
        0.92,
        -0.7,
        -0.66
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 6,
      "castShadow": true
    },
    {
      "id": "foot-2",
      "name": "rubber foot 3",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.16,
        0.04,
        0.16
      ],
      "radiusTop": 0.08,
      "radiusBottom": 0.08,
      "height": 0.04,
      "radialSegments": 16,
      "tube": 0.08,
      "position": [
        -0.92,
        -0.7,
        0.66
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 6,
      "castShadow": true
    },
    {
      "id": "foot-3",
      "name": "rubber foot 4",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.16,
        0.04,
        0.16
      ],
      "radiusTop": 0.08,
      "radiusBottom": 0.08,
      "height": 0.04,
      "radialSegments": 16,
      "tube": 0.08,
      "position": [
        0.92,
        -0.7,
        0.66
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 6,
      "castShadow": true
    },
    {
      "id": "screw-0",
      "name": "case screw 1",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.09,
        0.03,
        0.09
      ],
      "radiusTop": 0.045,
      "radiusBottom": 0.045,
      "height": 0.03,
      "radialSegments": 12,
      "tube": 0.08,
      "position": [
        -0.72,
        -0.69,
        -0.5
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "screw-1",
      "name": "case screw 2",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.09,
        0.03,
        0.09
      ],
      "radiusTop": 0.045,
      "radiusBottom": 0.045,
      "height": 0.03,
      "radialSegments": 12,
      "tube": 0.08,
      "position": [
        0.72,
        -0.69,
        -0.5
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "screw-2",
      "name": "case screw 3",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.09,
        0.03,
        0.09
      ],
      "radiusTop": 0.045,
      "radiusBottom": 0.045,
      "height": 0.03,
      "radialSegments": 12,
      "tube": 0.08,
      "position": [
        -0.72,
        -0.69,
        0.5
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "screw-3",
      "name": "case screw 4",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.09,
        0.03,
        0.09
      ],
      "radiusTop": 0.045,
      "radiusBottom": 0.045,
      "height": 0.03,
      "radialSegments": 12,
      "tube": 0.08,
      "position": [
        0.72,
        -0.69,
        0.5
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "plate",
      "name": "regulatory plate",
      "parentId": "",
      "primitive": "box",
      "size": [
        1,
        0.02,
        0.46
      ],
      "radiusTop": 0.5,
      "radiusBottom": 0.5,
      "height": 0.02,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        -0.695,
        0
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true,
      "bevel": 0.01
    },
    {
      "id": "magnet-0",
      "name": "lid magnet 1",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.24,
        0.05,
        0.24
      ],
      "radiusTop": 0.12,
      "radiusBottom": 0.12,
      "height": 0.05,
      "radialSegments": 20,
      "tube": 0.08,
      "position": [
        -0.7,
        0.12,
        0.2
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true
    },
    {
      "id": "magnet-1",
      "name": "lid magnet 2",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.24,
        0.05,
        0.24
      ],
      "radiusTop": 0.12,
      "radiusBottom": 0.12,
      "height": 0.05,
      "radialSegments": 20,
      "tube": 0.08,
      "position": [
        0.7,
        0.12,
        0.2
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 4,
      "castShadow": true
    },
    {
      "id": "brand-strip",
      "name": "lid brand strip",
      "parentId": "",
      "primitive": "box",
      "size": [
        1.1,
        0.02,
        0.16
      ],
      "radiusTop": 0.55,
      "radiusBottom": 0.55,
      "height": 0.02,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        0.1,
        -0.4
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true,
      "bevel": 0.01
    }
  ],
  "criticalFeatures": [
    "pebble case with a visible machined lid seam",
    "knurled steel hinge barrel across the back",
    "translucent status lens on the front face",
    "two earbuds seated on brushed contact pads",
    "flocked interior well"
  ],
  "uncertainties": [
    "lid shown closed; hinge travel is not animated in this study"
  ]
};

export function createCadenceProCaseModel() {
  const root = new THREE.Group();
  root.name = spec.objectName;

  const materials = spec.materials.map((m) => {
    const material = new THREE.MeshPhysicalMaterial({
      color: m.color,
      roughness: m.roughness,
      metalness: m.metalness,
      emissive: m.emissive,
      emissiveIntensity: m.emissiveIntensity,
      clearcoat: m.clearcoat ?? 0,
      clearcoatRoughness: m.clearcoatRoughness ?? 0,
      transmission: m.transmission ?? 0,
      ior: m.ior ?? 1.5,
      sheen: m.sheen ?? 0,
    });
    // Transmissive surfaces need transparency enabled to actually read as glass.
    if ((m.transmission ?? 0) > 0) material.transparent = true;
    const normalMap = surfaceNormalMap(m.surface ?? "smooth");
    if (normalMap) {
      material.normalMap = normalMap;
      material.normalScale = new THREE.Vector2(0.6, 0.6);
    }
    return material;
  });

  const nodes = new Map<string, THREE.Object3D>();
  for (const part of spec.nodes) {
    const mesh = new THREE.Mesh(createGeometry(part), materials[part.materialIndex]);
    mesh.name = part.name;
    mesh.position.fromArray(part.position);
    mesh.rotation.set(...part.rotation);
    mesh.scale.fromArray(part.scale);
    mesh.castShadow = part.castShadow;
    mesh.receiveShadow = true;
    nodes.set(part.id, mesh);
  }
  for (const part of spec.nodes) {
    const node = nodes.get(part.id)!;
    (part.parentId ? nodes.get(part.parentId) : root)?.add(node);
  }

  root.userData.sculptRuntime = { version: 2, nodes: Object.fromEntries(nodes), criticalFeatures: spec.criticalFeatures };
  return root;
}

function createGeometry(part: Part): THREE.BufferGeometry {
  switch (part.primitive) {
    case "sphere": return new THREE.SphereGeometry(part.radiusTop, part.radialSegments, Math.max(8, Math.floor(part.radialSegments / 2)));
    case "cylinder": return new THREE.CylinderGeometry(part.radiusTop, part.radiusBottom, part.height, part.radialSegments);
    case "capsule": return new THREE.CapsuleGeometry(part.radiusTop, part.height, 8, part.radialSegments);
    case "cone": return new THREE.ConeGeometry(part.radiusBottom, part.height, part.radialSegments);
    case "torus": return new THREE.TorusGeometry(part.radiusTop, part.tube, 12, part.radialSegments);
    default: {
      const [w, h, d] = part.size;
      // A model-supplied bevel; falls back to a small radius proportional to the
      // part so nothing reads as a raw untreated cube.
      // Clamp BEFORE the threshold test, matching the preview and the embed. This
      // used to test the unclamped value, so a thin plate carrying a large bevel
      // took the RoundedBoxGeometry path with a clamped radius of zero or below —
      // three then produces degenerate geometry. No shipped demo triggers it, but a
      // model-generated spec easily can.
      const shortest = Math.min(w, h, d);
      const radius = Math.min(part.bevel ?? shortest * 0.06, shortest / 2 - 0.001);
      return radius > 0.001
        ? new RoundedBoxGeometry(w, h, d, 6, radius)
        : new THREE.BoxGeometry(w, h, d);
    }
  }
}

// Procedural surface detail: builds a height field, converts it to a normal map
// with a Sobel pass. Same algorithm as the studio preview, so exported models
// keep their brushed metal, matte grain and knurled focus rings.
const normalMapCache = new Map<string, THREE.Texture | null>();
function surfaceNormalMap(finish: string): THREE.Texture | null {
  if (normalMapCache.has(finish)) return normalMapCache.get(finish)!;
  if (finish === "smooth" || typeof document === "undefined") {
    normalMapCache.set(finish, null);
    return null;
  }
  const S = 256;
  const canvas = document.createElement("canvas");
  canvas.width = canvas.height = S;
  const ctx = canvas.getContext("2d")!;
  const height = new Float32Array(S * S);
  const rand = (x: number, y: number) => { const n = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453; return n - Math.floor(n); };
  for (let y = 0; y < S; y++) for (let x = 0; x < S; x++) {
    let h = 0.5;
    if (finish === "brushed") h = 0.5 + (rand(y, 0) - 0.5) * 0.5;
    else if (finish === "matte-grain") h = 0.5 + (rand(x, y) - 0.5) * 0.25;
    else if (finish === "bumpy") h = 0.5 + (rand(Math.floor(x / 8), Math.floor(y / 8)) - 0.5) * 0.7;
    else if (finish === "knurled") h = ((Math.floor(x / 10) + Math.floor(y / 10)) % 2) * 0.5 + 0.25;
    height[y * S + x] = h;
  }
  const img = ctx.createImageData(S, S);
  const at = (x: number, y: number) => height[((y + S) % S) * S + ((x + S) % S)];
  const strength = 2.2;
  for (let y = 0; y < S; y++) for (let x = 0; x < S; x++) {
    const dx = (at(x - 1, y) - at(x + 1, y)) * strength;
    const dy = (at(x, y - 1) - at(x, y + 1)) * strength;
    const len = Math.hypot(dx, dy, 1);
    const i = (y * S + x) * 4;
    img.data[i] = ((dx / len) * 0.5 + 0.5) * 255;
    img.data[i + 1] = ((dy / len) * 0.5 + 0.5) * 255;
    img.data[i + 2] = ((1 / len) * 0.5 + 0.5) * 255;
    img.data[i + 3] = 255;
  }
  ctx.putImageData(img, 0, 0);
  const tex = new THREE.CanvasTexture(canvas);
  tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
  tex.repeat.set(3, 3);
  normalMapCache.set(finish, tex);
  return tex;
}


// Art-direction overlay. Reapply these decals after creating the model.
export const stickers = [
  {
    "id": "hero-hinge",
    "kind": "decal",
    "label": "Knurled hinge",
    "icon": "◎",
    "anchorNodeId": "hinge-barrel",
    "position": [
      0,
      0,
      0.16
    ],
    "normal": [
      0,
      0,
      1
    ],
    "color": "#8f9196"
  },
  {
    "id": "hero-lens",
    "kind": "decal",
    "label": "Status lens",
    "icon": "◉",
    "anchorNodeId": "lens",
    "position": [
      0,
      0.04,
      0
    ],
    "normal": [
      0,
      1,
      0
    ],
    "color": "#e8863c"
  }
] as const;
جاهز للتسليم47 عقدة مسمّاة · 8 خامة PBR
أفلت المرجع هناPNG أو JPEG أو WebP · حتى 15 MB