A-Frame Text Issue on Hotspots

  • Hi All,

    @WeddingDJ , these errors are causing my hotspot text annotations to not be visible. Sometimes rectifies after I clear the cache, but then reverts. Any ideas on how to remedy? Don't want to change things in the framework codebase.




  • Seems some of the elements referred to don't exist somehow. getElementById() is returning null.

  • Hello,

    Just another update, the annotations seem to work as expected after every PC restart as well, one single time, then if I refresh the page and try again, or copy the URL, paste it into another browser window and try again, the above error is experienced. May have something to do with the partials? Not sure though.

  • @jaysonvdw If you look at the source code in your scene, there should be divs with these IDs: photosphere-title-texture-content-id-11 etc. These are the titles of your photo spheres.

    Which browser do you use?

    Do you have a link to your scene?

  • Hi @WeddingDJ , thanks for checking on this.

    I'm using Chrome on a Windows 10 PC as a first option. I checked now using Firefox and it's not that many that are not found, but 2 of them still aren't found. I assumed that there was some element of BYOD, and "Bring your own browser" though?

    Here is the link: https://bit.ly/2GzHrwN

    Thank you.

  • @jaysonvdw I went through all rooms with Chrome and Firefox and it worked fine, except if I would leave the developer tools open, then I sometimes got image loading timeouts (different images, and all images exist, and I think you got a similar symptom with the empty photo sphere titles, as these are images as well):

    0_1522805084276_Screen Shot 2018-04-03 at 21.19.43.png

    But everything else worked. In Firefox everything was fine, even when loading the page multiple times, but I never opened the developer tools there.

    I don't know exactly what is happening, but I guess an image timeout can happen if there is a slow internet connection. Could that be that your internet connection is slow? I am currently on a LTE wireless phone connection, which has high latency time and I guess this causes the image loading timeouts.

    Btw, very interesting project!

    UPDATE: I got now the same warnings as you and the hotspot text boxes are empty, because the images were not loaded. If I refresh your site, then they show up (if the developer toolbar is closed because if not, cache is disabled), because images are cached and previous images which have not been loaded are now loaded.

    UPDATE 2: the image loading timeout error does not seem to happen at regular intervals, just sometimes... hm, honestly I have no idea

  • Hey @WeddingDJ ,

    Thanks for taking the time to have a look, yeah, I agree Firefox and never having Dev tools open definitely helps. I'm using Wi-Fi, here's current test results:

    Ping: 19ms
    Download: 52.66Mbps
    Upload: 11.59Mbps

    Hm, was "hoping" it would be a definitive issue that could be fixed. I guess I'll try add a service worker script in order to cache for slow connections and reloads.

    Why not just have something like this as an option for users to configure (works well in every instance):

    <a-entity id="instructions" position="-1 2 -2"  visible="true" geometry="primitive:plane;height:0.1;width:0.5" material="color:orange" 
    text="align:center;color:black;value:Gaze here for instructions;width:1" scale="4 4 4"
    event-set__1="_event: click; _target: #instructionstext; visible: true"
    event-set__2="_event: click; _target: #instructions; visible: false">
       <a-entity id="instructionstext" position="-1 2 -2"  visible="false" geometry="primitive:plane;height:0.1;
    width:1" material="color:darkorange" text="align:center;color:black;value:Some instructions;width:1" scale="5 5 5">

    On a side note, if I enter VR mode (only tested on desktop for now) in both browsers, the annotations move to a completely different position (much "higher" in the scene) and don't work at all. If I then hit esc, then the site automatically re-loads...

    On a separate note, could you have a look at this updated post at some stage as well please: https://forum.ideaspacevr.org/topic/31/gaze-navigation-not-working/7

    Thanks dude.

  • Hey Guys,

    @WeddingDJ , I checked with some of the A-Frame guys, just for a different opinion.

    Feedback is that a service-worker will only mask the issue and that this is some sort or race condition in that the elements don't seem to be ready on page load so the (IdeaSpace) code that uses the divs needs to ideally be changed so that it has to wait for the DOM first...

  • @jaysonvdw Alright, I will play with this idea and implement it if possible

    Concerning your questions from the post above:

    • VR mode on a desktop PC, if no headset is connected, is just switching to fullscreen and this means that the code expects a 6-DOF headset connected and therefore the user height is set to 0 (whereas it is 1.6m in non-VR mode). I guess I could remove the googles icon when no headset is connected.

    • Gaze navigation is implemented in the IdeaSpace 360 Photo Tour Pro theme

    • and on your question why not just using the text component instead of shader images? - the text component does not support umlauts, accents as well as text formatting; text should be shown for any language, not just english

  • @jaysonvdw I made a fix concerning the image loading timeout bug. You can get the master of the repo here:


    Copying the new theme files over your existing theme should work. Let me know if it fixes your issues.

  • Hey Chris, thanks very much indeed man, I appreciate it.

    Will let you know.

  • Hi @WeddingDJ ,

    Seems to be working like a dream after I added the changes, on both browsers, even after page reload, so thanks for your efforts!



  • @jaysonvdw Glad it worked! Thanks for finding this issue Jay! I will roll the fix into the next IdeaSpaceVR release.

  • Hey @WeddingDJ , believe it or not, after working fine for weeks, I'm getting this error "all of a sudden":


    Here's the link: https://bit.ly/2GzHrwN

    The console says Internal Server Error, so yeah, not sure what's up. Any ideas on how to remedy?

    Thanks Chris

  • @jaysonvdw It looks like you deleted a hotspot content item which is still attached to a photo sphere (and therefore referenced) .

    Is this possible?

    The next IdeaSpaceVR release v1.1.1 will solve this issue of "dead" references (automatically removing "dead" references).

  • @WeddingDJ , thanks, there was indeed an asset missing. It's working again.

    Unless I was suffering from sleep deprivation at the time, I have no recollection of removing it, but I think one of my colleagues may have done so inadvertently.

    Thanks man!

  • @jaysonvdw Glad it works again! I am curious, which 360 camera are you using?

  • Thanks dude!

    Haha, none whatsoever, just Google Street View, and this awesome tool: https://streetviewdownload.eu/


  • @jaysonvdw I see. Would you like to add your project to the Showcases section of the forum?

Log in to reply