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

Amazing !! Thanks for this new plugin

WOW!!

Klaus for President!!

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

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

oh my god!
thanks!klaus!

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

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.

https://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!

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

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

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.

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!

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 !

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?

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 ?

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

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

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

Rgds
GP

Quote from tittu

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?

Quote from Tuur

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

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

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

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:

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

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:

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