mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
102.78k stars 35.38k forks source link

About raycaster intersectObjects not colliding correctly, r103+ #22177

Closed eronakoto closed 3 years ago

eronakoto commented 3 years ago

After I plugged in THREE.js in my krpano project, when I tried to bind the click event, I found that the crash test did not work properly for R102 and above. I did a display of the rays and found that the emission direction was all reversed.

To Reproduce

Steps to reproduce the behavior:

  1. Set the camera to synchronize with KR 2.Click on the screen to launch the ray

Code

// code goes here
    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;
    }

    function update_camera_matrix(camera) {
        var m = krpano_projection;
        camera.projectionMatrix.set(m[0],m[4],m[8],m[12], m[1],m[5],m[9],m[13], m[2],m[6],m[10],m[14], m[3],m[7],m[11],m[15]);
    }

        function render_frame() {
        var gl = krpano.webGL.context;
        var vr = krpano.webVR && krpano.webVR.enabled ? krpano.webVR : null;

        var sw = gl.drawingBufferWidth;
        var sh = gl.drawingBufferHeight;

        // setup WebGL for ThreeJS
        restore_ThreeJS_WebGL_state();

        // set the camera/view rotation
        krpano_panoview = krpano.view.getState(krpano_panoview);    // the 'krpano_panoview' object will be created and cached inside getState()
        krpano_panoview_euler.set(-krpano_panoview.v * M_RAD, (krpano_panoview.h - 90) * M_RAD, krpano_panoview.r * M_RAD, 'YXZ');
        camera.quaternion.setFromEuler(krpano_panoview_euler);
        camera.updateMatrixWorld(true);

        // set the camera/view projection
        krpano_projection_matrix(sw, sh, krpano_panoview.z, 0, krpano_panoview.yf);
        update_camera_matrix(camera);
        }
        var camera = new THREE.PerspectiveCamera(50, krpano.area.pixelwidth / krpano.area.pixelheight, 0.1, 3000);
        var camera_hittest_raycaster = new THREE.Raycaster();
        var krpano_panoview_euler = new THREE.Euler();
        function do_hittest() {
                camera_hittest_raycaster.ray.direction.set(mouse_x, -mouse_y, 1).unproject(camera).normalize();
        var intersects = camera_hittest_raycaster.intersectObjects(all_hotspot);
        }

Live example

Expected behavior

Screenshots

Platform:

Mugen87 commented 3 years ago

Please use the forum if you have troubles with upgrading three.js. GitHub is for bugs and feature requests only.