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
Display Morefunction 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; }