javascript - 如何在 360 度图像 A 框架上添加文本和图像

标签 javascript html aframe 360-virtual-reality

我想在 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>

最佳答案

您可以将a-scene包装在div中并在其上设置position:relative。接下来,将另一个 div 附加到第一个 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>

关于javascript - 如何在 360 度图像 A 框架上添加文本和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43387806/

相关文章:

c# - 如何使用 MVC .Net 修复 google insights 上的杠杆浏览器缓存问题

aframe - 使 <a-cursor> 在桌面上跟随鼠标

augmented-reality - 如何将 a-frame 对象定位到标记的左下角,并使其宽度等于标记的宽度?

javascript - React - 如何在 AJAX 请求后更新状态

javascript - 在动态创建单选按钮方面需要帮助

javascript - 强制邮政编码的 Stripe 元素

javascript - 定位固定元素以粘贴其兄弟元素的边缘

html - CSS:如何以动态宽度将div定位在中心

jquery - 在 LI 元素上使用 jQuery .on()

aframe 在移动设备上调整相机旋转