Tutorial: convert sketchfab models to krpano

kme

Intermediate

Posts: 264

Location: Belgium

Occupation: Long time coder, product manager and 3D enthousiast

1

Thursday, March 30th 2023, 7:13pm

Hi all,

Here is a video that explains how to convert models from sketchfav into obj for krpano.

https://youtu.be/9xub3_UUGnw

I would like to make more tutorials, so feedback on the speed, tone of voice, detail, or any other suggestion is very welcome.

gr,
Kristof

Plugins and more on my gumroad page

Go to the top of the page

Suso Barral

Intermediate

Posts: 171

2

Thursday, March 30th 2023, 11:25pm

Go to the top of the page

panoyun

Intermediate

Posts: 228

Location: Somalia

3

Friday, March 31st 2023, 6:21am

Go to the top of the page

andrew22222

Intermediate

Posts: 395

Location: Australia

4

Saturday, April 1st 2023, 1:57am

Thanks KME. Appreciate you putting in the time to explain this *thumbsup*

Go to the top of the page

relax

Beginner

Posts: 51

5

Saturday, April 1st 2023, 12:01pm

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*

Go to the top of the page

kme

Intermediate

Posts: 264

Location: Belgium

Occupation: Long time coder, product manager and 3D enthousiast

6

Saturday, April 1st 2023, 2:28pm

Yes, follow the tutorial :)

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

example

	Source code
1	<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.

Plugins and more on my gumroad page

Go to the top of the page

kme

Intermediate

Posts: 264

Location: Belgium

Occupation: Long time coder, product manager and 3D enthousiast

7

Saturday, April 1st 2023, 6:57pm

Tested with the webvr.xml plugin. When I follow the tutorial and then go to VR mode, I am placed in the middle of the model and cannot navigate/turn/... so hmm, not out of the box after my tutorial. Maybe that is a project for next weekend :)

Plugins and more on my gumroad page

Go to the top of the page

relax

Beginner

Posts: 51

8

Sunday, April 2nd 2023, 8:42am

cool, thanks!

Go to the top of the page

andrew22222

Intermediate

Posts: 395

Location: Australia

9

Monday, April 3rd 2023, 12:59am

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

This post has been edited 1 times, last edit by "andrew22222" (Apr 3rd 2023, 7:31am)

Go to the top of the page

kme

Intermediate

Posts: 264

Location: Belgium

Occupation: Long time coder, product manager and 3D enthousiast

10

Monday, April 3rd 2023, 11:06pm

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:

	Source code
1 2 3	<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:

	Source code
1	<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

Plugins and more on my gumroad page

Go to the top of the page

andrew22222

Intermediate

Posts: 395

Location: Australia

11

Wednesday, April 5th 2023, 11:22am

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

Source 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*

Go to the top of the page

kme

Intermediate

Posts: 264

Location: Belgium

Occupation: Long time coder, product manager and 3D enthousiast

12

Thursday, April 6th 2023, 8:38am

Ah, nice, glad you could make it work!

Plugins and more on my gumroad page

Go to the top of the page

Lastwolf

Beginner

Posts: 28

13

Thursday, April 6th 2023, 7:19pm

Nice tutorial! Thanks for sharing. *thumbup*

Rich

Go to the top of the page

andrew22222

Intermediate

Posts: 395

Location: Australia

14

Monday, April 24th 2023, 3:55am

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

This post has been edited 2 times, last edit by "andrew22222" (Apr 24th 2023, 4:20am)

Go to the top of the page

kme

Intermediate

Posts: 264

Location: Belgium

Occupation: Long time coder, product manager and 3D enthousiast

15

Monday, April 24th 2023, 8:06am

Quoted from "andrew22222"

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?

You are correct. From what I have experimented with, only diffuse color map is currently supported (krpano 1.21_20230330).

Plugins and more on my gumroad page

Go to the top of the page

andrew22222

Intermediate

Posts: 395

Location: Australia

16

Monday, April 24th 2023, 11:25am

Thanks Kristof.

I think I'll see what I can do with just the colour map then and try and paint on a bit more detail. It's all still good fun though with the models *thumbsup*

Go to the top of the page

kme

Intermediate

Posts: 264

Location: Belgium

Occupation: Long time coder, product manager and 3D enthousiast

17

Monday, April 24th 2023, 11:59am

Quoted from "relax"

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?

As my first experiment failed, I did another try this weekend:
https://krpano.com/forum/wbb/index.php?p…ad&postID=90198

Now it works *smile*

gr,
Kristof

Plugins and more on my gumroad page

Go to the top of the page