Landscape

在云境TS 中打开并复制 →

内容预览

# Landscape A tower-free procedural terrain whose light, sky, fog, stars, rain, lightning, snow, grass, and stones move through seven authored environment states. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/landscape · 预览动画：https://threeui.com/previews/landscape.webm > 分类：Three.js > 包含变体（7）：sunrise、noon、sunset、night、rain、storm、snow /* ===== src/shaders/landscape/LandscapeScene.tsx (tsx) ===== */ import { useEffect, useMemo, useState } from "react"; export const LANDSCAPE_VARIANTS = ["sunrise", "noon", "sunset", "night", "rain", "storm", "snow"] as const; export type LandscapeVariant = (typeof LANDSCAPE_VARIANTS)[number]; const LANDSCAPE_STATES: Record = { sunrise: { time: "morning", weather: "clear", label: "sunrise" }, noon: { time: "noon", weather: "clear", label: "noon" }, sunset: { time: "sunset", weather: "clear", label: "sunset" }, night: { time: "night", weather: "clear", label: "night" }, rain: { time: "noon", weather: "rain", label: "rain" }, storm: { time: "sunset", weather: "storm", label: "storm" }, snow: { time: "noon", weather: "snow", label: "snow" }, }; export type LandscapeSceneProps = { className?: string; sourceUrl?: string; variant?: LandscapeVariant; }; export function LandscapeScene({ className = "", sourceUrl = "/landscape.html", variant = "sunrise", }: LandscapeSceneProps) { const [ready, setReady] = useState(false); const frameSource = useMemo(() => { const state = LANDSCAPE_STA

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