Globe

在云境TS 中打开并复制 →

内容预览

# Globe The original layered FBM energy sphere with translucent rim glow and depth-aware star field. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/energy-orb · 预览动画：https://threeui.com/previews/energy-orb.webm > 分类：Backgrounds /* ===== src/shaders/globe/GlobeCollection.tsx (tsx) ===== */ import { lazy, Suspense } from "react"; import type { EnergyOrbProps } from "../energy-orb/EnergyOrb"; export type GlobeVariant = "energy-orb"; export type GlobeCollectionProps = EnergyOrbProps & { variant?: "energy-orb" }; const EnergyOrbVariant = lazy(() => import("../energy-orb/EnergyOrb").then((module) => ({ default: module.EnergyOrb }))); export function GlobeCollection({ variant: _variant, ...props }: GlobeCollectionProps) { return ; } /* ===== src/shaders/energy-orb/EnergyOrb.tsx (tsx) ===== */ import { useEffect, useRef } from "react"; import { NXA_ENERGY_ORB_CONFIGURABLE_FRAGMENT_SHADER, NXA_ENERGY_ORB_VERTEX_SHADER } from "./energyOrbShaders"; export type EnergyOrbProps = { speed?: number; scale?: number; smokeScale?: number; smokeStrength?: number; smokeSpeed?: number; hue?: number; saturation?: number; glow?: number; starDensity?: number; starSpeed?: number; starSize?: number; brightness?: number; opacity?: number; className?: string; }; export const ENERGY_ORB_DEFAULTS = { speed: 1, scale: 1, smokeScale: 1, smokeStrength: 1, smokeSpeed: 1, hue: 0, saturation: 1, glow: 1, starDensity: 1, starSpeed: 1, starSize

……（完整源码请在站内查看）