Issues with Raycasting and Mouse Interaction for GLTF Models in Three.js

Hello everyone,

I'm currently working on a project where I need to load and interact with 3D objects from a GLTF file using Three.js. While I can successfully load and display the models, I'm encountering issues with mouse interactions, specifically raycasting. Here are the details:

• Loading and Displaying Models:
  • I am able to load and display models from a .gltf file using GLTFLoader.
  • The models appear correctly in the scene, with proper orientation and lighting.
• Raycasting Setup:
  • I have set up raycasting to detect mouse interactions.
  • The mouse cursor changes to a hand when hovering over objects loaded from a JSON file, indicating that raycasting works in that context.
  • For objects loaded from the GLTF file, mouse clicks and interactions initially work, but issues arise after vertical movement of the panorama.

• Problem Description:

  • Initial Interaction: Mouse interactions such as clicking are detected properly on GLTF objects when the panorama is first loaded.
  • Post-Movement Issue: After vertically moving the panorama, mouse click events do not accurately target the GLTF objects. Instead, clicks are registered above or below the intended object.
    
    Below I have attached the functionality.
  Code

  function load_object_gltf(url, properties, donecall = null) {
  		url = resolve_url_path(url);
  		return new Promise((resolve, reject) => {
  			let loader = new THREE.GLTFLoader();
  			loader.load(url, function (gltf) {				
  
  				gltf.scene.traverse(function (child) {
  					if (child.geometry) {
  						child.geometry.computeBoundingBox();
  						child.geometry.computeBoundingSphere();
  					}
  					if (child.isMesh) {
  						const { geometry, material } = child;
  						geometry.computeVertexNormals();
  						var obj = new THREE.Mesh(geometry, material);
  
  
  						child.material.transparent = true;
  						child.material.metalness = 0;
  						child.visible = true;
  						child.castShadow = true;
  						child.receiveShadow = true;
  						
  
  						assign_object_properties(child, url, properties);
  						
  					}
  				});
  
  			
  				scene.add(gltf.scene);
  				gltf.scene.scale.set(-1, -1, -1)
  				resolve(gltf.scene);
  			})
  		})
  	}
  	
  	function do_object_hittest(mx, my) {	
  		var mouse_x = -(mx / krpano.area.pixelwidth) * 2.0 + 1.0;
  		var mouse_y = (my / krpano.area.pixelheight) * 2.0 - 1.0;
  		var krpano_view = krpano.view;
  		var vlookat_rad = krpano_view.vlookat * Math.PI / 180;
  
  		mouse_y += Math.tan(vlookat_rad) * 2.0;
  
  		if (krpano.display.stereo) {
  			mouse_x += (mouse_x < 0.0 ? +1 : -1) * (1.0 - Number(krpano.display.stereooverlap)) * 0.5;
  		}
  		scene.updateMatrixWorld()
  
  		camera_hittest_raycaster.ray.direction.set(mouse_x, mouse_y, -1.0).unproject(camera).normalize();
  		camera_hittest_raycaster.ray.direction.x *= -1
  		camera_hittest_raycaster.ray.direction.z *= -1
  		// scene.add(new THREE.ArrowHelper(camera_hittest_raycaster.ray.direction, camera_hittest_raycaster.ray.origin, 300, 0xff0000));
  
  		var intersects = camera_hittest_raycaster.intersectObjects(scene.children, true);
  		var i;
  		var obj;
  		for (i = 0; i < intersects.length; i++) {
  			obj = intersects[i].object;
  			if (obj && obj.properties && obj.properties.enabled) {
  				return obj;
  			}
  		}
  
  		return null;
  	}

  Display More

Tuur  Klaus  indexofrefraction Can you please give me some hints regarding this issue?

Hi Klaus,
Thank you for the prompt response! I'm looking forward to the next krpano release with full Three.js integration. It sounds like it will address the issues I'm encountering. Thanks again for your help!

Hi indexofrefraction ,
I am following three js docs. And here is the full code.three.krpanoplugin.txt