一个框架。如何在 VR 场景中包含表单？答案

【问题标题】：A-Frame. How to include a form in VR scene?一个框架。如何在 VR 场景中包含表单？
【发布时间】：2021-08-16 17:45:04
【问题描述】：

有人知道如何在使用 A-Frame 构建的 VR 场景中包含表单吗？有使用 Web2VR 的经验吗？

【问题讨论】：

【解决方案1】：

如果表单是指标准的 HTML 2d 表单，那么您可以简单地使用任何标准 HTML 元素覆盖 3d 场景。只需使用z-index 参数即可。

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <meta charset="UTF-8" />
</head>

<body>
  <a-scene>
    <a-sphere position="0 2 -10"color="red"></a-sphere>
    <a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20"></a-plane>
    <a-sky color="#aaf"></a-sky>
  </a-scene>
  <div>
    <form style="z-index: 100; position: absolute; left: 10px; top: 10px">
      <input type="text"/><br/>
      <input type="number"/><br/>
      <input type="date"/><br/>
      <input type="submit"/>
    </form>
  </div>
</body>

</html>

您还可以在a-scene 上使用embedded 属性来指定场景应放置在标准网页中的哪个位置。

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <meta charset="UTF-8" />
</head>

<body>
  <a-scene embedded style="width: 200px; height: 100px">
    <a-sphere position="0 2 -10"color="red"></a-sphere>
    <a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20"></a-plane>
    <a-sky color="#aaf"></a-sky>
  </a-scene>
  <div>
    <form>
      <input type="text"/><br/>
      <input type="number"/><br/>
      <input type="date"/><br/>
      <input type="submit"/>
    </form>
  </div>
</body>

</html>

【讨论】：

感谢您的回答