THREE.JS raycaster does not work as expected

raycaster

#1

Description of the problem

I am developing a sidebar toolkit which switch modes between selecting objects and non-selecting objects.

To summarize,

P1 raycaster does not work as expected
P2 vector.unproject might not be accurate
p3 when object position updated, its vertices keep values in the last frame

Three.js version

Dev
r89

Browser

[] All of them
Chrome
Firefox
Internet Explorer
OS

All of them
Windows
macOS
Linux
Android
iOS
Hardware Requirements (graphics card, VR Device, …)

Details

I build a series of LineSegments from a topological parameters computation server I build. I want let users to select line segments they desire to test global navigation functionality.

(1) P1, raycaster does not work
Initially, I wanted use raycaster to project mouse onto plane position

	// collect intersects
	var intersects = []
	
	// https://stackoverflow.com/questions/17216039/how-to-pick-lines-in-three-js
	// see the discussion, this might not work as expected
	// intersects = raycaster.intersectObjects(roads, true)
	intersects = this.intersectObjects(roads, floorGroup, raycaster)

The raycaster is built using the following codes

	let raycaster 
	if (this._camera instanceof THREE.PerspectiveCamera) {
		let vec = new THREE.Vector3(this._mouse.x, this._mouse.y, 0.5)
		let origin = new THREE.Vector3().setFromMatrixPosition(this._camera.matrixWorld)
		vec.unproject(this._camera)
		dir = vec.sub(origin).normalize()
		t = -origin.y / dir.y 
		clickpos = origin.clone().add(dir.multiplyScalar(t))
		console.log(`UpdateTrackball, Raw computed 'click_pos': <${clickpos.x.round(2)},
		${clickpos.y.round(2)}, ${clickpos.z.round(2)}>`)
	}

This would not work because it returns empty array everytime when I try to “pick”. The scene (I have “quadTree” & “Division” and inverse-query table for indexing but I muted them to test the functionalities for the moment) contains base floor built from plane geometry, and some other floor segments where roads placed on.

I am frustrated because the codes seem to be correct.

(2) P2, Ok I built my own raycaster and everyting works good until I found some unpleasant problems:
(2-1) After unprojected mouse vector , I solved equation P0 + t*Dir = P where P.y = 0, then I triggered quadtree to collect objects nearby. If they are selected, I will flip the hex color value.
But, I found that the solution point does not perfectly coinside with mouse position on my screen. There is always a shift between the mouse on screen and point drawed on 3d world. Because the equation is simple, I suspect that the error has some relationship with “unproject” method.

(2-2) Since quadtree just uses my AABB to collect candidates, they are not true targets I wanted. I need to perform more rigorous tests. However I found after setting the position of the intersected point or sphere, the vertices are not updated accordingly.

		this.trackball.position.set(clickpos.x, 0, clickpos.z)
		this.verticesNeedUpdate = true

This will prevent me to produce a good functionality for developers and customers.


#2

THREE.Raycaster() works good with THREE.LineSegments(). Link The code snippet in that SO answer was written with Three.js r89.


#3

I am afraid. The computation is not accurate let me show you some codes:

First
(1) I have aligned the camera by deduct offset from mouse position:

Second
(1) The following computed intersected points cannot overlap perfectly with mouse position:

(2) codes here are similar with raycaster.setFromCamera(this._mouse, this._camera)
10


#4

Could you provide a live code example?