tentone / geo-three Goto Github PK

when I open Height Shader,a hole appeared.

By reading the readme I'm not getting on how to actually use this library to turn map tiles into a material for my sphere buffer geometry.

I'm not getting on how to initialise the lib and then use it for myself. Can you please let me know any examples that'll give me clear understanding about it?

How do I integrate geo-three with a normal JS Project without NPM

MapNode.ts， loadData function,
this.material.map = texture;
Adding the following code will trigger a bug
this.material.transparent = true;
After zooming out, the map will become invisible, and even after zooming in, it will become invisible。

Additionally, if there are two layers, one is the image layer and the other is the annotation layer, how can these two layers be stacked together?
Thanks

Hi there, is the google maps provider listed in the example ( satellite + elevation ) ?
how can we use it ?
thank you

Hi!

Cool project! I was wondering if you are planning to integrate support for vector tiles, such as MVT?
For example, similar to the OpenLayers MVT format: https://github.com/openlayers/openlayers/blob/main/src/ol/format/MVT.js

Two questions here:

• is it possible to place reacth-three-fiber objects on top of a map using geo-location and scaling the objects so that their proportions are match the real map scaling (like meter system)
• is this library and the underlying map providers (or at least some of them) completely free to use ?
  thanks for the information

Currently live demo says...

"You can test the live demo of the library running from the GitHub page"
and points to https://tentone.github.io/geo-three/examples/index.html

It should point to: https://tentone.github.io/geo-three/

Hello, i am looking to use a french map provider for national data (IGN).
Can i and How can i use geo-three with that provider?

Are there any examples of the providers example where one can switch to using the OrthographicCamera instead of the default PerspectiveCamera?

Tried to change the camera init code in examples/providers.js but without any luck.... .-/

Thanks for a great project!

Hi, first of all, Great Project here! Thank you guys!
This is easy to use and easily extendable.

One questions though, I want to make the map plane transparent.
So I've thought of modifying the Three Materials with { transparent: true, opacity: 0.5 }.

Any suggestion on making the map plane semi-transparent and display correctly?

Thanks in advance.

Best,
Edward Chen

Openstreetmap option does not work/load tiled images as there is a mismatch in the URL request from the library

An addition '/' is added in the statement after this.address which is causing an error

Hi José,

first off, thank you for this awesome library! It's wild that I never noticed this library up until now, this looks amazing 😄 So kudos and thanks!

I was wondering how to implement an overlay, for example icons or paths which are displayed on the map (as you see in Google Maps for example, with markers and routes, or icons for shops or sights). How should I approach this?

I could think of two three scenarios:

• Implement a custom data provider, in which I fetch the tile to render and implement some logic to render other stuff on top of it.
• Build something on top of the map view which uses the coordinate calculation to figure out if something must be rendered on top of the map view, and where/in which size. I imagine that this might be quite complicated to pull off.
• I'm just not reading properly or too inexperienced with three.js to see the obvious solution 😉

I normally am not the kind of person to use the Issues as a Q&A section, but I simply couldn't find any info on this in the README and would really love to use your library, so I thought I'd give it a shot, sorry to bother you :) Again, thank you for publishing this awesome library!

Best wishes
Niklas

hi tentone ：
here is a great project ：https://github.com/felixpalmer/procedural-gl-js ，the same GPU render terrian his most smooth。but it cant add three object where you like、
some suggestions：
1 geo-three cluld add a tiledate buffer 。
2 compatible the nasa.xyz's height image
3.reduce the tiledate request
geo-three will be more greate project 。

Hi there I'm looking for a way to add the map to a plane and then clip the plane to a set of map bound coordinates (the idea being to be able to rotate and pan around an area and visualise some below ground data). Is this supported by the library, I've been trying out multiple approaches and getting nowhere?

1
I want to get a function,
param in : latitude longitude
out: MapView

not find it

2
prepare to modify MapView and MapPlaneNode
notice that MapPlaneNode need "level x y",(I just have latitude longitude)
so, use UnitsUtils.datumsToSpherical(la, lo) to convert

3
here is a mistake.
"SanFrancisco level = 7, x = 20, y = 49" is hard code
"SanFrancisco 37°48’0”N，122°25’0”W" is from web search engine
UnitsUtils.datumsToSpherical(37°48’0”N，122°25’0”W") is return {x: 272176.1549895539, y: 90124.50931675344}
not similar to x = 20, y = 49

height shader is no longer working and the DistanceLOD does not seem to be working either.
thanks

Hello,

Can the LOD be adjusted to render all the tiles in the viewport?
The tiles rendered every time the camera updates seem to be only the 4 in the center.

Thanks

I like this !!!

We can add some functions and examples, such as camera control，and post effect，I think you can see here, it is based on three. Js to do, but their goal is too far, custom post-processing is too complex, and the camera control is also very limited

Hi, first of all, Great Project here! Thank you !
I want to ask a question：how to load tiles with a resolution of 512 * 512 or 1024 * 1024？
Tiles are generated through geoserver service，and large resolution tiles are loaded to reduce the number of requests
Look forward to your reply，thanks in advance.

First of all: Thanks for a great project!

Second:

Please see screenshot below. Occasionally my custom handler wants to load tiles that are invalid.

I think this might be the reason for the white region seen. Can anyone point me in the right direction for a fix?

This is my Provider code(copied from this project).

export class OurOpenStreetMapsProvider extends GEOTHREE.MapProvider
{
               constructor(address) {super();}
               fetchTile(zoom, x, y)
               {
                   return new Promise((resolve, reject) =>
                   {
                       var image = document.createElement("img");
                       image.onload = function(){resolve(image);};
                       image.onerror = function(){reject();};
                       image.crossOrigin = "anonymous";
                       //image.src = "https://tile.openstreetmap.org/10/546/321.png";
                       //image.src = "https://tile.openstreetmap.org/" + zoom + "/" + x + "/" + y + ".png";
                       image.src = mapserver + zoom + "/" + x + "/" + y + ".png";
                   });
               }
}

This is one of the wrong tile urls:

https://tile.openstreetmap.org/20/560839/328106.png

I got your lib to run in my very specific mobile env and first thank you for that!
Your GPU height shader is pretty awesome!

Now the aim of my project is to get something like PeakFinder.
i already have the Three JS post processing effect using https://github.com/OmarShehata/webgl-outlines (which i need to change i guess to be able to use your height shader).

• The first thing is that i dont need the "tile" provider, i simply need to render the height vertex using MeshBasicMaterial or something. Is that possible?
• the second thing is tile loading. In my env (which is not that good perf wise) i can see that when i set the location and start rendering "closest" tiles are first rendered at low level then slowly renderer at higher level. Is there a way to make it load directly at the "final resolution"? It would greatly improve performance in my case.
  Is that the LOD handling that? maybe i can write a custom one.

Thanks

hi, im trying to set this package up with react and fiber, but the tiles that are fetched have wrong coordinates (totally of grid like: "https://a.tile.openstreetmap.org/14/8193/8189.png". i really dont know what im doing wrong here.
maybe the wrong tiles are getting loaded due to zoomlevel, or the scale of the map which is ({"x":40030223.8575236,"y":1,"z":40030223.8575236})
the first tiles that are fetched are actually valid, but i guess they get overwritten. -> you can find a complete console log of the fetched tiles below.

Ive tried multiple aproaches:

A) using basic MapControls

https://pastesite.org/view/8628e33c

B) using cubeCamera and OrbitControls, without using mapControls

https://pastesite.org/view/6b900f11

console log of fetched tiles without zooming or panning:

https://pastesite.org/view/fc0e90de

Are there any discord servers where i can ask about such topics? I find it quite hard to get infos about threejs in combination with react...
also: osm is creating that weird tile with red text, not sure what its saying...

Thanks in advance <3 ,
leo

Hi

I see there was #18 and #19

I've just done like

yarn create react-app --template typescript try-geo-three
yarn add geo-three

And then try to import * as foo from "geo-three" and I'm getting:

error TS7016: Could not find a declaration file for module 'geo-three'. '/home/tom/dev/now/try-geo-three/node_modules/geo-three/build/geo-three.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/geo-three` if it exists or add a new declaration (.d.ts) file containing `declare module 'geo-three';`

4 import * as foo from "geo-three"
                       ~~~~~~~~~~~
Found 1 error in src/App.tsx:4

This is with 0.1.0

Equirectangular projection
wouldnt it be better for planar projection/map to use Equirectangular coordinates:? this could even spare unnesscesary computation in spherical mode with a increased zoom/low fov by switching to planatary.
by switching to non-spherical coordinates i dont need to to convert and remap/interpolate the spherical coordinates for every single vertex of every element that i want to place/find on the planatary map.
->
"x = r λ cos(φ0)
y = r φ
This is simple equirectangular projection.In most cases, you'll be able to compute cos(φ0) only once, which makes subsequent computations of large numbers of points really cheap."

EPSG:900913
i guess you relate to EPSG4326:
"There are a few things that you are mixing up.
Google Earth is in a Geographic coordinate system with the wgs84 datum. (EPSG: 4326)
Google Maps is in a projected coordinate system that is based on the wgs84 datum. (EPSG 3857)
The data in Open Street Map database is stored in a gcs with units decimal degrees & datum of wgs84. (EPSG: 4326)
my problem is that 900913 is actually not listed on https://spatialreference.org/ ->** can be used to generate proj4 reference code like https://spatialreference.org/ref/sr-org/7483/proj4/ for absolute accurate coord.-to-cartesian-converion**

thanks again for the project. its really great!! im having problems with spherical geometry in react-fiber though...planning to publish a react-preset, but spherical, is just not working... anyway thanks for support!- leo

In build folder we only have geo-three.js, geo-three.js.map, geo-three.module.js & geo-three.module.js.map. Due to this geo-three package will not be accessible when imported in Typescripts

I want to load and implement terrain through geotiff data, but I don't know how to start. Can you give me some advice

While trying to add the library to my app, I noticed that the npm package only contains javascript code and no typings. Is it intentional ? Do you plan to publish the types as well ? We definitely both see the benefits of coding the library in typescript, but this is also useful to use it in typescript.

Thanks a lot!

Hello, developer. First of all, thank you for developing such a user-friendly plugin. However, I have met some problems in specific use, and I hope you can answer them. I want to set the center position of the map, but I don't know how to operate it. When I read the development document, I found that the description in this part is not clear. I hope you can tell me how to set it.

Thank you for your great work!

I tried to update my version from 0.1.1 to 0.1.9, but i noticed a misplacement with 3d-tiles from three-loader-3dtiles after updateing to 0.1.2. On Cesium the 3d-tiles are correctly placed.

Version 0.1.1

Version 0.1.2

In both versions the 3D tiles have a wrong scale, but I think this problem comes from three-loader-3dtiles.

i need to get all tiles that are in viewspace. Where can i safe them to an array, if they are not already saved somewhere?
thanks in advance:
leo

System: Ipad, iOS 15.6
Browser: Google Chrome
No errors in the console.
https://tentone.github.io/geo-three/index.html

Thank you!

There is a example
https://www.bilibili.com/video/BV1d5411V7Ap/

It is made by Cesium.js

You have published a really neat library where the results look very promising.

However I have just a remark, that the seams between the tiles are quite strong. There should be some interpolation be made between the tiles so that everything is much more fluid.
Like this recently developed library named map33.js does it within its own shader material (see code here.

Maybe that's something you could also try to include (or me in a PR ... haha)

Hello, first I would like to thank you for your work.

(everything working perfect with BingMapsProvider).

I'm having issuse to fetch google maps tiles
this is my code:
const googleProvider = new Geo.GoogleMapsProvider(GOOGLE_MAPS_API_KEY).

I saw the createSession fails, the google maps API key is valid with tiles enable.
Mabye I'm doing something worng? thanks for any help

** according to google maps docs: https://developers.google.com/maps/documentation/tile/roadmap
geo three createSession fetch:
const address = 'https://www.googleapis.com/tile/v1/createSession?key=' + this.apiToken;

what google shows:
"https://tile.googleapis.com/v1/createSession?key=YOUR_API_KEY"

curl -X POST -d '{
"mapType": "roadmap",
"language": "en-US",
"region": "US"
}'
-H 'Content-Type: application/json'
"https://tile.googleapis.com/v1/createSession?key=YOUR_API_KEY"

I think they have change the API address, I succeeded to fetch it from my browser and create session with the new adress

i uploaded tiles of selected area then i'm getting this warning :Texture marked for update but no image data found.

How to add multiple layers on the maps. I used multiple maps but i got issues with tiles fetching of overlapping area.

Would you be open to migrating the lib to typescript?
I am on my way to do it in my fork but want to ask you first. Cause merging will get very hard if one is in JS and the other in TS

i test a EPSG:90913 Coordinates:
{
x: 399115.99667538225,
y: 6075329.634674081
}

It shows right in epsg.io. You can test at:
https://epsg.io/map#srs=900913&x=%20399115.99667538225&y=6075329.634674081&z=12&layer=streets

But in bingmap, it not same with epsg.io.

I do not known why? :(

Using a planar map and the debug provider, I get this in my scene:

Initially, the tiles appear to be loading and change, but after later the situation stabilizes to what's shown in the screenshot.

Expected:
The level 16 tile is replaced by 4 tiles @ level 17, or none.

Hi,

This is a question and not a bug.
I'm currently loading a 3dtiles model and a Bing layer.

The model is a region model with the coordinates below
// [west, south, east, north, minimum height, maximum height]
-0.00010867585747044324
0.8990759032023482
0.00003249817050595483
0.8991635359312518
15.237850105389953
121.4680495094508

I want to place the model correctly on the bing Layer. In the ideal world, I think it might be possible to calculate the model's centre and then find that position on the Bing Layer.

Imagine the center of the model is lat/lng is 51.51356734838993, -0.008762004251769352, how can I move an object so it stays on the right place on top of the Bing layer? (red pin on the image)

Thank you

hi tentone ：
cause i need add three obj by mouse ,i need get the xyz Coordinates. on map .on planar mode : i add a plan for moue get the Coordinates of map . then we cloude get W84 Coordinates quick buy mouse .like espg.io do . that we clould add obj where you like.i it's a simple think .but make a greate change. But there is one small regret ： on terrain mode we cloud not get the heightinfo.

const geometry = new THREE.PlaneGeometry(0.4e8,0.4e8,256,256);
const material = new THREE.MeshBasicMaterial( {color: 0xff0000,wireframe:true, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
plane.rotateX(Math.PI/ 2);
scene.add( plane );
If we can get elevation information, it will be more better. Do you have any suggestions？

Hi, and thank you for this library which looks awesome!

I am just not sure from the readme whether the library supports the generation of a 3D terrain. Because from what I read, it is possible to provide a height map tileset, but I haven't been able to reproduce any 3D terrain in the demo. It is always a planar map.

Did I miss something ?

I am looking for something similar to Map33, but I prefer your coding style, focused on maintainability and of course written in TypeScript :)

Thank you!

hi tentone：
base scene： we wan't to make same mark on map by longitude and latitude 。some time longitude and latitude location is on the mountain 。datumsToSpherical just return plane coordinates [x,y]. and then the make sprite will be Obscured by the terrain mesh。

In my way： longitude and latitude => ESP900913[x,y,z] (y ===0 )[plane x y coordinates] =>tile[x+offset,y+offset, >14level ] =>get tile terrain image. =>get offset pixe data cal the height data . but there still has error by this way。
do you have same method by gpu or some other ？
look forward to your reply！！！

I would like to test your project but the example wont run.
Neither on your website nor when locally cloned.

Uncaught TypeError: Class constructor Wn cannot be invoked without 'new'
    at MapHeightNodeShader.MapHeightNode [as constructor] (geo-three.js:794)
    at new MapHeightNodeShader (geo-three.js:1339)
    at new MapView (geo-three.js:1699)
    at (index):143
    ```

Hi! We're using geo-three for interactive maps.
Now that Google has opened up the 3D Tiles API (https://cloud.google.com/blog/products/maps-platform/create-immersive-3d-map-experiences-photorealistic-3d-tiles?hl=en), I was wondering if you're planning to add support for that API?
That would be awesome! Thanks