Posts by sai

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

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!

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

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

Hi akarsh-vaidya ,
I was also trying to do same thing. But did not get any results.
klaus.krpano Can you please suggest anything that can help us?

Hello ,

I'm encountering an issue while integrating Three.js(loading .obj and .mtl file) with krpano, and I'm seeking some guidance or insights from the community.

Problem Description : A black plane is appearing in the center of the screen as shown in the image, which seems to interfere with the visibility of other objects.

I found that setting the camera's z-axis to a value other than zero resolves the black plane appearance issue that I don't want to do.

Any guidance or pointers in the right direction would be greatly appreciated.

Below is the plugin code attached...