Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

1

Dienstag, 26. Mai 2015, 18:51

Use three.js (3d objects) inside krpano (with VR support)

Hi,

here as example an open source krpano plugin that shows how to use the three.js html5 3d rendering engine inside the krpano html5 viewer. The plugin handles everything about the rendering and interaction between krpano and three.js. This includes also stereo-rendering and WebVR support. For user interaction there is also a mouse and touch interface for the 3d objects. For all details please have a look into the plugin source.

krpano Three.JS integration example:


The krpano plugin source code:
http://krpano.com/plugins/threejs/opensource/threejs_example/three.krpanoplugin.js

Download the example:
krpano_three_js_example.zip (2.5 MB)


The current plugin here is mainly intended for developers with Javascript- and 3d-knowledge. All necessary basics for using three.js should be there and I think by using the krpano 'framework' the cross-platform usage of three.js becomes even easier.

Therefore this plugin is open source at the moment, but there are also plans to advance that plugin even more by adding a xml interface and more features. Then it will be possible to use that plugin to load and control 3d models via easily via the krpano xml/action interface.

Best regards,
Klaus

jordi

Fortgeschrittener

Beiträge: 349

Wohnort: Barcelona

  • Nachricht senden

2

Dienstag, 26. Mai 2015, 19:49

Amazing !! Thanks for this new plugin *thumbsup*
visita3d.com advanced virtual tours
a new way to communicate

3

Dienstag, 26. Mai 2015, 20:22

WOW!!

Klaus for President!!

ps. krpano 1.19pr3 .. (build 2015-05-26)!!!!

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »milemann« (26. Mai 2015, 20:47)


4

Dienstag, 26. Mai 2015, 21:07

Thanks!
ps. krpano 1.19pr3 .. (build 2015-05-26)!!!!
Yes, that example already includes a intermediate pre-release 3 version.

Best regards,
Klaus

Beiträge: 644

Wohnort: Angers - France

Beruf: Photographer

  • Nachricht senden

5

Dienstag, 26. Mai 2015, 21:28

WOW, again some sleepless nights to come...
THANX KLAUS !

6

Mittwoch, 27. Mai 2015, 00:14

*thumbup* oh my god!
thanks!klaus!

Red

Schüler

Beiträge: 92

Wohnort: Australia

Beruf: Virtual tour creator, VR app developer

  • Nachricht senden

7

Freitag, 12. Juni 2015, 08:02

This plugin is great Klaus. Thank you for the awesome work!

Have managed to create some spheres and map some panos to them.
Experiment is here - http://www.pano-ad.com.au/panos/animetes…thex/index.html

Trying to find out how to link scenes to the objects or rotate the spheres manually ondown or onover but no joy yet. Is this possible at the moment?


Cheers

Beiträge: 1 847

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

8

Freitag, 12. Juni 2015, 18:10

Looks like in function build_scene() of three.krpanoplugin.js

you can assign the onclick or down to run a krpano.call(""); so that you can interface with krpano.

See here about the javascript interface.

http://krpano.com/docu/js/#top

I think it might be cool for a tighter integration to krpano if the url of the hotspot/layer is three.js just like textfield..
So you can use normal krpano commands to set scale, location. onclick etc

Lot of fun stuff in here!

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function build_scene()
	{
		clock = new THREE.Clock();

		// load 3d objects
		load_object_json("monster.js",  true, {ath:+30,  atv:+15, depth:500,  scale:0.1, rx:180, ry:60  ,rz:0,   ondown:function(obj){ obj.properties.scale *= 1.2; update_object_properties(obj); }, onup:function(obj){ obj.properties.scale /= 1.2; update_object_properties(obj); }});
		load_object_json("flamingo.js", true, {ath:-110, atv:-20, depth:700,  scale:1.0, rx:-10, ry:250, rz:180, ondown:function(obj){ obj.properties.scale *= 1.2; update_object_properties(obj); }, onup:function(obj){ obj.properties.scale /= 1.2; update_object_properties(obj); }});
		load_object_json("horse.js",    true, {ath:-58,  atv:+7,  depth:1000, scale:1.0, rx:180, ry:233, rz:0,   ondown:function(obj){ obj.properties.scale *= 1.2; update_object_properties(obj); }, onup:function(obj){ obj.properties.scale /= 1.2; update_object_properties(obj); }}, function(obj){ obj.material.color.setHex(0xAA5522); } );

		// create a textured 3d box
		box = new THREE.Mesh(new THREE.BoxGeometry(500,500,500), new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture(resolve_url_path("box.jpg"))}));
		assign_object_properties(box, "box", {ath:160, atv:-3, depth:2000, ondown:function(obj){ obj.properties.scale *= 1.2; }, onup:function(obj){ obj.properties.scale /= 1.2; }});
		scene.add( box );

		// add scene lights
		scene.add( new THREE.AmbientLight(0x333333) );

		var directionalLight = new THREE.DirectionalLight(0xFFFFFF);
		directionalLight.position.x = 0.5;
		directionalLight.position.y = -1;
		directionalLight.position.z = 0;
		directionalLight.position.normalize();
		scene.add( directionalLight );
	}
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Red

Schüler

Beiträge: 92

Wohnort: Australia

Beruf: Virtual tour creator, VR app developer

  • Nachricht senden

9

Samstag, 13. Juni 2015, 06:10

Thanks for the info Sacha,

Worked it out with this code on an object within the build_scene() function. An example link to a URL

Quellcode

1
onclick: function loadpano(){krpano.call("openurl(http://www.krpano.com,_blank));");},



What would be cool is to be able to manually rotate the models.
I understand an OrbitControls script is used in a usual three.js implementation but look forward to what Klaus comes up with regarding an xml interface and features for the plugin.

10

Donnerstag, 2. Juli 2015, 18:28

The result is pretty amazing !

Is there any way to "click" in VR mode? I try to use onover, but the result is random... The reticle seems to go behind the 3D object.
The result should look like this: http://neuman.github.io/vreticle/

Cheers!

11

Mittwoch, 21. Oktober 2015, 16:12

Hi !

I was using the plugin in a virtual tour and spotted that the plugin makes the "VR SETUP" bug: instead of all the propositions for VR Headset (Cardboard A/B, Homido, GearVR, ColorCross VR, etc.), it only displays ColorCross VR and Cardboard A. I got the same problem in the example provided. Hope it helps if you have the same problem but don't know why!

Have a good day !

12

Montag, 26. Oktober 2015, 12:18

There is anyway to use this like placing the object at the center of the view and rotate the object manually and also placing some tooltip spot around the object or something like that?

13

Samstag, 27. Februar 2016, 18:50

Can we assign a obj object as a child of a traditional Krpano hotspot? Then use the tracking frame by frame to move the "load_object_json" object in 3d space with the moving hotspots editor ?

Tuur

Erleuchteter

Beiträge: 2 866

Wohnort: Netherlands

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

  • Nachricht senden

14

Samstag, 27. Februar 2016, 18:56

Hi,

Yes i am sure it is..
I had a try already but got stuck..
I had problem to get the ath (etc) from krpano or other js to the object.
(had already the flamingo flying in 360 video with some small actions but ..
Also too busy right now.. I could use some js help to access the object.
Maybe small example.

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

15

Sonntag, 27. März 2016, 17:07

Hi Klaus
You are using threejs V.71 In your sample(krpano_three_js_example.zip) and i try to upgrade it to V.75 but it does not worked.
Can you please upgrade your sample?
threejs support fbx in V.75 and it is very important feature.

Thank you

gputhige

Anfänger

Beiträge: 44

Wohnort: Bangalore, India

Beruf: 3D Studio

  • Nachricht senden

16

Dienstag, 7. Juni 2016, 10:14

Amazing. This makes the whole VR more absorbing now....
Thanks Klaus


Rgds
GP

17

Dienstag, 7. Juni 2016, 21:52

Is there any way to "click" in VR mode? I try to use onover, but the result is random... The reticle seems to go behind the 3D object.
The result should look like this: http://neuman.github.io/vreticle/ Hi
Hi Tittu, do you find the answer on your question, i also like to know is it possible to onover to an 3d object in vr mode. anyone know this?

18

Freitag, 22. Juli 2016, 04:04

Hi,

Yes i am sure it is..
I had a try already but got stuck..
I had problem to get the ath (etc) from krpano or other js to the object.
(had already the flamingo flying in 360 video with some small actions but ..
Also too busy right now.. I could use some js help to access the object.
Maybe small example.

Tuur *thumbsup*
Did you have any luck assigning the three.js obj the vtmh_trackinghtspstyle timeline?

Tuur

Erleuchteter

Beiträge: 2 866

Wohnort: Netherlands

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

  • Nachricht senden

19

Freitag, 22. Juli 2016, 10:16

Hi,

no not yet. I tried though,, but also busy busy..
Until now i was not able to set new coordinates or rotations/scaling to the object from xml or javascript.
When anybody has a small example on how this could be done i would be very pleased.. when possible at all at this moment.
Klaus said something about he still needs to work on this a bit, to make a good API for this..
I think we just need to be a bit patient, but when possible, the possibilities are great,, i see that too ;-)

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

20

Mittwoch, 14. September 2016, 04:24

Change to load all materials

Hello

I changed the load_object_json() function to be able to load all materials defined on the json file and stored the scene object.

So, I can access and modify parameters from KRPANO XML file:

Quellcode

1
2
3
4
5
6
7
8
            	copy(obj, plugin[threejs].obj[3D/LONDON/LONDON.js]);
            	set(obj.properties.ath, 14.5); set(obj.properties.atv, 21.5); set(obj.properties.depth, 270); set(obj.properties.scale, 0.7);
            	set(obj.properties.rx, 0); set(obj.properties.ry, 130.0); set(obj.properties.rz, 180);

            	trace('OBJ.PROP.NAME : ', obj.properties.name);
            	trace('OBJ.PROP.ATH : ', obj.properties.ath);

            	plugin[threejs].update_object_properties(get(obj));


Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
	function load_object_json(url, animated, properties, donecall)
	{
            	var nm = url;
		url = resolve_url_path(url);

		var loader = new THREE.JSONLoader();
		loader.load(url, function (geometry, materials)
		{
			///var material = materials[0];
			if (animated)
			{
				///material.morphTargets = true;
				///material.morphNormals = true;
                            	for (key in materials) {           	// Example from: http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript
                                	if (materials.hasOwnProperty(key)  &&    	// These are explained
                                   	/^0$|^[1-9]\d*$/.test(key) &&	// and then hidden
                                   	key <= 4294967294            	// away below
                                   	) {
                                      	materials[key].morphTargets = true;
                                      	materials[key].morphNormals = true;
                                   	}
                            	}

				geometry.computeMorphNormals();
			}

			var material = new THREE.MeshFaceMaterial( materials );

			geometry.computeVertexNormals();

			var obj = new THREE.MorphAnimMesh(geometry, material);

			if (animated)
			{
				obj.duration = 5000;
				obj.time = 0;
				obj.matrixAutoUpdate = false;

				animatedobjects.push(obj);
			}

			assign_object_properties(obj, url, properties);

			krpano.set("plugin[threejs].obj[" + nm + "]", obj);

			scene.add( obj );

			if (donecall)
			{
				donecall(obj);
			}

		});
	}



Also, at the end of the start() function, I added:

Quellcode

1
            	krpano.set("plugin[threejs].update_object_properties", update_object_properties);


It worked but, transparent parts appears into some mesh.

I tried to update the file three.min.js to a new version but did not work. Some one was able to successfully update this file? Any tips?

Thank You

Roberto

Ähnliche Themen