json-render/examples/react-three-fiber/app/scenes/floating-islands.ts

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

export const floatingIslands: Scene = {
  name: "Floating Islands",
  description:
    "Sky, clouds, islands with trees and bridges floating in sunset light",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "cam",
          "sky",
          "ambient",
          "sun",
          "clouds",
          "island-main-float",
          "island-left-float",
          "island-right-float",
          "island-far-float",
          "island-tiny1-float",
          "island-tiny2-float",
          "bridge-1",
          "bridge-2",
          "sparkles",
          "controls",
        ],
      },
      cam: {
        type: "PerspectiveCamera",
        props: {
          position: [8, 6, 14],
          rotation: null,
          scale: null,
          fov: 50,
          near: 0.1,
          far: 500,
          makeDefault: true,
        },
        children: [],
      },
      sky: {
        type: "Environment",
        props: {
          preset: "dawn",
          background: true,
          blur: 0.8,
          intensity: 0.5,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#ffd4a0", intensity: 0.5 },
        children: [],
      },
      sun: {
        type: "DirectionalLight",
        props: {
          position: [8, 12, 6],
          rotation: null,
          scale: null,
          color: "#ffcc88",
          intensity: 2.5,
          castShadow: true,
        },
        children: [],
      },
      clouds: {
        type: "Cloud",
        props: {
          position: [0, 4, -8],
          rotation: null,
          scale: null,
          seed: 7,
          segments: 40,
          bounds: [25, 3, 20],
          volume: 10,
          speed: 0.1,
          fade: 25,
          opacity: 0.6,
          color: "#ffe8d0",
          growth: 8,
        },
        children: [],
      },

      "island-main-float": {
        type: "Float",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          speed: 0.4,
          rotationIntensity: 0.02,
          floatIntensity: 0.3,
          enabled: true,
        },
        children: ["island-main"],
      },
      "island-main": {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "main-base",
          "main-top",
          "main-underhang",
          "tree-1-trunk",
          "tree-1-canopy",
          "tree-2-trunk",
          "tree-2-canopy",
          "tree-3-trunk",
          "tree-3-canopy",
          "house-base",
          "house-roof",
        ],
      },
      "main-base": {
        type: "Cylinder",
        props: {
          position: [0, -0.5, 0],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#8B6914",
            metalness: 0.1,
            roughness: 0.9,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 3,
          radiusBottom: 1.5,
          height: 2,
          radialSegments: 16,
        },
        children: [],
      },
      "main-top": {
        type: "Cylinder",
        props: {
          position: [0, 0.55, 0],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#4a8c3f",
            metalness: 0,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 3.1,
          radiusBottom: 3,
          height: 0.3,
          radialSegments: 16,
        },
        children: [],
      },
      "main-underhang": {
        type: "Cone",
        props: {
          position: [0, -2.5, 0],
          rotation: [PI, 0, 0],
          scale: null,
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#6B4513",
            metalness: 0.1,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 1.5,
          height: 2.5,
          radialSegments: 12,
        },
        children: [],
      },
      "tree-1-trunk": {
        type: "Cylinder",
        props: {
          position: [1, 1, 0.5],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#8B5A2B",
            metalness: 0,
            roughness: 1,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 0.06,
          radiusBottom: 0.1,
          height: 1.5,
          radialSegments: 8,
        },
        children: [],
      },
      "tree-1-canopy": {
        type: "Sphere",
        props: {
          position: [1, 2.2, 0.5],
          rotation: null,
          scale: [1, 1.2, 1],
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#2d7a2d",
            metalness: 0,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.6,
          widthSegments: 16,
          heightSegments: 12,
        },
        children: [],
      },
      "tree-2-trunk": {
        type: "Cylinder",
        props: {
          position: [-1.2, 0.8, -0.8],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#8B5A2B",
            metalness: 0,
            roughness: 1,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 0.05,
          radiusBottom: 0.08,
          height: 1.1,
          radialSegments: 8,
        },
        children: [],
      },
      "tree-2-canopy": {
        type: "Sphere",
        props: {
          position: [-1.2, 1.7, -0.8],
          rotation: null,
          scale: [1, 1.3, 1],
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#3a8c3a",
            metalness: 0,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.45,
          widthSegments: 16,
          heightSegments: 12,
        },
        children: [],
      },
      "tree-3-trunk": {
        type: "Cylinder",
        props: {
          position: [-0.3, 1.2, 1.5],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#8B5A2B",
            metalness: 0,
            roughness: 1,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 0.07,
          radiusBottom: 0.12,
          height: 2,
          radialSegments: 8,
        },
        children: [],
      },
      "tree-3-canopy": {
        type: "Sphere",
        props: {
          position: [-0.3, 2.7, 1.5],
          rotation: null,
          scale: [1.2, 1.4, 1.2],
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#1a6b1a",
            metalness: 0,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.7,
          widthSegments: 16,
          heightSegments: 12,
        },
        children: [],
      },
      "house-base": {
        type: "RoundedBox",
        props: {
          position: [0, 0.9, -0.5],
          rotation: [0, 0.3, 0],
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#e8d8c0",
            metalness: 0,
            roughness: 0.8,
            emissive: "#ffddaa",
            emissiveIntensity: 0.05,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          width: 0.8,
          height: 0.7,
          depth: 0.7,
          radius: 0.05,
          smoothness: 4,
        },
        children: [],
      },
      "house-roof": {
        type: "Cone",
        props: {
          position: [0, 1.55, -0.5],
          rotation: [0, 1.085, 0],
          scale: null,
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#a04030",
            metalness: 0.1,
            roughness: 0.8,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.6,
          height: 0.5,
          radialSegments: 4,
        },
        children: [],
      },

      "island-left-float": {
        type: "Float",
        props: {
          position: [-6, 0.1, 2],
          rotation: null,
          scale: null,
          speed: 0.6,
          rotationIntensity: 0.03,
          floatIntensity: 0.5,
          enabled: true,
        },
        children: ["island-left"],
      },
      "island-left": {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "left-base",
          "left-top",
          "left-under",
          "left-tree-t",
          "left-tree-c",
        ],
      },
      "left-base": {
        type: "Cylinder",
        props: {
          position: [0, -0.3, 0],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#8B6914",
            metalness: 0.1,
            roughness: 0.9,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 1.8,
          radiusBottom: 0.8,
          height: 1.2,
          radialSegments: 12,
        },
        children: [],
      },
      "left-top": {
        type: "Cylinder",
        props: {
          position: [0, 0.25, 0],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#4a8c3f",
            metalness: 0,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 1.85,
          radiusBottom: 1.8,
          height: 0.2,
          radialSegments: 12,
        },
        children: [],
      },
      "left-under": {
        type: "Cone",
        props: {
          position: [0, -1.5, 0],
          rotation: [PI, 0, 0],
          scale: null,
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#6B4513",
            metalness: 0.1,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.8,
          height: 1.5,
          radialSegments: 10,
        },
        children: [],
      },
      "left-tree-t": {
        type: "Cylinder",
        props: {
          position: [0.3, 0.8, 0],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#8B5A2B",
            metalness: 0,
            roughness: 1,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 0.04,
          radiusBottom: 0.07,
          height: 1,
          radialSegments: 8,
        },
        children: [],
      },
      "left-tree-c": {
        type: "Sphere",
        props: {
          position: [0.3, 1.6, 0],
          rotation: null,
          scale: [1, 1.2, 1],
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#2d7a2d",
            metalness: 0,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.4,
          widthSegments: 12,
          heightSegments: 8,
        },
        children: [],
      },

      "island-right-float": {
        type: "Float",
        props: {
          position: [5.5, 0, -3],
          rotation: null,
          scale: null,
          speed: 0.5,
          rotationIntensity: 0.02,
          floatIntensity: 0.4,
          enabled: true,
        },
        children: ["island-right"],
      },
      "island-right": {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "right-base",
          "right-top",
          "right-under",
          "right-tree-t",
          "right-tree-c",
        ],
      },
      "right-base": {
        type: "Cylinder",
        props: {
          position: [0, -0.3, 0],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#8B6914",
            metalness: 0.1,
            roughness: 0.9,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 2,
          radiusBottom: 1,
          height: 1.5,
          radialSegments: 12,
        },
        children: [],
      },
      "right-top": {
        type: "Cylinder",
        props: {
          position: [0, 0.4, 0],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#4a8c3f",
            metalness: 0,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 2.05,
          radiusBottom: 2,
          height: 0.2,
          radialSegments: 12,
        },
        children: [],
      },
      "right-under": {
        type: "Cone",
        props: {
          position: [0, -2, 0],
          rotation: [PI, 0, 0],
          scale: null,
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#6B4513",
            metalness: 0.1,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 1,
          height: 2,
          radialSegments: 10,
        },
        children: [],
      },
      "right-tree-t": {
        type: "Cylinder",
        props: {
          position: [-0.5, 0.9, 0.3],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#8B5A2B",
            metalness: 0,
            roughness: 1,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 0.05,
          radiusBottom: 0.09,
          height: 1.3,
          radialSegments: 8,
        },
        children: [],
      },
      "right-tree-c": {
        type: "Sphere",
        props: {
          position: [-0.5, 2, 0.3],
          rotation: null,
          scale: [1, 1.3, 1],
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#3a8c3a",
            metalness: 0,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.5,
          widthSegments: 12,
          heightSegments: 8,
        },
        children: [],
      },

      "island-far-float": {
        type: "Float",
        props: {
          position: [2, 3, -10],
          rotation: null,
          scale: [0.7, 0.7, 0.7],
          speed: 0.3,
          rotationIntensity: 0.01,
          floatIntensity: 0.3,
          enabled: true,
        },
        children: ["far-base", "far-top", "far-under"],
      },
      "far-base": {
        type: "Cylinder",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#8B6914",
            metalness: 0.1,
            roughness: 0.9,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 2.5,
          radiusBottom: 1.2,
          height: 1.5,
          radialSegments: 12,
        },
        children: [],
      },
      "far-top": {
        type: "Cylinder",
        props: {
          position: [0, 0.65, 0],
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#3a7a3a",
            metalness: 0,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radiusTop: 2.55,
          radiusBottom: 2.5,
          height: 0.2,
          radialSegments: 12,
        },
        children: [],
      },
      "far-under": {
        type: "Cone",
        props: {
          position: [0, -1.8, 0],
          rotation: [PI, 0, 0],
          scale: null,
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#6B4513",
            metalness: 0.1,
            roughness: 0.95,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 1.2,
          height: 2,
          radialSegments: 10,
        },
        children: [],
      },

      "island-tiny1-float": {
        type: "Float",
        props: {
          position: [-3, 2.5, -5],
          rotation: null,
          scale: [0.4, 0.4, 0.4],
          speed: 0.8,
          rotationIntensity: 0.05,
          floatIntensity: 0.8,
          enabled: true,
        },
        children: ["tiny1-rock"],
      },
      "tiny1-rock": {
        type: "Sphere",
        props: {
          position: null,
          rotation: null,
          scale: [1, 0.6, 1],
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#8B6914",
            metalness: 0.1,
            roughness: 0.9,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 1,
          widthSegments: 12,
          heightSegments: 8,
        },
        children: [],
      },
      "island-tiny2-float": {
        type: "Float",
        props: {
          position: [8, -0.5, 1],
          rotation: null,
          scale: [0.3, 0.3, 0.3],
          speed: 1,
          rotationIntensity: 0.08,
          floatIntensity: 1,
          enabled: true,
        },
        children: ["tiny2-rock"],
      },
      "tiny2-rock": {
        type: "Sphere",
        props: {
          position: null,
          rotation: null,
          scale: [1.2, 0.5, 0.8],
          castShadow: true,
          receiveShadow: false,
          material: {
            color: "#7a5a10",
            metalness: 0.1,
            roughness: 0.9,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 1,
          widthSegments: 12,
          heightSegments: 8,
        },
        children: [],
      },

      "bridge-1": {
        type: "RoundedBox",
        props: {
          position: [-3.57, -0.1, 1.19],
          rotation: [0, 0.32, 0],
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#8B6914",
            metalness: 0.1,
            roughness: 0.9,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          width: 3.5,
          height: 0.5,
          depth: 0.6,
          radius: 0.05,
          smoothness: 2,
        },
        children: [],
      },
      "bridge-2": {
        type: "RoundedBox",
        props: {
          position: [3.19, -0.1, -1.74],
          rotation: [0, 0.5, 0],
          scale: null,
          castShadow: true,
          receiveShadow: true,
          material: {
            color: "#8B6914",
            metalness: 0.1,
            roughness: 0.9,
            emissive: null,
            emissiveIntensity: null,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          width: 3.0,
          height: 0.5,
          depth: 0.6,
          radius: 0.05,
          smoothness: 2,
        },
        children: [],
      },

      sparkles: {
        type: "Sparkles",
        props: {
          position: [0, 2, 0],
          rotation: null,
          scale: [20, 8, 20],
          count: 120,
          speed: 0.1,
          opacity: 0.5,
          color: "#ffeeaa",
          size: 1.5,
          noise: 1,
        },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: true,
          dampingFactor: null,
          enableZoom: true,
          enablePan: null,
          enableRotate: true,
          minDistance: 8,
          maxDistance: 30,
          minPolarAngle: 0.2,
          maxPolarAngle: 1.5,
          autoRotate: true,
          autoRotateSpeed: 0.3,
          target: [0, 1, 0],
        },
        children: [],
      },
    },
  },
};