发布信息

• 发布时间：2026-02-10
• 发布平台：前端公众号
• 状态：⏰ 待复盘（2026-02-24）

用 HTML 标签写 3D 应用 - LUME 的组件化图形方案

如果让你用 HTML 写一个 3D 场景，你会想到什么？通常的做法是在 <canvas> 标签里用 JavaScript 调用 Three.js 或原生 WebGL API。

但 LUME 提供了另一种思路：直接用 HTML 标签定义 3D 对象，比如 <lume-box size="1 2 3"> 就能创建一个立方体。

LUME 是一个将 3D 图形能力封装为 HTML 元素的工具库。它基于 Web Components 技术，提供了一套自定义 HTML 标签，用于构建 2D 或 3D 交互式应用。渲染方式支持 CSS3D、WebGL，或两者混合使用。

这个项目的定位是"简化富交互 2D/3D 体验的创建"。它不是替代 Three.js 或 Babylon.js 这类底层引擎，而是在 Web Components 层面提供声明式的 API，降低入门门槛,让开发者用更接近传统 HTML 的方式组织 3D 内容。

能力边界： LUME 适合快速搭建交互式 3D 场景，但不适合需要深度定制渲染管线或复杂着色器的项目。它的抽象层次较高，如果需要精细控制 WebGL 细节，直接使用 Three.js 等底层库会更灵活。

架构与设计机制

LUME 采用模块化的包结构，核心由多个独立但协同的库组成：

核心包 lume

这是主包，提供用于构建图形应用的 HTML 元素。开发者通过在 HTML 中使用自定义标签（如 <lume-scene>、<lume-box> 等）来定义场景和对象，元素的属性用于控制位置、大小、材质等参数。

@lume/element - 组件系统基础

这是一个用于创建高性能 Web Components 的框架。LUME 的所有 HTML 元素都基于这个系统构建。它处理自定义元素的注册、属性响应、生命周期管理等底层细节。

element-behaviors - 行为混入机制

允许将多个"行为类"（behaviors）附加到单个 HTML 元素上，每个行为可以有独立的生命周期方法。这种设计类似于组件组合模式，让元素能够灵活组合不同功能模块。

glas - WebGL 引擎

这是用 AssemblyScript（一种可编译为 WebAssembly 的 TypeScript 子集）开发的 WebGL 引擎，目前仍在开发中。其目标是提供高性能的底层渲染能力，通过 WebAssembly 执行以获得更接近原生的性能。

为什么这样设计

传统的 3D 库通常需要用 JavaScript 创建对象、设置属性、管理场景图。LUME 将这些能力映射到 HTML 元素上，使得：

• 场景结构可以用 HTML 的嵌套关系表达（父子关系即为场景图层级）
• 属性变更可以通过 HTML 属性或 CSS 完成
• 与现有 Web 生态（框架、开发者工具）的兼容性更好

这种设计试图解决的是"降低 3D 开发的概念负担"——熟悉 HTML/CSS 的开发者可以更快上手，而不必一开始就深入学习 3D 图形的数学和 API。

安装与使用

使用示例

假设你要创建一个简单的 3D 展示页面，包含一个会旋转的立方体：

1. 在 HTML 文件中引入 LUME：<script type="module">import 'lume'</script>
2. 添加场景容器：<lume-scene>
3. 在场景中添加一个立方体：<lume-box>
4. 通过 CSS 或 JavaScript 为立方体添加动画

整个过程不需要手动创建 Canvas、初始化 WebGL 上下文、编写渲染循环，这些工作由 LUME 的元素内部处理。

基础使用方式

LUME 的使用方式是在 HTML 中引入库，然后直接使用自定义标签。

<lume-scene webgl physically-correct-lights perspective="800" fog-mode="linear" fog-color="#8338ec" fog-near="600" fog-far="900">
  <lume-camera-rig align-point="0.5 0.5" distance="800"></lume-camera-rig>
 
  <lume-point-light intensity="1200" align-point="0.5 0.5" position="300 -300 300" color="#ff006e">
    <lume-sphere size="20" cast-shadow="false" receive-shadow="false" color="#ff006e" has="basic-material"></lume-sphere>
  </lume-point-light>
 
  <lume-point-light intensity="1200" align-point="0.5 0.5" position="-300 300 -300" color="#3a86ff">
    <lume-sphere size="20" cast-shadow="false" receive-shadow="false" color="#3a86ff" has="basic-material"></lume-sphere>
  </lume-point-light>
 
  <lume-point-light intensity="1200" align-point="0.5 0.5" position="-300 300 300" color="#3a86ff">
    <lume-sphere size="20" cast-shadow="false" receive-shadow="false" color="#3a86ff" has="basic-material"></lume-sphere>
  </lume-point-light>
 
  <lume-point-light intensity="1200" align-point="0.5 0.5" position="300 -300 -300" color="#ff006e">
    <lume-sphere size="20" cast-shadow="false" receive-shadow="false" color="#ff006e" has="basic-material"></lume-sphere>
  </lume-point-light>
 
  <lume-box id="box" cast-shadow="false" receive-shadow="false" has="physical-material" roughness="0.8" align-point="0.5 0.5" mount-point="0.5 0.5 0.5" size="200 200 200" color="white" position="0 0 -500"></lume-box>
</lume-scene>
 
<script type="module">
  box.rotation = (x, y) => [x+0.5, y+0.5];
  box.position = (x, y, z) => [x, y, 0.02 * (0 - z) + z]; // lerp
</script>

适用场景与定位

LUME 的设计思路是将 3D 图形能力"HTML 化"，这种方法在某些场景下能带来效率提升，但也有适用边界。

更适合的使用场景

如果你的项目符合以下特点，LUME 可能是合适的选择：

• 需要在网页中嵌入 3D 可视化内容，但团队成员对 3D 编程不够熟悉
• 希望用声明式方式组织场景结构，便于维护和调试
• 项目需要频繁调整 3D 元素的布局和层级关系，用 HTML 嵌套结构表达更直观
• 希望利用 Web Components 的封装性，将 3D 内容作为可复用组件在多个页面中使用

不太适合的场景

以下情况可能不是 LUME 的最佳使用场合：

• 需要精细控制渲染管线、自定义着色器或使用高级图形技术
• 项目的性能要求极高，需要手动优化渲染逻辑
• 团队已经熟悉 Three.js 等底层库，且项目中需要大量定制化开发
• 需要与现有的 Three.js 或 Babylon.js 项目深度集成

写在最后

LUME 尝试用 Web Components 的方式重新定义 3D 内容的组织形式，将命令式的图形编程转化为声明式的标签语法。这种方法在降低学习曲线、提高代码可读性方面有其价值，特别是对于以内容展示为主的项目。

但需要明确的是，这不是一个"万能"的 3D 方案。如果你的项目需要深度定制渲染逻辑，或者团队已经有成熟的 Three.js 技术栈，直接使用底层库可能更高效。LUME 的价值在于为特定场景（组件化、声明式、快速原型）提供了一种可选的技术路径。

项目目前有 1400+ GitHub stars，使用 TypeScript 开发，采用 MIT 协议开源。如果你在做交互式 3D 内容，且希望尝试用 HTML 的思维方式来组织场景，可以关注这个项目的发展。

https://github.com/lume/lume (opens in a new tab)