Using this maplibre example, Add a 3D model with three.js | MapLibre GL JS Docs | MapLibre
and these three.js examples, three.js/examples/jsm/lines at master · mrdoob/three.js · GitHub
-Updated with newer codepen-
Line2 is not working correctly with this method (from the mapLibre example) of creating the projectionMatrix
The line appearance changes when camera position changes.
resolution: new THREE.Vector2(width, height)
To have correct width in pixels, this parameter needs to be also set, when you resize the window.
Thank you, I have added a function for a map resize event.
Do you think the issue is resolvable in the vertex shader?
(i will add LineMaterial to the codepen)
Added vertex shader to the codepen. (at the top)
-update, i removed it-
Line points changed and another segment added
Now, with worldUnits set to true, both segments show up, but the line material seems to have incorrect axis.
Here I have simplified the demo and moved it to nyc.
The camera projectionMatrix is determined by multiplying the mapLibre map.transform.mercatorMatrix with the created worldTransform. (created at top)
I think something about this projection matrix doesn’t work with Line2. Not sure if I should change the material or use a different projectionMatrix.
I can use the method used in threebox: threebox/CameraSync.js at 6e6a1ae3878c8557c20eb56ada53af843222f390 · peterqliu/threebox · GitHub
but i am looking for a way to make this method work with Line2
(from Add a 3D model with three.js | MapLibre GL JS Docs | MapLibre)