json-render/examples/react-three-fiber/app/scenes/deep-sea-abyss.ts

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

export const deepSeaAbyss: Scene = {
  name: "Deep Sea Abyss",
  description:
    "Bioluminescent deep ocean. Pitch black with glowing jellyfish-like creatures.",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "cam",
          "env",
          "fog",
          "ambient",
          "jelly-1-pulse",
          "jelly-2-pulse",
          "jelly-3-pulse",
          "light-1",
          "light-2",
          "light-3",
          "tentacles-1",
          "tentacles-2",
          "tentacles-3",
          "sparkles-1",
          "sparkles-2",
          "controls",
        ],
      },
      cam: {
        type: "PerspectiveCamera",
        props: {
          position: [0, 1, 6],
          fov: 55,
          makeDefault: true,
        },
        children: [],
      },
      env: {
        type: "Environment",
        props: {
          preset: "night",
          background: false,
          blur: 1,
          intensity: 0.05,
        },
        children: [],
      },
      fog: {
        type: "Fog",
        props: { color: "#000510", near: 2, far: 18 },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#001133", intensity: 0.15 },
        children: [],
      },
      "jelly-1-pulse": {
        type: "Pulse",
        props: {
          position: [0, 1, 0],
          rotation: null,
          scale: null,
          speed: 0.6,
          min: 0.85,
          max: 1.15,
        },
        children: ["jelly-1-spin"],
      },
      "jelly-1-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.2,
          axis: "y",
        },
        children: ["jelly-1-body"],
      },
      "jelly-1-body": {
        type: "DistortSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 1,
          widthSegments: 64,
          heightSegments: 32,
          color: "#00ccff",
          speed: 2,
          distort: 0.5,
          metalness: 0,
          roughness: 0.2,
        },
        children: [],
      },
      "jelly-2-pulse": {
        type: "Pulse",
        props: {
          position: [-4, -1, -3],
          rotation: null,
          scale: null,
          speed: 0.8,
          min: 0.8,
          max: 1.2,
        },
        children: ["jelly-2-spin"],
      },
      "jelly-2-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: -0.3,
          axis: "y",
        },
        children: ["jelly-2-body"],
      },
      "jelly-2-body": {
        type: "DistortSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.7,
          widthSegments: 64,
          heightSegments: 32,
          color: "#cc44ff",
          speed: 2.5,
          distort: 0.6,
          metalness: 0,
          roughness: 0.2,
        },
        children: [],
      },
      "jelly-3-pulse": {
        type: "Pulse",
        props: {
          position: [3, 0.5, -5],
          rotation: null,
          scale: null,
          speed: 0.5,
          min: 0.9,
          max: 1.1,
        },
        children: ["jelly-3-spin"],
      },
      "jelly-3-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.15,
          axis: "y",
        },
        children: ["jelly-3-body"],
      },
      "jelly-3-body": {
        type: "DistortSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.5,
          widthSegments: 64,
          heightSegments: 32,
          color: "#ff44aa",
          speed: 1.5,
          distort: 0.4,
          metalness: 0,
          roughness: 0.3,
        },
        children: [],
      },
      "light-1": {
        type: "PointLight",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          color: "#00ccff",
          intensity: 20,
          distance: 12,
          decay: 2,
          castShadow: null,
        },
        children: [],
      },
      "light-2": {
        type: "PointLight",
        props: {
          position: [-4, -1, -3],
          rotation: null,
          scale: null,
          color: "#cc44ff",
          intensity: 15,
          distance: 10,
          decay: 2,
          castShadow: null,
        },
        children: [],
      },
      "light-3": {
        type: "PointLight",
        props: {
          position: [3, 0.5, -5],
          rotation: null,
          scale: null,
          color: "#ff44aa",
          intensity: 10,
          distance: 8,
          decay: 2,
          castShadow: null,
        },
        children: [],
      },
      "tentacles-1": {
        type: "Float",
        props: {
          position: [0, -1, 0],
          rotation: null,
          scale: null,
          speed: 0.3,
          rotationIntensity: 0.5,
          floatIntensity: 0.8,
          enabled: true,
        },
        children: ["t1-s1", "t1-s2", "t1-s3", "t1-s4", "t1-s5", "t1-s6"],
      },
      "t1-s1": {
        type: "GlassSphere",
        props: {
          position: [0.3, -0.5, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.12,
          widthSegments: 16,
          heightSegments: 8,
          color: "#00ccff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t1-s2": {
        type: "GlassSphere",
        props: {
          position: [-0.2, -1.2, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.1,
          widthSegments: 16,
          heightSegments: 8,
          color: "#00ccff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t1-s3": {
        type: "GlassSphere",
        props: {
          position: [0.4, -1.9, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.08,
          widthSegments: 16,
          heightSegments: 8,
          color: "#00ccff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t1-s4": {
        type: "GlassSphere",
        props: {
          position: [-0.3, -2.5, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.07,
          widthSegments: 16,
          heightSegments: 8,
          color: "#00ccff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t1-s5": {
        type: "GlassSphere",
        props: {
          position: [0.1, -3.0, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.06,
          widthSegments: 16,
          heightSegments: 8,
          color: "#00ccff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t1-s6": {
        type: "GlassSphere",
        props: {
          position: [-0.1, -3.4, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.05,
          widthSegments: 16,
          heightSegments: 8,
          color: "#00ccff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "tentacles-2": {
        type: "Float",
        props: {
          position: [-4, -2.5, -3],
          rotation: null,
          scale: null,
          speed: 0.4,
          rotationIntensity: 0.5,
          floatIntensity: 0.8,
          enabled: true,
        },
        children: ["t2-s1", "t2-s2", "t2-s3", "t2-s4", "t2-s5"],
      },
      "t2-s1": {
        type: "GlassSphere",
        props: {
          position: [0.3, -0.5, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.1,
          widthSegments: 16,
          heightSegments: 8,
          color: "#cc44ff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t2-s2": {
        type: "GlassSphere",
        props: {
          position: [-0.2, -1.1, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.08,
          widthSegments: 16,
          heightSegments: 8,
          color: "#cc44ff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t2-s3": {
        type: "GlassSphere",
        props: {
          position: [0.4, -1.7, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.06,
          widthSegments: 16,
          heightSegments: 8,
          color: "#cc44ff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t2-s4": {
        type: "GlassSphere",
        props: {
          position: [-0.3, -2.2, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.05,
          widthSegments: 16,
          heightSegments: 8,
          color: "#cc44ff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t2-s5": {
        type: "GlassSphere",
        props: {
          position: [0.1, -2.6, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.05,
          widthSegments: 16,
          heightSegments: 8,
          color: "#cc44ff",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "tentacles-3": {
        type: "Float",
        props: {
          position: [3, -1, -5],
          rotation: null,
          scale: null,
          speed: 0.35,
          rotationIntensity: 0.5,
          floatIntensity: 0.8,
          enabled: true,
        },
        children: ["t3-s1", "t3-s2", "t3-s3", "t3-s4"],
      },
      "t3-s1": {
        type: "GlassSphere",
        props: {
          position: [0.3, -0.5, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.09,
          widthSegments: 16,
          heightSegments: 8,
          color: "#ff44aa",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t3-s2": {
        type: "GlassSphere",
        props: {
          position: [-0.2, -1.0, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.07,
          widthSegments: 16,
          heightSegments: 8,
          color: "#ff44aa",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t3-s3": {
        type: "GlassSphere",
        props: {
          position: [0.4, -1.5, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.06,
          widthSegments: 16,
          heightSegments: 8,
          color: "#ff44aa",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "t3-s4": {
        type: "GlassSphere",
        props: {
          position: [-0.1, -1.9, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          radius: 0.05,
          widthSegments: 16,
          heightSegments: 8,
          color: "#ff44aa",
          transmission: 0.9,
          thickness: 0.3,
          roughness: 0.1,
          chromaticAberration: 0.1,
          ior: 1.5,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },
      "sparkles-1": {
        type: "Sparkles",
        props: {
          position: [0, 0, -3],
          rotation: null,
          scale: [15, 10, 15],
          count: 300,
          speed: 0.1,
          opacity: 0.4,
          color: "#00aaff",
          size: 1,
          noise: 3,
        },
        children: [],
      },
      "sparkles-2": {
        type: "Sparkles",
        props: {
          position: [0, -2, 0],
          rotation: null,
          scale: [12, 6, 12],
          count: 150,
          speed: 0.05,
          opacity: 0.2,
          color: "#8844ff",
          size: 0.8,
          noise: 2,
        },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: true,
          dampingFactor: null,
          enableZoom: true,
          enablePan: null,
          enableRotate: true,
          minDistance: 3,
          maxDistance: 18,
          minPolarAngle: null,
          maxPolarAngle: null,
          autoRotate: true,
          autoRotateSpeed: 0.15,
        },
        children: [],
      },
    },
  },
};