我们可以在 webGL 中用 HTML 元素制作平面几何吗？

Question

我想在 webGL 中用 HTML 元素制作一个平面，并且可以像真实的 HTML 一样做一个动作，例如：制作一个按钮，当我们点击它时，它会给我们一个动画反馈和运行函数。我已经在寻找答案并找到了 html2canvas 和 rasterizeHTML.js，但它只是给出了一个不自然的图像 HTML。有没有图书馆或任何方式让我像上面的例子那样做。提前致谢...

NOTE : For some reason i can't use CSS3DRenderer in Three.js

例如您可以在下面的 link 中看到的图片：

Answer 1

如果我没理解错的话，您想要使用 HTML 定义一个以“3D 透视图”呈现的交互式用户界面。

有几种方法可以做到这一点 - 一种是根本不使用 WebGL，而是使用 CSS3 transforms and perspective:

/* Add click handler to demonstrate that elements are still 
interactive, even when orientated in 3D space */
const button = document.getElementById("clickme");
button.addEventListener("click", () => {
  alert("hi!");
});

/* Optional - just for purpose of demonstration */
@keyframes movement {
  from {
    transform: rotateY(20deg);
  }
  to {
    transform: rotateY(-20deg);
  }
}

/* Define a "perspective wrapper" to give
the child elements the effect of 3D perspective */
.perspective {
  width: 500px;
  perspective: 500px;
  perspective-origin: 50% 50%;
  padding: 1rem;
}

.surface {
  /* Style the UI surface using regular CSS */
  background: red;
  padding: 1rem;
  text-align: center;  
  
  /* Orientates the surface in 3D space */
  transform: rotateY(20deg);
  animation: movement 5s infinite;
}

<div class="perspective">
  <div class="surface">
    <button id="clickme">Click me, I'm in 3D and I'm interactive!</button>
  </div>
</div>

这种方法保留了声明式 HTML、现有 JavaScript DOM WebAPI 的优点，同时还为您提供了流畅的硬件加速 3D 渲染 HTML视角。

或者，如果您需要在 canvas 元素中呈现交互式用户界面（即，没有 CSS3 转换），您可以考虑像 Babylon.js 这样的库，它提供相当全面 GUI framework。

Here is an example show casing 一个相当复杂的 3D 图形用户界面 space，使用 Babylon.js 框架构建 - 需要注意的是，图形用户界面是用 JavaScript 定义的（而不是HTML) 然而更类似于做事的"Three.js way"。

我们可以在 webGL 中用 HTML 元素制作平面几何吗？

Can we make Plane Geometry with HTML element in webGL?

html

javascript

webgl

three.js