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:
    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

  • 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!

  • 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

    Code
    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.

  • 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?

  • 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*

  • 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?

  • 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 *wink*

    Tuur *thumbsup*

  • 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:

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


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

    Code
    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

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!