2

I wanna add text and image over the 360 image in A-Frame how to add text and images above 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>
Akash
  • 29
  • 6

1 Answers1

2

You can wrap a-scene in a div and set position:relative on it. Next, append another div to the contents of the first one (after a-scene) and set position:absolute on it. This will overlay the contents of the second div over the a-scene. Next, all you need to do is position the second div as required and add text and images inside of it. Should the second div contents not show, consider adjusting it's z-index value.

The resulting code would look something like this:

<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>
Sebastian
  • 526
  • 2
  • 15
  • 2
    How about if we need the overlay content to be kind of mapped to a specific part of the ? For example, I have a scene with a beach and a single house. I would like to overlay a button on top of the house. As we move the panorama around, the button would always be on top of the house. – MikeMichaels May 12 '20 at 14:26