json-render/examples/react-three-fiber/app/scenes/portal-gallery.ts

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

export const portalGallery: Scene = {
  name: "Portal Gallery",
  description:
    "Three framed portals into different worlds -- sunset clouds, starfield, and enchanted forest",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "cam",
          "env",
          "ambient",
          "directional",
          "floor",
          "shadows",
          "frame1",
          "frame2",
          "frame3",
          "gallery-sparkles",
          "post",
          "controls",
        ],
      },
      cam: {
        type: "PerspectiveCamera",
        props: {
          position: [0, 2, 7],
          rotation: null,
          scale: null,
          fov: 50,
          near: 0.1,
          far: 200,
          makeDefault: true,
        },
        children: [],
      },
      env: {
        type: "Environment",
        props: {
          preset: "lobby",
          background: false,
          blur: 0,
          intensity: 0.4,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#e8e0d8", intensity: 0.5 },
        children: [],
      },
      directional: {
        type: "DirectionalLight",
        props: {
          position: [5, 8, 3],
          rotation: null,
          scale: null,
          color: "#ffffff",
          intensity: 1,
          castShadow: true,
        },
        children: [],
      },
      floor: {
        type: "ReflectorPlane",
        props: {
          position: [0, 0, 0],
          rotation: [-1.5708, 0, 0],
          scale: null,
          width: 30,
          height: 30,
          color: "#2a2a2a",
          resolution: 1024,
          blur: 400,
          mirror: 0.4,
          mixBlur: 10,
          mixStrength: 1.5,
          metalness: 0.5,
          roughness: 0.8,
        },
        children: [],
      },
      shadows: {
        type: "ContactShadows",
        props: {
          position: [0, 0.01, 0],
          rotation: null,
          scale: null,
          opacity: 0.4,
          width: 20,
          height: 20,
          blur: 2.5,
          far: 8,
          color: "#000000",
        },
        children: [],
      },

      // --- PORTAL 1 (left, sunset world) ---
      frame1: {
        type: "Group",
        props: {
          position: [-3.5, 2, -2],
          rotation: [0, 0.3, 0],
          scale: null,
        },
        children: [
          "frame1-top",
          "frame1-bottom",
          "frame1-left",
          "frame1-right",
          "portal1-mesh",
        ],
      },
      "frame1-top": {
        type: "Box",
        props: {
          position: [0, 1.55, 0],
          rotation: null,
          scale: null,
          width: 2.3,
          height: 0.15,
          depth: 0.15,
          material: { color: "#8B7355", metalness: 0.3, roughness: 0.6 },
        },
        children: [],
      },
      "frame1-bottom": {
        type: "Box",
        props: {
          position: [0, -1.55, 0],
          rotation: null,
          scale: null,
          width: 2.3,
          height: 0.15,
          depth: 0.15,
          material: { color: "#8B7355", metalness: 0.3, roughness: 0.6 },
        },
        children: [],
      },
      "frame1-left": {
        type: "Box",
        props: {
          position: [-1.075, 0, 0],
          rotation: null,
          scale: null,
          width: 0.15,
          height: 3.25,
          depth: 0.15,
          material: { color: "#8B7355", metalness: 0.3, roughness: 0.6 },
        },
        children: [],
      },
      "frame1-right": {
        type: "Box",
        props: {
          position: [1.075, 0, 0],
          rotation: null,
          scale: null,
          width: 0.15,
          height: 3.25,
          depth: 0.15,
          material: { color: "#8B7355", metalness: 0.3, roughness: 0.6 },
        },
        children: [],
      },
      "portal1-mesh": {
        type: "Plane",
        props: {
          position: null,
          rotation: null,
          scale: null,
          width: 2,
          height: 3,
        },
        children: ["portal1-mat"],
      },
      "portal1-mat": {
        type: "MeshPortalMaterial",
        props: { blend: 0, blur: 0.5, resolution: 512 },
        children: [
          "p1-sky",
          "p1-sun-light",
          "p1-cloud1",
          "p1-cloud2",
          "p1-cloud3",
          "p1-ground",
        ],
      },
      "p1-sky": {
        type: "Sky",
        props: {
          distance: null,
          sunPosition: [100, 10, 50],
          inclination: null,
          azimuth: null,
          rayleigh: 2,
          turbidity: 10,
          mieCoefficient: 0.005,
          mieDirectionalG: null,
        },
        children: [],
      },
      "p1-sun-light": {
        type: "DirectionalLight",
        props: {
          position: [5, 5, 3],
          rotation: null,
          scale: null,
          color: "#ffaa55",
          intensity: 2,
          castShadow: false,
        },
        children: [],
      },
      "p1-cloud1": {
        type: "Cloud",
        props: {
          position: [-3, 4, -5],
          rotation: null,
          scale: null,
          seed: 1,
          segments: 20,
          bounds: [6, 2, 3],
          opacity: 0.6,
          color: "#ffddaa",
          speed: 0.1,
          volume: 5,
          fade: null,
          growth: null,
        },
        children: [],
      },
      "p1-cloud2": {
        type: "Cloud",
        props: {
          position: [4, 5, -8],
          rotation: null,
          scale: null,
          seed: 7,
          segments: 25,
          bounds: [8, 2, 4],
          opacity: 0.5,
          color: "#ffccaa",
          speed: 0.08,
          volume: 6,
          fade: null,
          growth: null,
        },
        children: [],
      },
      "p1-cloud3": {
        type: "Cloud",
        props: {
          position: [0, 3.5, -4],
          rotation: null,
          scale: null,
          seed: 14,
          segments: 15,
          bounds: [5, 1.5, 2.5],
          opacity: 0.7,
          color: "#ffeedd",
          speed: 0.12,
          volume: 4,
          fade: null,
          growth: null,
        },
        children: [],
      },
      "p1-ground": {
        type: "Plane",
        props: {
          position: [0, -2, 0],
          rotation: [-1.5708, 0, 0],
          scale: null,
          width: 30,
          height: 30,
          material: { color: "#886644", roughness: 1 },
        },
        children: [],
      },

      // --- PORTAL 2 (center, night/stars world) ---
      frame2: {
        type: "Group",
        props: {
          position: [0, 2, -3],
          rotation: null,
          scale: null,
        },
        children: [
          "frame2-top",
          "frame2-bottom",
          "frame2-left",
          "frame2-right",
          "portal2-mesh",
        ],
      },
      "frame2-top": {
        type: "Box",
        props: {
          position: [0, 1.55, 0],
          rotation: null,
          scale: null,
          width: 2.3,
          height: 0.15,
          depth: 0.15,
          material: { color: "#555566", metalness: 0.8, roughness: 0.2 },
        },
        children: [],
      },
      "frame2-bottom": {
        type: "Box",
        props: {
          position: [0, -1.55, 0],
          rotation: null,
          scale: null,
          width: 2.3,
          height: 0.15,
          depth: 0.15,
          material: { color: "#555566", metalness: 0.8, roughness: 0.2 },
        },
        children: [],
      },
      "frame2-left": {
        type: "Box",
        props: {
          position: [-1.075, 0, 0],
          rotation: null,
          scale: null,
          width: 0.15,
          height: 3.25,
          depth: 0.15,
          material: { color: "#555566", metalness: 0.8, roughness: 0.2 },
        },
        children: [],
      },
      "frame2-right": {
        type: "Box",
        props: {
          position: [1.075, 0, 0],
          rotation: null,
          scale: null,
          width: 0.15,
          height: 3.25,
          depth: 0.15,
          material: { color: "#555566", metalness: 0.8, roughness: 0.2 },
        },
        children: [],
      },
      "portal2-mesh": {
        type: "Plane",
        props: {
          position: null,
          rotation: null,
          scale: null,
          width: 2,
          height: 3,
        },
        children: ["portal2-mat"],
      },
      "portal2-mat": {
        type: "MeshPortalMaterial",
        props: { blend: 0, blur: 0.5, resolution: 512 },
        children: [
          "p2-stars",
          "p2-ambient",
          "p2-nebula1",
          "p2-nebula2",
          "p2-sparkles",
        ],
      },
      "p2-stars": {
        type: "Stars",
        props: {
          radius: 80,
          depth: 40,
          count: 6000,
          factor: 5,
          saturation: 0.5,
          fade: true,
          speed: 0.3,
        },
        children: [],
      },
      "p2-ambient": {
        type: "AmbientLight",
        props: { color: "#111133", intensity: 0.3 },
        children: [],
      },
      "p2-nebula1": {
        type: "Sphere",
        props: {
          position: [3, 2, -8],
          rotation: null,
          scale: null,
          radius: 2,
          widthSegments: null,
          heightSegments: null,
          material: {
            color: "#4400aa",
            emissive: "#4400aa",
            emissiveIntensity: 0.5,
            transparent: true,
            opacity: 0.3,
          },
        },
        children: [],
      },
      "p2-nebula2": {
        type: "Sphere",
        props: {
          position: [-4, -1, -10],
          rotation: null,
          scale: null,
          radius: 3,
          widthSegments: null,
          heightSegments: null,
          material: {
            color: "#aa0044",
            emissive: "#aa0044",
            emissiveIntensity: 0.4,
            transparent: true,
            opacity: 0.25,
          },
        },
        children: [],
      },
      "p2-sparkles": {
        type: "Sparkles",
        props: {
          position: [0, 0, -5],
          rotation: null,
          scale: [10, 10, 10],
          count: 200,
          speed: 0.2,
          opacity: 0.8,
          color: "#aabbff",
          size: 2,
          noise: 3,
        },
        children: [],
      },

      // --- PORTAL 3 (right, forest/nature world) ---
      frame3: {
        type: "Group",
        props: {
          position: [3.5, 2, -2],
          rotation: [0, -0.3, 0],
          scale: null,
        },
        children: [
          "frame3-top",
          "frame3-bottom",
          "frame3-left",
          "frame3-right",
          "portal3-mesh",
        ],
      },
      "frame3-top": {
        type: "Box",
        props: {
          position: [0, 1.55, 0],
          rotation: null,
          scale: null,
          width: 2.3,
          height: 0.15,
          depth: 0.15,
          material: { color: "#6B4423", metalness: 0.1, roughness: 0.8 },
        },
        children: [],
      },
      "frame3-bottom": {
        type: "Box",
        props: {
          position: [0, -1.55, 0],
          rotation: null,
          scale: null,
          width: 2.3,
          height: 0.15,
          depth: 0.15,
          material: { color: "#6B4423", metalness: 0.1, roughness: 0.8 },
        },
        children: [],
      },
      "frame3-left": {
        type: "Box",
        props: {
          position: [-1.075, 0, 0],
          rotation: null,
          scale: null,
          width: 0.15,
          height: 3.25,
          depth: 0.15,
          material: { color: "#6B4423", metalness: 0.1, roughness: 0.8 },
        },
        children: [],
      },
      "frame3-right": {
        type: "Box",
        props: {
          position: [1.075, 0, 0],
          rotation: null,
          scale: null,
          width: 0.15,
          height: 3.25,
          depth: 0.15,
          material: { color: "#6B4423", metalness: 0.1, roughness: 0.8 },
        },
        children: [],
      },
      "portal3-mesh": {
        type: "Plane",
        props: {
          position: null,
          rotation: null,
          scale: null,
          width: 2,
          height: 3,
        },
        children: ["portal3-mat"],
      },
      "portal3-mat": {
        type: "MeshPortalMaterial",
        props: { blend: 0, blur: 0.5, resolution: 512 },
        children: [
          "p3-env",
          "p3-ambient",
          "p3-sun",
          "p3-tree1",
          "p3-tree2",
          "p3-tree3",
          "p3-tree4",
          "p3-tree5",
          "p3-ground",
          "p3-fireflies",
        ],
      },
      "p3-env": {
        type: "Environment",
        props: { preset: "forest", background: false, blur: 0, intensity: 0.8 },
        children: [],
      },
      "p3-ambient": {
        type: "AmbientLight",
        props: { color: "#334422", intensity: 0.4 },
        children: [],
      },
      "p3-sun": {
        type: "DirectionalLight",
        props: {
          position: [-3, 8, 2],
          rotation: null,
          scale: null,
          color: "#aaffaa",
          intensity: 1.5,
          castShadow: true,
        },
        children: [],
      },
      "p3-tree1": {
        type: "Group",
        props: { position: [-2, -2, -4], rotation: null, scale: null },
        children: ["p3-t1-trunk", "p3-t1-leaves"],
      },
      "p3-t1-trunk": {
        type: "Cylinder",
        props: {
          position: [0, 0.6, 0],
          rotation: null,
          scale: null,
          radiusTop: 0.08,
          radiusBottom: 0.12,
          height: 1.2,
          radialSegments: 8,
          material: { color: "#4a3520", roughness: 0.9 },
        },
        children: [],
      },
      "p3-t1-leaves": {
        type: "Cone",
        props: {
          position: [0, 1.8, 0],
          rotation: null,
          scale: null,
          radius: 0.6,
          height: 1.5,
          radialSegments: 8,
          material: { color: "#2d5a1e", roughness: 0.8 },
        },
        children: [],
      },
      "p3-tree2": {
        type: "Group",
        props: { position: [1.5, -2, -6], rotation: null, scale: null },
        children: ["p3-t2-trunk", "p3-t2-leaves"],
      },
      "p3-t2-trunk": {
        type: "Cylinder",
        props: {
          position: [0, 0.8, 0],
          rotation: null,
          scale: null,
          radiusTop: 0.1,
          radiusBottom: 0.15,
          height: 1.6,
          radialSegments: 8,
          material: { color: "#3d2b15", roughness: 0.9 },
        },
        children: [],
      },
      "p3-t2-leaves": {
        type: "Cone",
        props: {
          position: [0, 2.3, 0],
          rotation: null,
          scale: null,
          radius: 0.8,
          height: 2,
          radialSegments: 8,
          material: { color: "#1e4a10", roughness: 0.8 },
        },
        children: [],
      },
      "p3-tree3": {
        type: "Group",
        props: { position: [-0.5, -2, -3], rotation: null, scale: null },
        children: ["p3-t3-trunk", "p3-t3-leaves"],
      },
      "p3-t3-trunk": {
        type: "Cylinder",
        props: {
          position: [0, 0.5, 0],
          rotation: null,
          scale: null,
          radiusTop: 0.06,
          radiusBottom: 0.1,
          height: 1,
          radialSegments: 8,
          material: { color: "#4a3520", roughness: 0.9 },
        },
        children: [],
      },
      "p3-t3-leaves": {
        type: "Cone",
        props: {
          position: [0, 1.5, 0],
          rotation: null,
          scale: null,
          radius: 0.5,
          height: 1.2,
          radialSegments: 8,
          material: { color: "#3a6b2a", roughness: 0.8 },
        },
        children: [],
      },
      "p3-tree4": {
        type: "Group",
        props: { position: [3, -2, -8], rotation: null, scale: null },
        children: ["p3-t4-trunk", "p3-t4-leaves"],
      },
      "p3-t4-trunk": {
        type: "Cylinder",
        props: {
          position: [0, 1, 0],
          rotation: null,
          scale: null,
          radiusTop: 0.12,
          radiusBottom: 0.18,
          height: 2,
          radialSegments: 8,
          material: { color: "#3d2b15", roughness: 0.9 },
        },
        children: [],
      },
      "p3-t4-leaves": {
        type: "Cone",
        props: {
          position: [0, 2.8, 0],
          rotation: null,
          scale: null,
          radius: 1,
          height: 2.5,
          radialSegments: 8,
          material: { color: "#2d5a1e", roughness: 0.8 },
        },
        children: [],
      },
      "p3-tree5": {
        type: "Group",
        props: { position: [-3.5, -2, -7], rotation: null, scale: null },
        children: ["p3-t5-trunk", "p3-t5-leaves"],
      },
      "p3-t5-trunk": {
        type: "Cylinder",
        props: {
          position: [0, 0.7, 0],
          rotation: null,
          scale: null,
          radiusTop: 0.09,
          radiusBottom: 0.13,
          height: 1.4,
          radialSegments: 8,
          material: { color: "#4a3520", roughness: 0.9 },
        },
        children: [],
      },
      "p3-t5-leaves": {
        type: "Cone",
        props: {
          position: [0, 2, 0],
          rotation: null,
          scale: null,
          radius: 0.7,
          height: 1.8,
          radialSegments: 8,
          material: { color: "#1e4a10", roughness: 0.8 },
        },
        children: [],
      },
      "p3-ground": {
        type: "Plane",
        props: {
          position: [0, -2, 0],
          rotation: [-1.5708, 0, 0],
          scale: null,
          width: 30,
          height: 30,
          material: { color: "#3a5a2a", roughness: 1 },
        },
        children: [],
      },
      "p3-fireflies": {
        type: "Sparkles",
        props: {
          position: [0, 0, -5],
          rotation: null,
          scale: [6, 4, 6],
          count: 80,
          speed: 0.3,
          opacity: 0.7,
          color: "#aaff66",
          size: 1.5,
          noise: 2,
        },
        children: [],
      },

      "gallery-sparkles": {
        type: "Sparkles",
        props: {
          position: [0, 3, 0],
          rotation: null,
          scale: [12, 5, 10],
          count: 40,
          speed: 0.05,
          opacity: 0.2,
          color: "#ffffff",
          size: 0.3,
          noise: null,
        },
        children: [],
      },
      post: {
        type: "EffectComposer",
        props: { enabled: true, multisampling: 8 },
        children: ["bloom", "vignette"],
      },
      bloom: {
        type: "Bloom",
        props: {
          intensity: 0.6,
          luminanceThreshold: 0.3,
          luminanceSmoothing: null,
          mipmapBlur: true,
        },
        children: [],
      },
      vignette: {
        type: "Vignette",
        props: { offset: 0.4, darkness: 0.4 },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: true,
          dampingFactor: null,
          enableZoom: true,
          enablePan: null,
          enableRotate: true,
          minDistance: 4,
          maxDistance: 16,
          minPolarAngle: null,
          maxPolarAngle: null,
          autoRotate: true,
          autoRotateSpeed: 0.3,
          target: [0, 1.8, -2],
        },
        children: [],
      },
    },
  },
};