Bookshelf

在云境TS 中打开并复制 →

内容预览

# Bookshelf The exact seven-volume Bookshelf collection with its authored room, carousel shelf, individual cover artwork, foil, pages, inspection, opening, and page-turn system. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/bookshelf · 预览动画：https://threeui.com/previews/bookshelf.webm > 分类：Three.js /* ===== src/shaders/bookshelf/BookshelfScene.tsx (tsx) ===== */ import { useEffect, useRef, useState } from "react"; import { createBookshelfRenderer } from "./bookshelfRenderer.js"; export type BookshelfSceneProps = { className?: string; }; type CodexRenderer = { ready: Promise; resize: () => void; dispose: () => void; }; export function BookshelfScene({ className = "" }: BookshelfSceneProps) { 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 undefined; let disposed = false; let renderer: CodexRenderer; try { renderer = createBookshelfRenderer(host, canvas, { onReady: () => { if (!disposed) setState("ready"); }, onError: (message: string) => { if (!disposed) { setErrorMessage(message); setState("unavailable"); } }, }) as CodexRenderer; void renderer.ready.catch((error: unknown) => { if (!disposed) { setErrorMessage(error instanceof Error ? error.message : "Unknown renderer error"); setStat

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