Positioning a iframe in relation to a hotspot in 3D space

  • Hello,


    I am currently creating a Virtual Tour using a STL model for my depthmaprendermode.
    I have both Information hotspot and Floor hotspots in the tour that have a fixed tx, ty & tz value so that they always have the same position in the tour no matter what scene I am in.
    The Information hotspots are supposed to show a iframe when the user goes over the hotpsot, which is always in relation to the hotspot . I am currently really struggling to make this happen.


    Ultimately my goal is this:
    1. Have a hotspot that has a fixed 3D postion in my scene (managed this already)
    2. When I hover over this hotspot an iframe opens next to my hotspot (this kind of worked by making it a child of the hotspot, but it then messed up my hotspot position)
    3 When I move my viewport and look at the hotspot from a different angle I want to ensure the iframe would always appear in the viewport. Eg if the iframe where to normaly open on the right of the hotspot, it should open on to left if I change my view to a point where the hotspot is at the far right of the screen (this is for future development for me and doesn't have as much of a priority at the moment, though it would be nice to have User experience wise)

    This is the code I currently have:

    Code
    <layer name="iframe_Welcome" style="infospot" distorted="false" url="skin/transparent.png" keep="true" renderer="css3d" parent="hotspot[Station_welcome]" alpha="0.0" scale="0" onout=" tween(alpha,0.0); tween(scale, 0);"/> 
    <style name="infospot"	keep="true" type="container" url="skin/Icon_Krpano_Hotspot.png" scale="0.05" oversampling="2" mipmapping="true" depth="0" depthbuffer="true"	zorder="2" zoom="false" torigin="world" distorted="false" />
    <action name="add_iframe" type="Javascript"> var iframe = document.createElement("iframe"); iframe.style.position = "absolute"; iframe.style.left = 0; iframe.style.top = 0; iframe.style.width = "100%"; iframe.style.height = "100%"; iframe.style.border = 0; iframe.src = args[1]; caller.registercontentsize(args[2], args[3]); caller.sprite.appendChild(iframe); </action>

    all of my tx, ty & tz values come from my 3D model and I know my STL and scenes are configured correctly as I have generated the Floorspots without a problem.

    *UPDATE EDIT
    So I found out that the reason for the moving of the hotspot is due to renderer="css3d". But if i turn that to renderer="webgl" i get this error message: ERROR: add_iframe - TypeError: Cannot read property 'appendChild' of null.
    Does anyone know how to fix this?

    Would really appreciate some help on this.
    Thanks in advance :)


    Best regards,
    Annicka

    Edited 6 times, last by Annicka (May 3, 2020 at 11:48 AM).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!