You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Tuesday, May 26th 2015, 6:51pm

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

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

2

Tuesday, May 26th 2015, 7:49pm

Amazing !! Thanks for this new plugin *thumbsup*
everpano.com step beyond 360

3

Tuesday, May 26th 2015, 8:22pm

WOW!!

Klaus for President!!

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

This post has been edited 1 times, last edit by "milemann" (May 26th 2015, 8:47pm)


4

Tuesday, May 26th 2015, 9:07pm

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

Best regards,
Klaus

jeromebg

Professional

Posts: 1,116

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

5

Tuesday, May 26th 2015, 9:28pm

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

6

Wednesday, May 27th 2015, 12:14am

*thumbup* oh my god!
thanks!klaus!

Red

Trainee

Posts: 99

Location: Australia

Occupation: Virtual tour creator, VR app developer

  • Send private message

7

Friday, June 12th 2015, 8:02am

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

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

8

Friday, June 12th 2015, 6:10pm

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!

Source code

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

Trainee

Posts: 99

Location: Australia

Occupation: Virtual tour creator, VR app developer

  • Send private message

9

Saturday, June 13th 2015, 6:10am

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

Source code

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.

tittu

Beginner

Posts: 12

Location: France

  • Send private message

10

Thursday, July 2nd 2015, 6:28pm

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!

tittu

Beginner

Posts: 12

Location: France

  • Send private message

11

Wednesday, October 21st 2015, 4:12pm

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

Monday, October 26th 2015, 12:18pm

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

Saturday, February 27th 2016, 6:50pm

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

Sage

Posts: 3,784

Location: Netherlands

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

  • Send private message

14

Saturday, February 27th 2016, 6:56pm

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*

reza_shnia

Intermediate

Posts: 168

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

  • Send private message

15

Sunday, March 27th 2016, 5:07pm

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

Trainee

Posts: 53

Location: Bangalore, India

Occupation: 3D Studio

  • Send private message

16

Tuesday, June 7th 2016, 10:14am

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


Rgds
GP

17

Tuesday, June 7th 2016, 9:52pm

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

Friday, July 22nd 2016, 4:04am

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

Sage

Posts: 3,784

Location: Netherlands

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

  • Send private message

19

Friday, July 22nd 2016, 10:16am

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*

robjlg

Beginner

Posts: 11

Location: Brazil

  • Send private message

20

Wednesday, September 14th 2016, 4:24am

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:

Source code

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));


Source code

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:

Source code

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

Similar threads