Upgrade from r102 to r103+, raycaster is reversed before and after, resulting in incorrect intersectObjects results

Questions
,
1

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.

This is the runnable project package，Please help to take a look, thank you all
Main code files：
threejs_example\three.krpanoplugin.js

Main Functions:
krpano_projection_matrix,
render_frame,
do_object_hittest

R102:
r102-1
r102-2

R111:
r111-1

r111-2
r111-2457×518 44.1 KB

Code：

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);
        }
2

Because of the access to KR, the whole world is opposite.
How can I convert the opposite rays?
scene

3

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;
	}
6

Resolved, caused by projectionMatrixInverse not being set

1 Like
7

how did you achieve this? How do you do the inverse