2017-04-13 69 views
0

我想在A帧中的360图像上添加文本和图像如何在360上添加文本和图像?如何在360图像上添加文本和图像A帧

<!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> 

回答

0

您可以在div包裹a-scene并在其上设置position:relative。接下来,在第一个的内容(a-scene之后)附加另一个div并在其上设置position:absolute。这将覆盖a-scene上第二个div的内容。接下来,您需要做的是根据需要定位第二个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> 
+0

感谢您塞巴斯蒂安:) – Akash