json-render/examples/react-three-fiber/app/scenes/product-showroom.ts

import type { Scene } from "./_helpers";

export const productShowroom: Scene = {
  name: "Product Showroom",
  description:
    "Sleek glass torus knot on a pedestal with studio lighting, reflections, and contact shadows",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "camera",
          "env",
          "backdrop",
          "ambient",
          "key-light",
          "fill-light",
          "rim-light",
          "accent-light",
          "pedestal",
          "hero-float",
          "accent1",
          "accent2",
          "accent3",
          "floor",
          "shadows",
          "sparkles",
          "fx",
          "controls",
        ],
      },
      camera: {
        type: "PerspectiveCamera",
        props: {
          position: [0, 2, 6],
          rotation: null,
          scale: null,
          fov: 40,
          near: null,
          far: null,
          makeDefault: true,
        },
        children: [],
      },
      env: {
        type: "Environment",
        props: {
          preset: "studio",
          background: false,
          blur: 0.5,
          intensity: 0.8,
        },
        children: [],
      },
      backdrop: {
        type: "Backdrop",
        props: {
          position: [0, -0.5, -3],
          rotation: null,
          scale: [25, 10, 8],
          floor: 0.3,
          segments: 30,
          receiveShadow: true,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#e8e0f0", intensity: 0.25 },
        children: [],
      },
      "key-light": {
        type: "SpotLight",
        props: {
          position: [5, 8, 3],
          rotation: null,
          scale: null,
          color: "#ffffff",
          intensity: 80,
          distance: 25,
          decay: null,
          angle: 0.5,
          penumbra: 0.8,
          castShadow: true,
        },
        children: [],
      },
      "fill-light": {
        type: "SpotLight",
        props: {
          position: [-4, 5, 2],
          rotation: null,
          scale: null,
          color: "#aaccff",
          intensity: 30,
          distance: 20,
          decay: null,
          angle: 0.6,
          penumbra: 1,
          castShadow: false,
        },
        children: [],
      },
      "rim-light": {
        type: "SpotLight",
        props: {
          position: [0, 3, -5],
          rotation: null,
          scale: null,
          color: "#ffddcc",
          intensity: 40,
          distance: 15,
          decay: null,
          angle: 0.4,
          penumbra: 0.5,
          castShadow: false,
        },
        children: [],
      },
      "accent-light": {
        type: "PointLight",
        props: {
          position: [0, 0.5, 0],
          rotation: null,
          scale: null,
          color: "#ffffff",
          intensity: 5,
          distance: 4,
          decay: null,
          castShadow: null,
        },
        children: [],
      },
      pedestal: {
        type: "Group",
        props: { position: [0, 0, 0], rotation: null, scale: null },
        children: ["ped-base", "ped-column", "ped-top"],
      },
      "ped-base": {
        type: "Cylinder",
        props: {
          position: [0, 0.05, 0],
          rotation: null,
          scale: null,
          radiusTop: 1.2,
          radiusBottom: 1.3,
          height: 0.1,
          radialSegments: 48,
          castShadow: null,
          receiveShadow: null,
          material: {
            color: "#1a1a1a",
            metalness: 0.9,
            roughness: 0.1,
          },
        },
        children: [],
      },
      "ped-column": {
        type: "Cylinder",
        props: {
          position: [0, 0.45, 0],
          rotation: null,
          scale: null,
          radiusTop: 0.6,
          radiusBottom: 0.8,
          height: 0.7,
          radialSegments: 48,
          castShadow: null,
          receiveShadow: null,
          material: {
            color: "#111111",
            metalness: 0.95,
            roughness: 0.05,
          },
        },
        children: [],
      },
      "ped-top": {
        type: "Cylinder",
        props: {
          position: [0, 0.85, 0],
          rotation: null,
          scale: null,
          radiusTop: 0.9,
          radiusBottom: 0.7,
          height: 0.1,
          radialSegments: 48,
          castShadow: null,
          receiveShadow: null,
          material: {
            color: "#1a1a1a",
            metalness: 0.9,
            roughness: 0.1,
          },
        },
        children: [],
      },
      "hero-float": {
        type: "Float",
        props: {
          position: [0, 2.2, 0],
          rotation: null,
          scale: null,
          speed: 1.5,
          rotationIntensity: 0.3,
          floatIntensity: 0.4,
          enabled: true,
        },
        children: ["hero-spin"],
      },
      "hero-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.3,
          axis: "y",
        },
        children: ["hero-object"],
      },
      "hero-object": {
        type: "TorusKnot",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.6,
          tube: 0.22,
          p: 2,
          q: 3,
          tubularSegments: 128,
          radialSegments: 24,
          material: {
            color: "#ffffff",
            metalness: 1,
            roughness: 0,
          },
        },
        children: [],
      },
      accent1: {
        type: "Float",
        props: {
          position: [-1.5, 1.8, 0.5],
          rotation: null,
          scale: null,
          speed: 2,
          rotationIntensity: 0.5,
          floatIntensity: 1.2,
          enabled: true,
        },
        children: ["accent1-body"],
      },
      "accent1-body": {
        type: "GlassSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.15,
          widthSegments: null,
          heightSegments: null,
          color: "#eeeeff",
          transmission: 1,
          thickness: 0.3,
          roughness: 0,
          chromaticAberration: 0.06,
          ior: 1.5,
          distortion: null,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      accent2: {
        type: "Float",
        props: {
          position: [1.2, 2.5, -0.8],
          rotation: null,
          scale: null,
          speed: 1.8,
          rotationIntensity: 0.4,
          floatIntensity: 1.5,
          enabled: true,
        },
        children: ["accent2-body"],
      },
      "accent2-body": {
        type: "GlassSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.1,
          widthSegments: null,
          heightSegments: null,
          color: "#ffeeff",
          transmission: 1,
          thickness: 0.2,
          roughness: 0,
          chromaticAberration: 0.08,
          ior: 1.6,
          distortion: null,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      accent3: {
        type: "Float",
        props: {
          position: [0.8, 1.5, 1.2],
          rotation: null,
          scale: null,
          speed: 2.2,
          rotationIntensity: 0.6,
          floatIntensity: 0.8,
          enabled: true,
        },
        children: ["accent3-body"],
      },
      "accent3-body": {
        type: "GlassSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
          color: "#eeffee",
          transmission: 1,
          thickness: 0.25,
          roughness: 0,
          chromaticAberration: 0.05,
          ior: 1.4,
          distortion: null,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      floor: {
        type: "ReflectorPlane",
        props: {
          position: [0, -0.5, 0],
          rotation: [-1.5708, 0, 0],
          scale: null,
          width: 25,
          height: 25,
          color: "#0a0a0a",
          resolution: 1024,
          blur: 300,
          mirror: 0.6,
          mixBlur: 8,
          mixStrength: 2,
          depthScale: 0.2,
          metalness: 0.8,
          roughness: 0.3,
        },
        children: [],
      },
      shadows: {
        type: "ContactShadows",
        props: {
          position: [0, -0.49, 0],
          rotation: null,
          scale: null,
          opacity: 0.5,
          width: 10,
          height: 10,
          blur: 2,
          near: null,
          far: 5,
          smooth: true,
          resolution: 512,
          frames: null,
          color: "#000000",
        },
        children: [],
      },
      sparkles: {
        type: "Sparkles",
        props: {
          position: [0, 2, 0],
          rotation: null,
          scale: [6, 4, 6],
          count: 30,
          speed: 0.05,
          opacity: 0.15,
          color: "#ffffff",
          size: 0.3,
          noise: 0.5,
        },
        children: [],
      },
      fx: {
        type: "EffectComposer",
        props: { enabled: true, multisampling: 8 },
        children: ["bloom", "vignette"],
      },
      bloom: {
        type: "Bloom",
        props: {
          intensity: 0.5,
          luminanceThreshold: 0.3,
          luminanceSmoothing: 0.4,
          mipmapBlur: true,
        },
        children: [],
      },
      vignette: {
        type: "Vignette",
        props: { offset: 0.3, darkness: 0.5 },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: true,
          dampingFactor: null,
          enableZoom: null,
          enablePan: null,
          enableRotate: null,
          minDistance: 3,
          maxDistance: 12,
          minPolarAngle: 0.3,
          maxPolarAngle: 1.4,
          autoRotate: true,
          autoRotateSpeed: 1,
          target: [0, 1.5, 0],
        },
        children: [],
      },
    },
  },
};