Tutorial: convert sketchfab models to krpano

  • thanks
    is it possible to see a 2D 360 pano in the background and have a real 3d model in the center of the pano, so i can watch that model in real 6dof with VR? *rolleyes*

  • Yes, follow the tutorial :)

    Then alter the tour.xml and use depthmap.backgroundurl (https://krpano.com/docu/xml/?vers…p.backgroundurl)

    example

    Code
    <depthmap url="model.obj" backgroundurl="sphere.jpg" hittest="true" rendermode="3dmodel" scale="100" textured="true" waitforload="true" center="0,0,0" axis="+x+y+z"/>

    Let us know if it worked?


    Edit: i missed your VR question - I'm not sure if the controls and background url work in VR... I will have to test!

    gr,
    K.

  • Hi KME,

    I have a question related to this.

    I’ve opened up an older tour of a school that I did and wanted to add 3d versions of the currency that was available at that time as it was back in the 70s. I’m able to make the banknotes and coin models in blender and export at obj and then following your tutorial I get it to display in the original tour via popups.xml, but the black background is a little off putting. I think if the black was an invisible background then the coin would stand out great against the already blurred background that is made by the popups.xml.

    Is it possible at all to make it invisible? I've even tried changing the colour of the black background but no changes happen. The code I use is the same basic one you show in your tutorial at 06.00 time.


    Your demo code but can't change the bg colour


    One other thing I did notice was that the obj that krpano uses seems to prefer a single material file such as a 2048 X 2048 with everything on it rather than individual png files as they seem to get lost when viewing the model pano

    Thanks for your time,

    Andrew

  • I have not tried to load a 3D object in a popup.
    I did see that there is a new layer type "krpano" which loads a new krpano with... a transparent background *g*
    But I don't think the popup example is already adjusted to support this.

    So the easiest way to approach this is to set the bgcolor of the pano to transparent: see: https://krpano.com/docu/embedpano/#bgcolor
    So in your HTML:

    Code
    <script>
    		embedpano({xml:"tour.xml", bgcolor:"transparent", target:"pano", html5:"only", mobilescale:1.0, passQueryParameters:"startscene,startlookat"});
    	</script>

    I also had to remove all background-color, and other background related attributes from the css style.

    You can then inlucde the tour as an iframe like this:

    Code
    <layer type="text" name="btn" text="popup" onclick="popup('iframe', 'http://localhost/index.html/', 800, 600, true);"></layer>

    And it will show as transparent

    Result:

    this is basically loading the tour, and then loading the same tour in a popup :)

    To summarize:
    - clean your html to leave out any background color settings
    - set the bgcolor:"transparent" in the embedpano
    - load the tour in an iframe poup

    --> the obj is shown in a floating popup!

    Let me know if it worked out for you or if you need additional help.

    gr,
    Kristof

  • Hey thanks for the reply KME.

    Since my first post I found out about the bgcolor:"transparent" in the html but even after adding it there was still a grey/brown colour for the background so presumed I was doing something wrong.

    After you just posted I realised the code was in the right place so I went hunting for something else I found this that was displaying the light grey/brown colour for the background and also the border so removed the values and also the shadow.

    addlayer('popup', popup);
    set(popup,
    type=container,
    parent='popup_bg',
    width=calc(min(width,global.stagewidth*0.9)),
    height=calc(min(height,global.stageheight*0.8)),
    align=center,
    bgborder='0 0x555555 1',
    bgcolor=0x555555,
    bgalpha=0,
    bgshadow='0 10 20 0x000000 0',
    bgcapture=true,
    maskchildren=false,
    capture=true,
    handcursor=false,
    alpha=0
    );


    and here's the code for the hotspot to trigger the popup

    Code
    <hotspot name="spot4" style="camera" ath="66.16872542707739" atv="3.22325676563515" scale="0.06000000000000" depth="1000" rx="0" ry="0" rz="0" ox="0.00000000000000" oy="0.00000000000000" tx="0" ty="0" tz="0" distorted="true" zoom="false" onclick="popup('iframe', 'models/tendm/index.html', 800, 600, false);" />


    Looks way better with a transparent background and appreciate your help with this. *thumbsup*

  • Really enjoying playing with the 3d model side of krpano.

    At the moment I use just the one 2048 x 2048 colour png or jpg image for the objects textures as I don't seem to be able to use multiple image files (colour, normal, roughness, metallic, Ambient Occlusion, Displacement) that are generally used in Blender. The models do look pretty good just using the colour map but to look more realistic they need the full set, especially the metallic as any parts of the obj file that has metals applied to it look pretty bad.

    In the tutorial above, the Ram of Amun model only has the single image_0.jpg in the textures folder so is it correct that I can only use the colour and not the other 4 textures?



    The red circled one is what I would normally use but would convert it to a 1mb JPG first as the original tga file is about 12mb. Not being able to use the other files means I lose a very large amount of visual detail. Perhaps I am missing something?


    Thanks,


    Andrew

    Edited 2 times, last by andrew22222 (April 24, 2023 at 4:20 AM).

Participate now!

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