Question

我想在我的“画布”屏幕顶部放置一个标签（或徽标或菜单或其他内容）。这是我的起始代码：

https://codepen.io/alber-developer/pen/wvoezNY

如您所见，我在页面顶部有一个带有“hello world！”的跨度。文本，它首先加载，但是当加载 <a-camera> 时，它位于页面顶部，我看不到我的 <span> 标记。

这是一个图像示例，其中包含我拥有的（左侧）和我希望拥有的（右侧）：

感谢您的帮助。

提前致谢！

Answer 1

<a-scene></a-scene> 占据了整个屏幕，您可能希望使用 a-scene 创建一个单独的文件并使用 iframe 链接到该文件：

首先创建一个包含您的场景的文件，就像您要为该场景制作网页一样。（代码如下）

  <head>
    <title>AR.js Basic Projected Camera Example</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
    <!-- Look-at component. We don't need this now, but we will later. -->
    <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
</head>

<body>
    <a-scene>  
          <a-camera rotation-reader  ></a-camera>
          <a-box rotation="20" position="0 0 -55"  material='color: blue' scale='10 10 10'></a-box>
    </a-scene>
</body>

2nd 在你的 main 中创建一个 iframe，它的 src 是带有 a-scene 的文件的路径。（代码如下）

<head>
    <title>AR.js Basic Projected Camera Example</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
    <!-- Look-at component. We don't need this now, but we will later. -->
    <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
</head>

<body>
    <div style="padding:10px; width:100%; height:200px; display: block; position: relative;">
        <span id="debug">HELLO WORLD!</span>
    </div>

    <iframe allowvr="yes" allowfullscreen="yes" src="the-path-to-your-file-with-your-aframe-scene"></iframe>

</body>

相机和场景的A帧位置和大小

1 个答案: