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

  • I using the newest verion of threejs and loading .gltf model, it's working normally but event on it can't fire, the do_object_hittest always return null. Does anyone have any idea to fix this? Thank you.

  • Good morning we are facing similar issues with three.krpanoplugin and GLTFLoader .

    We have the same issue about memory buffer, but also one related to the 3D object.

    At first glance, the 3d models are correctly loaded, but if I move all around a scene the 3D objects disappear.
    Have you ever experience this issue?
    I already tried to change the threejs plugins (https://cdn.jsdelivr.net/npm/three@0.141.0/build/ ), but result does not change.

    Any suggestion ?

  • Good morning we are facing similar issues with three.krpanoplugin and GLTFLoader .

    We have the same issue about memory buffer, but also one related to the 3D object.

    At first glance, the 3d models are correctly loaded, but if I move all around a scene the 3D objects disappear.
    Have you ever experience this issue?
    I already tried to change the threejs plugins (https://cdn.jsdelivr.net/npm/three@0.141.0/build/ ), but result does not change.

    Any suggestion ?

    I can't click on model, can you clicked on it?

  • Thank you so much! I'm newbie. I'm learning how to insert model3d into 360 images. I have a question, hope you all can answer. How to insert a model3d into 360 images with different coordinates ath, atv?

  • Hi everyone,
    I am very new to krpano and I have been trying to get a 3d model (eg. cube) as a part of the 360 image(scene). I have been able to do that with the three.krpanoplugin.js but I also want to make it draggable and also get it synced for multiple users. Any idea how I could achieve this?
    Also, I was trying to import Loaders for OBJ and GLTF to use in this plugin, but I haven't been able to. I would really appreciate if someone could help out.

    Thanks.

  • Hello,
    I have been using krpano and threejs for a while, and have manged to insert glb objects into 360 scenes and depthmap scenes. With the developpement of depthmaps, there is a depthbuffer attribute for hotspots so that they appear correctly in 3d space relatively to other hotspots or the depthmap object, however it is not the case with threejs objects. The threejs objects always appear in front of hotspot and depthmap regardless of their position.
    At first I thought that threejs was a layer that simply appeared on top of the krpano layer, but in some rare cases I was able to have three js objects intersect with a depthmap wall, although not in the right place.
    This led me to believe that the intersection between threejs and krpano elements was possible, with a correct z-culling.
    My guess is there are parameters to change regarding the depthbuffer, or something with the frustum planes of the cameras, I have tried tweeking parameters in threejs plugin here (in threejs.js) :


    var krpano_depthbuffer_scale = 1.0001; // depthbuffer scaling (use ThreeJS defaults: znear=0.1, zfar=2000)
    var krpano_depthbuffer_offset = -0.2;

    with a small effect but no success,

    Here is another guess on where the problemecan be solved, but I don't have enough experience with webgl to know what I'm doing.

    function restore_krpano_WebGL_state() {
    // console.log("restore_krpano_WebGL_state");
    var gl = krpano.webGL.context;

    //gl.disable(gl.DEPTH_TEST);
    gl.cullFace(gl.FRONT);
    gl.frontFace(gl.CCW);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.activeTexture(gl.TEXTURE0);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);

    // restore the current krpano WebGL program
    krpano.webGL.restoreProgram();

    renderer.state.reset();
    }


    function restore_ThreeJS_WebGL_state() {
    //console.log("restore_ThreeJS_WebGL_state");
    var gl = krpano.webGL.context;

    gl.enable(gl.CULL_FACE);
    gl.cullFace(gl.BACK);
    if (!krpano.image.depthmap.url) {
    //enable visibility of 3D Objs in 360 scenes. Else krpano walls will hide the 3D objects.
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);
    gl.clearDepth(1);
    gl.clear(gl.DEPTH_BUFFER_BIT);
    }
    renderer.state.reset();
    }

    I also tried changing the display.depthrange krpano parameter with no success.

    Here is an example of what the problem looks like in a depthmap scene (attached screenshots)
    The room is a depthmap, the objects are glb objects displayed with threejs, and the yellow + button is a hotspot.

    If anyone has another idea on how to solve this depth compatibility problem please let me know. Don't hesitate to ask questions if you need more precisions. Thanks in advance ! *smile*

  • Hello and thank you for answering.

    I also thought this was impossible at first, but then I came across situations where threejs objects where occluded by krpano objects. For example, in this scene I have a threejs helmet object behind a wall that is a depthmap wavefront (.obj) object :

    If I move to the right so as to have the wall between the camera and the helmet, the expected and ideal behavior would be that the wall hides the helmet which is not the case :

    But if I get closer to the wall, the helmets begins to be hidden by the wall (completely hidden if I get close enough but I stayed at a distance where we could see the intersection between the wall and the helmet)



    So it seems that an interaction between the two renderers does occur, and my guess is that it is because they both use webGL and maybe share a depthbuffer. If I had more information on the depthfunction of krpano I could maybe tweek threejs to match it and have a nice occlusion, that would be ideal. Otherwise I would have to do everything in threejs...

  • If I had more information on the depthfunction of krpano I could maybe tweek threejs to match it and have a nice occlusion, that would be ideal.


    Hi,

    the depthbuffer scaling would need to match.

    Typically configured using a projection matrix with near/far settings.

    In krpano it can be set using the depth.depthrange setting:
    https://krpano.com/docu/xml/#display.depthrange

    In ThreeJS it might be possible to set the same near/far settings using the Camera settings:
    https://threejs.org/manual/#en/cameras

    or alternatively using the projection matrix directly:
    https://threejs.org/docs/#api/en/c…rojectionMatrix

    In my older threejs example the depthbuffer scaling was using hardcoded values (krpano_depthbuffer_scale, krpano_depthbuffer_offset) but these don't match the current version anymore.

    In the next krpano release there will be an API that exposes the current projection matrix that is used in krpano, then this could be directly reused for rendering also the threejs content.

    Best regards,
    Klaus

  • In the next krpano release there will be an API that exposes the current projection matrix that is used in krpano, then this could be directly reused for rendering also the threejs content.

    If I understand correctly, this would give the ability to load third-party models via Three.js that would overlap with the model loaded via krpano? ))

    If so, this is exactly what we've all been waiting for for a long time. It's just like we are waiting for support for the glb format, shaders, model animation))))
    Very very very very very very waiting!!!))))))
    *g* *g* *g* *g* *g*

Participate now!

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