Studio — PhotoTo3D

Signal Camera · demo reference
STORY PATHInteractive hero
01
RevealFull silhouette and material read
02
FeatureMove into the defining component
03
ActionEnd on a product link or CTA
REFERENCESignal Camera · demo reference
TYPESCRIPT FACTORY · 8 PARTS
import * as THREE from "three";

const spec = {
  "version": "2.0",
  "objectName": "Signal camera",
  "objectClass": "mirrorless camera",
  "summary": "A compact camera body with a stepped lens, top controls, grip and viewfinder.",
  "confidence": 0.94,
  "suggestedCamera": {
    "position": [
      5,
      3.4,
      6
    ],
    "target": [
      0,
      0,
      0
    ]
  },
  "materials": [
    {
      "name": "cream body",
      "color": "#ece7db",
      "roughness": 0.5,
      "metalness": 0,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "surface": "matte-grain",
      "clearcoat": 0.25,
      "clearcoatRoughness": 0.5
    },
    {
      "name": "black metal",
      "color": "#1c1a17",
      "roughness": 0.35,
      "metalness": 0.85,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "surface": "brushed",
      "clearcoat": 0.4,
      "clearcoatRoughness": 0.3
    },
    {
      "name": "lens glass",
      "color": "#aebfd0",
      "roughness": 0.04,
      "metalness": 0,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "transmission": 0.85,
      "ior": 1.5,
      "clearcoat": 1,
      "clearcoatRoughness": 0.05
    },
    {
      "name": "terracotta trim",
      "color": "#e8863c",
      "roughness": 0.35,
      "metalness": 0.3,
      "emissive": "#000000",
      "emissiveIntensity": 0,
      "clearcoat": 0.5,
      "clearcoatRoughness": 0.25
    }
  ],
  "nodes": [
    {
      "id": "body",
      "name": "camera body",
      "parentId": "",
      "primitive": "box",
      "size": [
        2.8,
        1.85,
        1.15
      ],
      "radiusTop": 1.4,
      "radiusBottom": 1.4,
      "height": 1.85,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0,
        0,
        0
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 0,
      "castShadow": true
    },
    {
      "id": "grip",
      "name": "right hand grip",
      "parentId": "",
      "primitive": "box",
      "size": [
        0.5,
        1.65,
        1.25
      ],
      "radiusTop": 0.25,
      "radiusBottom": 0.25,
      "height": 1.65,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        1.28,
        -0.05,
        0.16
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "viewfinder",
      "name": "viewfinder hump",
      "parentId": "",
      "primitive": "box",
      "size": [
        0.85,
        0.36,
        0.7
      ],
      "radiusTop": 0.425,
      "radiusBottom": 0.425,
      "height": 0.36,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        -0.35,
        1.03,
        -0.1
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "lens",
      "name": "lens barrel",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        1.35,
        0.8,
        1.35
      ],
      "radiusTop": 0.675,
      "radiusBottom": 0.675,
      "height": 0.8,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        -0.28,
        -0.08,
        0.92
      ],
      "rotation": [
        1.5707963267948966,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "lens-ring",
      "name": "focus ring",
      "parentId": "",
      "primitive": "torus",
      "size": [
        1.36,
        0.1,
        1.36
      ],
      "radiusTop": 0.68,
      "radiusBottom": 0.68,
      "height": 0.1,
      "radialSegments": 32,
      "tube": 0.1,
      "position": [
        -0.28,
        -0.08,
        1.36
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    },
    {
      "id": "glass",
      "name": "front lens glass",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        1.05,
        0.08,
        1.05
      ],
      "radiusTop": 0.52,
      "radiusBottom": 0.52,
      "height": 0.08,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        -0.28,
        -0.08,
        1.43
      ],
      "rotation": [
        1.5707963267948966,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 2,
      "castShadow": true
    },
    {
      "id": "shutter",
      "name": "shutter button",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.25,
        0.12,
        0.25
      ],
      "radiusTop": 0.125,
      "radiusBottom": 0.125,
      "height": 0.12,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        0.72,
        1.01,
        0.12
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 3,
      "castShadow": true
    },
    {
      "id": "dial",
      "name": "mode dial",
      "parentId": "",
      "primitive": "cylinder",
      "size": [
        0.38,
        0.13,
        0.38
      ],
      "radiusTop": 0.19,
      "radiusBottom": 0.19,
      "height": 0.13,
      "radialSegments": 32,
      "tube": 0.08,
      "position": [
        -0.9,
        1.02,
        0
      ],
      "rotation": [
        0,
        0,
        0
      ],
      "scale": [
        1,
        1,
        1
      ],
      "materialIndex": 1,
      "castShadow": true
    }
  ],
  "criticalFeatures": [
    "rectangular camera silhouette",
    "prominent stepped circular lens",
    "right-side grip",
    "top viewfinder and control dials"
  ],
  "uncertainties": [
    "rear controls are not visible"
  ]
} as const;

export function createSignalCameraModel() {
  const root = new THREE.Group();
  root.name = spec.objectName;
  const materials = spec.materials.map((m) => new THREE.MeshStandardMaterial({
    color: m.color, roughness: m.roughness, metalness: m.metalness,
    emissive: m.emissive, emissiveIntensity: m.emissiveIntensity,
  }));
  const nodes = new Map<string, THREE.Object3D>();

  for (const part of spec.nodes) {
    const geometry = createGeometry(part);
    const mesh = new THREE.Mesh(geometry, 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: (typeof spec.nodes)[number]): THREE.BufferGeometry {
  switch (part.primitive) {
    case "sphere": return new THREE.SphereGeometry(part.radiusTop, part.radialSegments, Math.max(8, 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: return new THREE.BoxGeometry(...part.size);
  }
}
Ready to ship8 named nodes · 4 PBR materials
Drop your referencePNG, JPEG or WebP · up to 15 MB