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

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

export const floatingSplat: Scene = {
  name: "Floating Splat",
  description:
    "A gaussian splat wrapped in Float and Spin animation wrappers with sparkle particles",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "camera",
          "env",
          "ambient",
          "key-light",
          "fill-light",
          "float-wrapper",
          "sparkles",
          "grid",
          "controls",
        ],
      },
      camera: {
        type: "PerspectiveCamera",
        props: {
          position: [0, 2, 6],
          rotation: null,
          scale: null,
          fov: 45,
          near: null,
          far: null,
          makeDefault: true,
        },
        children: [],
      },
      env: {
        type: "Environment",
        props: {
          preset: "studio",
          background: false,
          blur: 0.5,
          intensity: 0.5,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#e0e0ff", intensity: 0.3 },
        children: [],
      },
      "key-light": {
        type: "DirectionalLight",
        props: {
          position: [5, 8, 3],
          rotation: null,
          scale: null,
          color: "#ffffff",
          intensity: 2,
          castShadow: true,
        },
        children: [],
      },
      "fill-light": {
        type: "PointLight",
        props: {
          position: [-3, 3, -2],
          rotation: null,
          scale: null,
          color: "#aaccff",
          intensity: 10,
          distance: 15,
          decay: null,
          castShadow: null,
        },
        children: [],
      },
      "float-wrapper": {
        type: "Float",
        props: {
          position: [0, 1, 0],
          rotation: null,
          scale: null,
          speed: 1.5,
          rotationIntensity: 0.2,
          floatIntensity: 0.5,
          enabled: true,
        },
        children: ["spin-wrapper"],
      },
      "spin-wrapper": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.2,
          axis: "y",
        },
        children: ["splat"],
      },
      splat: {
        type: "GaussianSplat",
        props: {
          src: "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/stump/stump-7k.splat",
          position: [0, 0, 0],
          rotation: null,
          scale: [0.8, 0.8, 0.8],
          castShadow: null,
          receiveShadow: null,
          alphaHash: null,
          toneMapped: null,
          visible: true,
        },
        children: [],
      },
      sparkles: {
        type: "Sparkles",
        props: {
          position: [0, 1.5, 0],
          rotation: null,
          scale: [6, 4, 6],
          count: 40,
          speed: 0.08,
          opacity: 0.2,
          color: "#ffffff",
          size: 0.4,
          noise: 0.5,
        },
        children: [],
      },
      grid: {
        type: "GridHelper",
        props: {
          position: [0, -0.5, 0],
          rotation: null,
          scale: null,
          size: 20,
          divisions: 20,
          color: "#222222",
          secondaryColor: "#111111",
        },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: true,
          dampingFactor: null,
          enableZoom: null,
          enablePan: null,
          enableRotate: null,
          minDistance: 3,
          maxDistance: 15,
          minPolarAngle: 0.2,
          maxPolarAngle: 1.5,
          autoRotate: true,
          autoRotateSpeed: 0.4,
          target: [0, 1, 0],
        },
        children: [],
      },
    },
  },
};