Studio — PhotoTo3D

PhotoTo3D
Cadence Pro case · material study
So funktioniert's
3D preview unavailableThis browser could not start WebGL. The model data and code export still work.
Arbeitsbereich wird gestartetDie 3D-Bühne wird vorbereitet
Materialien, Kamerasteuerung und das Oberflächen-Ankersystem werden kompiliert.
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;
Fertig zum Ausliefern47 benannte Nodes · 8 PBR-Materialien
Vorlage hier ablegenPNG, JPEG oder WebP · bis zu 15 MB