几年来，我的一个闲置项目之一就是开始回答“ 3D权力的HTML元素会是什么样？”

该项目是Lume，致力于1.0版本。 Lume为3D渲染提供了一组HTML元素，该元素是建立在three.js渲染的基础上的，该系统用于定义具有反应性和由Solid.js的新自定义HTML元素。

。

这是Lume的"hello world" example。

将代码粘贴到CodePen笔中，您将拥有一个简单起作用的演示（无需构建工具！）：

在此Disco Helmet example中，删除enable-css="false"属性，检查浏览器devtools中的元素，在<flickering-orb>元素上悬停，并注意浏览器将在视图中内在向您显示3D对象的位置，我们可以更改，并且我们可以更改从检查员那里的光的颜色：

我们删除了enable-css="false"属性（默认为true），使lume应用CSS 3D变换到元素。 Lume's CSS变换与WebGL变换对齐，这就是告诉Chrome DevTools WebGL对象位于屏幕上的位置。这对于开发和调试来说是很漂亮的！我们不必像在React，Vue，Svelte等上安装其他DevTools。自定义HTML元素仅由Browser DevTool Suble Suff of Box支持！

！

使用enable-css="true"启用CSS渲染，我们可以将当今的标准内置HTML元素与Lume的3D元素相结合。下一个演示显示了浏览器的内置<button>元素与Lume的WebGL渲染混合。右键单击并检查按钮！

这是强大的，因为这意味着我们可以在3D空间内使用当今的所有HTML/CSS功能，并具有附加的图形功能，可以获得3D内容的可访问性。

用lume制成的3D内容不仅更容易被人类访问，还可以使用

等机器人

• 屏幕阅读器
• 搜索引擎
• 自动化和设计工具
• and AI

这是一个名为Neo Fairies的应用程序中的Lume，它使玩家能够在幻想朋克开放世界中拥有角色：

除3D元素外，Lume还提供了Lume Element，该系统是定义自定义元素的系统。下一个演示显示了与Lume的3D元素无关的<name-card>元素。这是一个自定义元素，仅由当今的内置元素组成。 Lume的3D功能都没有在下一个演示中加载，仅导入和下载进行自定义元素的必要部分：

在以下文章中，我将描述Lume在三分之上构建的其他功能，以及Lume路线图部分的更多详细信息，其中包括：

• 地理空间环/行星渲染的3D元素由lume/harp.gl
• ar/vr/mr/xr控件
• 面向3D的UI组件库，能够从2D UIS过渡到3D XR UIS
• HTML元素将物理应用于对象
• 2D和3D布局
• 3D场景的服务器端渲染，以简单的重复性和3D体验的链接共享
• Lume的打字稿代码库与WebAssembly和本机的汇编，包括three.js and solid.js（稍后再详细介绍！）
• AI辅助资产和代码生成
• 以及更多...

我很高兴看到HTML 3D可以去哪里。我们有一些有趣的工作！