Sie sind nicht angemeldet.

Import GLB in krpano using threejs helper

kme

Fortgeschrittener

  • »kme« ist der Autor dieses Themas

Beiträge: 310

Wohnort: Belgium

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

  • Nachricht senden

1

Samstag, 1. April 2023, 18:23

Import GLB in krpano using threejs helper

It's weekend again, so time to play around with krpano *w00t*
And even though I just made a video on how to convert GLB to OBJ for use in krpano, here is a GLB importer for krpano using threejs (0.147).

Using this helper, you can import GLB and lights into the krpano scene using standard krpano xml and even manipulate the objects location using standard krpano actions.

Demo: https://krpano.kri-soft.be/threejshelper/




To use the helper, include the plugin and then you can use these tags in your tour.xml:


Quellcode

 
1
2
3
4
5
6
7
8

<threejsmodel name="ram" url="ram.glb"   tx="0" ty="0" tz="0" rx="0" ry="0" rz="0" scale="10"></threejsmodel>
<threejsmodel name="cube" url="cube.glb" tx="0" ty="10" tz="0" rx="0" ry="0" rz="0" scale="10"></threejsmodel>


<threejslight name="hemi"   type="HemisphereLight" 		color="0xffffff" strength="0.1" helper="true" tx="0" 	ty="-10" 	tz="0"></threejslight>
<threejslight name="sun" 	type="DirectionalLight"  	color="0xffffff" strength="0.5" helper="true" tx="10" 	ty="-17.5" 	tz="-10" 	castshadow="true"></threejslight>
<threejslight name="light" 	type="PointLight"  			color="0x00ffff" strength="1" 	helper="true" tx="-10" 	ty="-2" 	tz="10"		castshadow="true"></threejslight>
<threejslight name="light2" type="PointLight"			color="0xaaaa00" strength="1"	helper="true" tx="-5" 	ty="-2" 	tz="5" 		castshadow="true"></threejslight>


Features
- support for glb (only glb, no obj
- 3 light types: HemisphereLight, DirectionalLight, PointLight
- control the objects through standard krpano actions

Limitations:
- code is not public (sorry, not ready for release)
- scale, helper true/false and castshadow cannot be animated (only location, rotation and (light) strenght and color)
- no mouse events for the objects
- no dynamic adding/removing of objects (only possible to define them in xml)
- no scene support
- no animations
- many many more limitations :)

As you can see, it's still early development. Depending on the interest, I might develop this further, so ... let me know what you think about this!

Project can be downloaded here if you want to play around yourself...
https://krpano.kri-soft.be/threejshelper…20230401_01.zip


gr,
Kristof
Plugins and more on my gumroad page

holo

Anfänger

Beiträge: 16

  • Nachricht senden

2

Samstag, 1. April 2023, 18:39

This is great!!

panoyun

Fortgeschrittener

Beiträge: 234

Wohnort: Somalia

  • Nachricht senden

3

Samstag, 1. April 2023, 19:23

*thumbsup* *thumbsup* *thumbsup*

lastromantik

Schüler

Beiträge: 141

Wohnort: Russia, Komi republic, Uhta

Beruf: developer

  • Nachricht senden

4

Sonntag, 2. April 2023, 08:07

This is all cool, but not optimized for mobile devices, and the main problem - Three.js draws this gbl model not in the context of krpano, that is, these models can not overlap krpano tour model. If this problem is solved first, then all subsequent moves to Three.js will be justified.

Hello from uhta3d )))
I'm in telegram: Lastromantik

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

5

Sonntag, 2. April 2023, 11:49

yeh, this whole threejs thing .. combining 2 frameworks, each with their own rendering.. is not really efficient. if you go that way, then it might be better to skip on krpano and do the background in threejs as well. pretty sure krpano will be able to add 3d models in the (not too far) future, so it might not be wise to invest too much time into a threejs solution now.
patience.
*smile*
zFilter plugin -- zFlare plugin -- zSnapshot plugin

Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von »indexofrefraction« (2. April 2023, 16:04)

Suso Barral

Fortgeschrittener

Beiträge: 182

  • Nachricht senden

6

Sonntag, 2. April 2023, 14:55

very very good!!

kme

Fortgeschrittener

  • »kme« ist der Autor dieses Themas

Beiträge: 310

Wohnort: Belgium

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

  • Nachricht senden

7

Montag, 3. April 2023, 22:15

Thanks for the feedback.
I understand that this is not be the ideal approach for now, but for those who really want threejs or glb and lights in their project, this might be a way to do it.

I do still see some advantages using krpano xml rather than threejs directly: for some users it might be easier to understand the xml rather than javascript, and you can use krpano acions and the many other things krpano provides, rather than building it from scratch again in javascript. I guess it is a preference. I see advantages in a javascript-only approach too.
Plugins and more on my gumroad page

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

8

Samstag, 29. Juli 2023, 11:39

Hi,

Zitat von »indexofrefraction«

yeh, this whole threejs thing .. combining 2 frameworks, each with their own rendering.. is not really efficient.

A quick update on this - combining krpano and threeJS works nicely *g*

In the next release there are new APIs for including and integrated other WebGL renderer.
And almost all works - depthbuffer, hittesting, postprocessing, VR/stereo/anaglyph.

I think the only things that can't be used together are the fisheye-projections from krpano and the EffectComposer postprocessing from ThreeJS...

Best regards,
Klaus

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

9

Samstag, 29. Juli 2023, 14:02

Zitat von »klaus.krpano«

Hi,

I think the only things that can't be used together are the fisheye-projections from krpano and the EffectComposer postprocessing from ThreeJS...

Best regards,
Klaus

Hi Klaus,
does that go in parallel with objects inside krpano
or will using threejs be the the (only) way to have more than 1 object ?
zFilter plugin -- zFlare plugin -- zSnapshot plugin

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »indexofrefraction« (29. Juli 2023, 15:24)

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

10

Samstag, 29. Juli 2023, 14:55

I hope for something like hotspot type="object" and perhaps type="light" etc.. or so.. (??).
Would be great to be able to control all/most from krpano side. *wacko*


Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

kme

Fortgeschrittener

  • »kme« ist der Autor dieses Themas

Beiträge: 310

Wohnort: Belgium

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

  • Nachricht senden

11

Samstag, 29. Juli 2023, 17:59

Zitat von »Tuur«

I hope for something like hotspot type="object" and perhaps type="light" etc.. or so.. (??).

And if not, we can make a plugin that does *thumbsup*
Plugins and more on my gumroad page

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

12

Sonntag, 30. Juli 2023, 00:01

I prefer,for many reasons, native Krpano support/plugin (by Klaus), preferably open source with some nice example(s), for important, basic and mainstream use of different kinds of navigation and functionality... and then fiddle myself and learn... and share.
I also prefer a fish above a fishing rod, as a fellow krpano coder said beautifully.

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Tuur« (30. Juli 2023, 16:38)

Ähnliche Themen