Still can't get raycaster to work on non page-filling canvas with large coordinates

dolfandringa · August 24, 2020, 2:28pm

I am trying to get raycaster to work for my pointcloud using OrbitControls and a PerspectiveCamera. I am loading data from a pcd file (generated in open3d in python). The coordinates are light years, and very large (esp x and z are in the 1000’s).
The canvas only uses part of the page, but I think I managed to at least get the mouse coordinates correctly now by using renderer.getContext().canvas.getBoundingClientRect() to get the bounds of the canvas. When I hover with my mouse I do get mouse coordinates between -1 to 1 for both x and y. But if I then do a raycaster.setFromCamera(mouse, camera), no points are found to intersect. I’m not sure what the cause is.
With the mouse in the top right corner, and a point there too, I log both the calculated mouse coordinates and then log the raycaster.ray and get these results:

It’s not clear to me from the docs what unit/coordinate system the “direction” should be in, but the numbers look a bit low if you compare it to the origin, which seems to be the correct camera position.

I have a working demo on http://allican.be/elitedangerous_3d_mapping/ with the code on https://github.com/dolfandringa/elitedangerous_3d_mapping/blob/cd9083afde539af13a02a76ec5f46ec7b08cb142/docs/index.js

Mugen87 · August 24, 2020, 3:37pm

You have to call intersectObjects() like so:

let intersects = raycaster.intersectObjects( scene.children, true );

Notice the second parameter. If set to true, all descendants are checked as well. Consider to use intersectObject() and directly pass in your point cloud.

BTW: Please do not create an instance of Vector2() in onMouseMove(). Create the vector object once in module scope and then just reuse it.

github.com

dolfandringa/elitedangerous_3d_mapping/blob/cd9083afde539af13a02a76ec5f46ec7b08cb142/docs/index.js#L44


	// (-1 to +1) for both components
  //console.log("Moving mouse", event);

	/*
  mouse.x = ( event.clientX / width ) * 2 - 1;
	mouse.y = - ( event.clientY / height ) * 2 + 1;
  */
  //mouse.x = ( event.clientX / width ) * 2 - 1;
	//mouse.y = - ( event.clientY / height ) * 2 + 1;
  let canvasBounds = renderer.getContext().canvas.getBoundingClientRect();
  mouse = new THREE.Vector2();
  mouse.x = ( ( event.clientX - canvasBounds.left ) / ( canvasBounds.right - canvasBounds.left ) ) * 2 - 1;
  mouse.y = - ( ( event.clientY - canvasBounds.top ) / ( canvasBounds.bottom - canvasBounds.top) ) * 2 + 1;
  //let vec = new THREE.Vector3(mouse.x, mouse.y, 0.5);
  //console.log(vec.unproject(camera));
  //console.log(vec.sub( camera.position ).normalize());

}

function load_layer(name, update_camera=false) {
  console.log('Loading layer ', name);

Besides, keep in mind that you raycast against a point cloud. This code will make the entire point cloud red, not just individual points:

github.com

dolfandringa/elitedangerous_3d_mapping/blob/cd9083afde539af13a02a76ec5f46ec7b08cb142/docs/index.js#L221-L222


		intersects[ i ].object.material.color.set( 0xff0000 );
    intersects[ i ].object.material.colorNeedsUpdate = true;

Besides, Material.colorNeedsUpdate does not exist. I suggest you study how the following official example works:

https://threejs.org/examples/webgl_interactive_points

dolfandringa · August 29, 2020, 3:36pm

Cool, yeah, the recursive part was what I missed. Thanks for that. The color I knew already, just wanted predictable behavior first.

Topic		Replies	Views
PointCloud intersection raycasting problem Questions raycaster , points	2	1308	July 30, 2019
Raycast to select Points in pointcloud - returns all points - intersectObjects Questions raycaster , points , raycasting , point-clouds	6	2849	March 5, 2024
Raycaster only works intermittently Questions raycaster	3	747	June 12, 2019
Raycaster.ray intersecting Plane Questions raycaster , math	1	6270	April 20, 2018
raycaster.intersectObjects vs mouse client into scene Questions raycaster	2	528	June 23, 2021

Still can't get raycaster to work on non page-filling canvas with large coordinates

Related Topics