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

  • where are you defined y and with what ?
    i have created a do_camera_object_hittest based on do_object_hittest when i rollover rollout object !

    the objects are a shape with extruding options * by number of hotspots (and replace them) !

    its a simple raycast from camera not from mouse :)

    Edited 2 times, last by MrTie (December 23, 2018 at 4:04 PM).

  • Oh my mistake. The value of y worked only by accident because it was defined as some random function.
    It is wierd because no matter what numerical value I set it mess up the position, but if you set it to NaN or non-numerical string it works.
    I use this now: renderer.setViewport(0, "-", sw,sh); and it works perfectly. However, I don't really understand what black magic is this.

  • I came across this plugin for importing 3D models in krpano. However, although I have followed the example and the documentation, I add 3D models (js and json) to the three.krpanoplugin.js but they do not appear anywhere. Once I switch back to one of the 3D models in the original example (i.e. the monster.js) it appears in the panorama without any problems.

    I would be very grateful if you could please advise and share your thoughts as to what can be wrong and the way forward?

    Many thanks in advance.

    Best,

    Jacob


  • Hi JJ,

    how did you do that? I'm trying now since 2 days, but until now with no success *huh* . Would be very nice if you could tell me what to do. I load the gltfLoader-script, but afterwards I don't know what to do...

    if anyone else has a solution, please let me know *smile*

    Thanks and best regards

    Lara

  • I just did a rough test.
    The 3d object appears but it moves "with" the cameraposition instead of being attached to the 3d space.

    I added renderer.xr.enabled = true; in the function start(), but it did not help.

    Klaus: Any hints? *smile*

    Kind regards
    Alain

  • how did you do that? I'm trying now since 2 days, but until now with no success . Would be very nice if you could tell me what to do. I load the gltfLoader-script, but afterwards I don't know what to do...

    I added this at the begining of the function build_scene() to import "models/table.gltf":

    Code
    //Import Table	 
    const gltfLoader = new THREE.GLTFLoader();
    gltfLoader.load('models/table.gltf', (gltf) => {	 
    const table = gltf.scene;				
    scene.add(table);
    });
  • After testing, I found that the raycaster is reversed due to the value created by camera projection_matrix, but I don’t know anything about projection_matrix


    function krpano_projection_matrix(sw, sh, zoom, xoff, yoff) {
    var m = krpano_projection;

    var pr = device.pixelratio;
    sw = pr / (sw * 0.5);
    sh = pr / (sh * 0.5);

    m[0] = zoom * sw; m[1] = 0; m[2] = 0; m[3] = 0;
    m[4] = 0; m[5] = -zoom * sh; m[6] = 0; m[7] = 0;
    m[8] = xoff; m[9] = -yoff * sh; m[10] = krpano_depthbuffer_scale; m[11] = 1;
    m[12] = 0; m[13] = 0; m[14] = krpano_depthbuffer_offset; m[15] = 1;
    }

    THREE.js
    R102 is correct:

    R111 is wrong:

  • After testing, I found that the raycaster is reversed due to the value created by camera projection_matrix, but I don’t know anything about projection_matrix


    I only removed minus(-) in which "-mouse_y" in the line of raycatser's ray direction set as like the below, it show the right direction.

    Code
    camera_hittest_raycaster.ray.direction.set(mouse_x, mouse_y, 1.0).unproject(camera).normalize();


    but the intersection is not sill working :(
    even it's not directing the correct way with the mouse pointer.


    my test resource is in the link , and can see the live source in the link
    please check them out, and anyone got some ideas, comments, or advices please let me know :)

    Good luck with ThreeJs

Participate now!

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