一个 CSS 多边形网格库。一个为 DOM 提供的 3D 引擎。支持以实际 HTML 元素的形式渲染 OBJ/MTL、GLB 和 VOX，并通过 CSS matrix3d(...) 进行变换。支持颜色、纹理、照明、阴影、形状和动画。可与 React、Vue 或原生 JavaScript 一起使用。访问 polycss.com 获取文档和模型示例。安装方式 # 原生 npm install @layoutit/polycss # React npm install @layoutit/polycss-react # Vue npm install @layoutit/polycss-vue 你也可以直接从 CDN 加载 PolyCSS。以下是一个最小的自定义元素场景：< script type="module" src="https://esm.sh/@layoutit/polycss/elements"> </script> <poly-camera rot-x="65" rot-y="45"> <poly-scene> <poly-orbit-controls drag wheel> </poly-orbit-controls> <poly-box size="100" color="#ffd166"> </poly-box> </poly-scene> </poly-camera> 框架组件 React 和 Vue 暴露相同的组件模型。<PolyCamera> 拥有视点，<PolyScene> 拥有照明和地图选项，<PolyMesh> 加载或接收多边形数据。导入 { PolyCamera, PolyScene, PolyOrbitControls, PolyMesh } 从 "@layoutit/polycss-react"; export default function App() { return ( <PolyCamera rotX={65} rotY={45}> <PolyScene textureLighting="dynamic"> <PolyOrbitControls drag wheel /> <PolyMesh src="/gallery/obj/cottage.obj" mtl="/gallery/obj/cottage.mtl" /> </PolyScene> </PolyCamera> ); } API 参考 PolyCamera rotX, rotY 控制轨道角度（以度为单位）。zoom 缩放投影场景。target 在世界坐标中平移相机目标。distance 增加推进拉回。PolyCamera 是正交默认。使用 PolyPerspectiveCamera 当你想要透视深度。PolyScene 多边形直接渲染静态 Polygon[]。directionalLight 和 ambientLight 控制场景照明。textureLighting 选择 “baked” 或 “dynamic”。textureQuality 控制地图光栅预算。strategies 可以禁用选定的渲染策略以进行诊断。autoCenter 绕渲染的网格边界旋转，而不是世界原点。PolyMesh src 加载 .obj、.gltf、.glb 或 .vox 文件。mtl 加载关联的 OBJ 材料。polygons 接受预解析的几何图形。position、scale 和 rotation 变换网格包装器。autoCenter 将网格包围盒中心移动到本地原点。meshResolution 选择 “lossy”（默认）或 “lossless” 优化。castShadow 在动态照明模式下发出 CSS 投影阴影。控件 <PolyOrbitControls> 添加拖动轨道、Shift-拖动平移、滚轮缩放和可选自动旋转。<PolyMapControls> 使用平移优先的地图样式输入。<PolyFirstPersonControls> 提供键盘和鼠标指针导航。<PolyTransformControls> 添加用于选定网格手柄的平移/旋转小工具。快照导出 原生包导出 exportPolySceneSnapshot(target)。它克隆当前渲染的 .polycss-camera / .polycss-scene DOM，仅注入该快照所需的 PolyCSS CSS，将 CSS url(...) 图像资产内联为 data:image/...;base64,...，去除脚本和内联事件处理程序，并返回一个独立的 HTML 文档字符串，没有 PolyCSS 运行时导入。它也适用于渲染的 React/Vue 场景; 从 @layoutit/polycss 导入并传递渲染的相机或场景元素。导入 { exportPolySceneSnapshot } 从 "@layoutit/polycss"; const html = await exportPolySceneSnapshot(scene.host); 如果任何引用的资产无法内联，该函数将抛出 PolySceneSnapshotError，代码为: "ASSET_INLINE_FAILED"。多边形数据模型 每个多边形描述一个可渲染的面：const polygons = [{ vertices: [[0, 0, 0], [60, 0, 0], [0, 60, 0]], color: "#f97316", }, { vertices: [[0, 0, 0], [60, 0, 0], [60, 60, 0], [0, 60, 0]], texture: "/texture.png", uvs: [[0, 0], [1, 0], [1, 1], [0, 1]], },]; 需要逐面 DOM 事件或自定义样式时直接渲染多边形：<PolyCamera> <PolyScene> { polygons.map((polygon, index) => (<Poly key={index} {...polygon} onClick={() => console.log("点击了多边形", index)} className="my-polygon" />))} </PolyScene> </PolyCamera> 加载网格文件 使用 loadMesh() 解析支持的模型格式：导入 { createPolyCamera, createPolyScene, loadMesh } 从 "@layoutit/polycss"; const host = document.getElementById("polycss")!; const camera = createPolyCamera({ rotX: 65, rotY: 45 }); const scene = createPolyScene(host, { camera }); const mesh = await loadMesh("https://polycss.com/gallery/obj/cottage.obj", { mtlUrl: "https://polycss.com/gallery/obj/cottage.mtl", }); scene.add(mesh); 支持的格式：OBJ + MTL，包括 map_Kd 纹理和 UV 坐标。glTF / GLB，包括嵌入的图像和 TEXCOORD_0。MagicaVoxel .vox，当符合条件时提供快速体素路径。生成的原始元素：箱子、平面、环、球体、圆环、圆柱体、锥体和柏拉图固体。性能 PolyCSS 通过 DOM 渲染，因此性能主要受 DOM 操作的影响。