Temple Night

在云境TS 中打开并复制 →

内容预览

# Temple Night Kage’s procedural Kyoto mountain temple after dark, with the exact authored architecture, rain, mist, leaves, pointer wisps, camera composition, and bloom pipeline. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/temple-night · 预览动画：https://threeui.com/previews/temple-night.webm > 分类：Three.js /* ===== src/shaders/temple-night/TempleNightScene.tsx (tsx) ===== */ import { useEffect, useRef, useState } from "react"; import { createTempleNightRenderer } from "./templeNightRenderer.js"; export type TempleNightVariant = "temple-night"; export type TempleNightSceneProps = { className?: string; variant?: TempleNightVariant }; export function TempleNightScene({ className = "" }: TempleNightSceneProps) { const hostRef = useRef(null); const canvasRef = useRef(null); const [state, setState] = useState("loading"); const [errorMessage, setErrorMessage] = useState(""); useEffect(() => { const host = hostRef.current; const canvas = canvasRef.current; if (!host || !canvas) return; let renderer; try { renderer = createTempleNightRenderer(canvas); } catch (error) { setErrorMessage(error instanceof Error ? error.message : "Unknown renderer error"); setState("unavailable"); return; } if (!renderer) { setState("unavailable"); return; } let frame = 0; let visible = true; let disposed = false; let rendered = false; const schedule = () => { if (!disposed && visible && !document.hidden && !frame) frame = requestAnimat

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