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.
