AFrame not displaying 360 image in glitch app - is there a solution? - my code is below

Basic Scene - A-Frame

Hi and welcome rapyalt,

It looks like your code or Glitch embed didn’t come through… could you edit and try again? :slight_smile:

html
head
title>Basic Scene - A-Frame/title
meta name=“description” content=“Basic Scene - A-Frame”
script src="https://aframe.io/releases/0.5.0/aframe.min.js"script
head
body
a-scene
a-assets
img src=“My-Glitch-URL”
a-assets
a-scene
body
html

I had to remove the tags at the beginning and end of each line.

Hi @rapyalt - it would be easier for us to debug if you’d share a link to your Glitch app, as the code you’ve shared there doesn’t give enough context to understand what the error is. If it’s private, you can perhaps share a remix of it with the private code taken out.

3 Likes

https://gossamer-distinct-butterfly.glitch.me/

Thanks Jenn and Ste I have a link to the project above.

Thanks
Tina

Hello again, thanks for sharing this! Your page is blank because all you’re doing here is identifying the image as an asset available to your scene, but you need to reference it outside of <a-assets>. Here are three things you should do:

  • add an id attribute to that img tag, like id="test" so you can reference it later in the scene.
  • outside of a-assets you have <a-scene></a-scene>. you don’t need that, since you’re already in the scene (see the line after ), so you can delete that set of a-scene tags.
  • where you had those a-scene tags is where you should instead set your “sky” to be the image you want to show. the tag to use is and you can set the attribute src="#test" or instead of test you put whatever id you gave to that image asset in the first step.

Here’s a remix of an official aframe example using a panorama sky to reference: Glitch :・゚✧

Hope this helps!

2 Likes