为什么值得关注

它展示了仅使用 HTML 和 CSS 就能渲染复杂的 3D 图形，无需 WebGL 或 Canvas，为轻量级、可访问的网页 3D 内容开辟了新的可能性。

适合谁使用

对基于 CSS 的 3D 渲染感兴趣的网页开发者
希望将交互式 3D 模型引入网站而无需重型库的游戏模组爱好者
CSS 动画与视觉特效爱好者
探索 CSS 在计算机图形学极限的教育工作者和学生

典型使用场景

在个人网站或作品集中嵌入交互式 3D 角色模型（如马里奥）
为文章或演示创建轻量级动画 3D 场景，无需加载 WebGL
使用纯 CSS 原型设计 3D 界面元素或图标
通过真实模型示例学习和教授 CSS 3D 变换

项目优势

仅使用真实 HTML/CSS，无需 WebGL 或 Canvas，轻量且易于集成
支持交互功能，如抓取和拖拽模型部件（马里奥示例展示）
处理形状间的动画变换（如立方体变形为球体）
开源（MIT 许可证），支持导入自定义模型（如超级马里奥 64）

使用前须知

依赖 PolyCSS 引擎，该引擎可能有浏览器兼容性和性能限制
模型准备需要特定 ROM 文件（如超级马里奥 64），带来潜在的法律和可访问性障碍
与基于 WebGL 的完整解决方案相比，可能仅支持较简单的几何体和场景

README 快速开始

cssGraphics

cssGraphics packages animated and interactive 3D models as real HTML and CSS, without a WebGL or canvas renderer. Powered by the PolyCSS engine.

Run locally

pnpm install
pnpm dev

To prepare Mario, place your own US .z64 ROM under .local/:

pnpm prepare:super-mario-64 -- --rom .local/baserom.us.z64

Nintendo game data is not included.

License

cssGraphics source code is MIT licensed. Third-party models retain their original licenses and attribution, listed in site/public/catalog.json.

项目描述

A DOM-ready 3D asset library powered by PolyCSS.

相关仓库与替代方案

根据分类、Topic 和编程语言匹配的相似项目。

react

精选

react

React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.

Web 开发前端框架

246,741

tandpfun

精选

wardrobe

A GPT‑image powered app that extracts individual garment cutouts from photos, organizes them into a digital wardrobe, and generates modeled outfit previews.

JavaScript

1,570

mshumer

精选

Claude-of-Duty

A browser-based first-person shooter built entirely with procedural generation and orchestrated AI agents, featuring 55k lines of Three.js/WebGL2 code and no art assets.

AI 与机器学习AI 智能体

1,234