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

Question

我想在webGL中使用HTML元素制作平面，并且可以执行类似于真实HTML的操作，例如：制作一个按钮，当我们单击它时，它会为我们提供动画反馈并运行该功能。我已经找到了答案，找到了html2canvas和rasterizeHTML.js，但它给出的图像就像不是自然的HTML。是否有任何库或任何方式可以让我像上面的示例那样进行操作。预先感谢...

例如，您可以在下面的链接中看到图像：

Answer 1

[如果我的理解正确，您想使用通过“ 3D透视图”呈现的HTML定义交互式用户界面。

有几种方法可以完成-一种方法是完全不使用WebGL，而使用CSS3 transforms和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。