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:
https://krpano.com/viewsource.htm…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
![](https://krpano.com/forum/wbb/core/images/avatars/a9/578-a9318b1110715d3e4cd2a2dfe711db61eb4dedf2.png)
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)!!!!
-
Thanks!
ps. krpano 1.19pr3 .. (build 2015-05-26)!!!!
Yes, that example already includes a intermediate pre-release 3 version.
Best regards,
Klaus -
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.htmlTrying 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 etcLot of fun stuff in here!
Code
Display Morefunction 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
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 KlausRgds
GP -
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/ HiHi 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?
-
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 tooTuur
-
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:
Codecopy(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));
Code
Display Morefunction 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:
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
-
Participate now!
Don’t have an account yet? Register yourself now and be a part of our community!