Question

我想在A-Frame的360图像上添加文字和图像，如何在360以上添加文字和图像？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- A-Frame standard library if needed -->
<script src="https://aframe.io/releases/latest/aframe.js"></script>
<!-- Component (includes A-Frame core) -->
<script src="dist/aframe-no-click-look-controls.min.js"></script>
</head>
<body>
<a-scene>
    <a-entity camera no-click-look-controls></a-entity>
            <h1>hello</h1>
    <a-sky src="https://cdn.glitch.com/fbc36a5e-0d0e-45d3-b6cb-
   0c1f01f6cd8e%2FMuttukadu%20Boat%20House(2K).jpg?1491283410006" 
  rotation="0 -130 0"></a-sky>
</a-scene>
</body>
</html>

Answer 1

您可以将a-scene包裹在div中并在其上设置position:relative。接下来，将另一个div附加到第一个内容（a-scene之后）并在其上设置position:absolute。这将覆盖div上第二个a-scene的内容。接下来，您需要做的就是根据需要定位第二个div并在其中添加文本和图像。如果第二个div内容未显示，请考虑调整z-index值。

结果代码如下所示：

<div style="position:relative;">
    <a-scene>
        <!-- a-scene content here -->
    </a-scene>
    <div style="position:absolute; top:0px; left:0px; z-index:1000;">
        <!-- your overlay content here -->
    </div>
</div>

如何在360图像A-Frame上添加文本和图像

1 个答案: