Struggling with R3F setup for XYZ Tiles, WMTS Tiles, Centering Map and adding 3D Cube

[newguy123-creator]

Question

Hi Guys

See my StackBlitz setup below

1st time questions here, kindly bear with me!

I'm currently using the XYZTilesPlugin, and it seems to work OKish for openstreetmap, however I had to ask AI to help me with a component to setup the initial map location, orientation and zoom, and that is in the form of "LookATFrameNorthUp.jsx" in the components folder.

I'm a bit gobsmacked that I had to create that component in the 1st place, as there must be something already built in whereby I can very easily just go to a specific location on the map with specific zoom level, pitch and bearing!

Anyway, that LookAT doesnt work as intended anyway as the map is not centered to my lat long coords that I gave it in App.jsx

Then, using the "EastNorthUpFrame" I'm trying to stick in a basic cube in same lat long coordinates, however I'm not seeing any cube. I know I dont have any lights in, but I would expect to at least see a black cube.

At the end of the day, I would like to show a specific Mapbox map I designed, and I added that in tests with my token etc, but it seems a bit pixelated and text is hard to read, and not crisp compared to when I use regular Mapbox GL JS instead of 3D-Tiles-Renderer. Is the Mapbox MVT thing working yet and would that makes things crisper for me similar to Mapbox GL JS, and if so, How can I adjust my code to use the MVT tiles please from Mapbox?

Supplemental Data

https://stackblitz.com/edit/vitejs-vite-gdkdexq2?file=src%2FApp.jsx

Library Version

0.4.18

Three.js Version

0.181.2

[gkjohnson]

Hello! You can use the ReorientationPlugin to rotate the globe so that a specific lat / lon / alt is positioned at the origin such that the surface is pointing Y+ (three.js world coordinates). This means you'll need to place the camera above the origin pointing downward to see the point.

<TilesPlugin plugin={ ReorientationPlugin } lat={ lat } lon={ lon } />

If you just want to position the camera you can get a camera frame using the Ellipsoid.getObjectFrame function (still undocumented):

// get the camera position in the local tiles frame
tiles.ellipsoid.getObjectFrame( lat, lon, alt, az, el, roll, camera.matrix, CAMERA_FRAME );

// transform the frame into the world frame based on the tiles position
camera.matrix.premultiply( tiles.group.matrixWorld );

// extract the transform components
camera.matrix.decompose( camera.position, camera.quaternion, camera.scale );

[newguy123-creator]

Hello! You can use the ReorientationPlugin to rotate the globe so that a specific lat / lon / alt is positioned at the origin such that the surface is pointing Y+ (three.js world coordinates). This means you'll need to place the camera above the origin pointing downward to see the point.

<TilesPlugin plugin={ ReorientationPlugin } lat={ lat } lon={ lon } />

If you just want to position the camera you can get a camera frame using the Ellipsoid.getObjectFrame function (still undocumented):

// get the camera position in the local tiles frame
tiles.ellipsoid.getObjectFrame( lat, lon, alt, az, el, roll, camera.matrix, CAMERA_FRAME );

// transform the frame into the world frame based on the tiles position
camera.matrix.premultiply( tiles.group.matrixWorld );

// extract the transform components
camera.matrix.decompose( camera.position, camera.quaternion, camera.scale );

Thanks @gkjohnson , I gave that a go, but I still seem to be doing something wrong.

Updated stackblitz:
https://stackblitz.com/edit/vitejs-vite-gdkdexq2?file=src%2FApp.jsx

1 - The map doesnt show, until I zoom in or out slightly
2 - The origin or globe rotation, seems random with each page reload
3 - I still dont see my three cube anywhere near my lat long, in fact I dont see my added cube at all

If the ReorientationPlugin works like I think it does, then that essentially makes my three coordinates [0,0,0] the same location as my lat long doesnt it, then all I need to do is have my starting camera at something like [0, 20000, 0] then my cam will be smack above my lat lon at 20km up? Doesnt seem to work like that in my stackblitz....

[gkjohnson]

Please double check your code and usage of the plugin. Your implementation has variable spelling mistakes and is not passing variables into the plugin correctly

[newguy123-creator]

Please double check your code and usage of the plugin. Your implementation has variable spelling mistakes and is not passing variables into the plugin correctly

I noticed one typo: "lomg" which I now changed to "lon"

I now also changed it to this:

          <TilesPlugin
            plugin={ReorientationPlugin}
              lat= { lat }
              lon= { lon }
              height= '0'
              recenter= 'true'
          />

...but still something is wrong, the map now starts at the same place, but it is upside down, and my lat lon coords is Birmingham, UK, however the map now starts upside down in what looks like somewhere in Kazakhstan.

Also, still no cube visible...

[gkjohnson]

Also, still no cube visible...

The cube is present in the camera view it's just not very large.

it is upside down

From the docs I linked:

"Transforms the centers the tileset such that the given coordinates and height are positioned at the origin with "X" facing west and "Z" facing north"

If you'd like the view to be oriented a certain way then the camera will need to be adjusted accordingly.

my lat lon coords is Birmingham, UK

Also from the docs: "Lat and lon are in radians" but you seem to be providing the values in degrees.

Is the Mapbox MVT thing working yet and would that makes things crisper for me similar to Mapbox GL JS, and if so, How can I adjust my code to use the MVT tiles please from Mapbox?

Mapbox MVT tiles are not supported at the moment. Whether text is pixellated or hard to read is a limitation of the underlying data and unfortunately not something this project can fix, though it may be possible to add some features that will allow tiles to load more quickly so the highest level of detail is available. You can also adjust settings to change the level of detail of the loaded data and queue more data to load so it's available more quickly.

[newguy123-creator]

Thanks, now I'm getting somewhere!

Another question, this works great in Stackblitz, and also locally.
However locally, I'm also getting this warning on the console:
TilesRenderer: tiles versions at 1.1 or higher have limited support. Some new extensions and features may not be supported.

[gkjohnson]

However locally, I'm also getting this warning on the console:

The warning is as it says - there are some features specific to 3d tiles 1.1+ that are not supported and if you're using a tile set that relies on one of them you may see some issues. You can see the remaining 1.1 features in #235. At this point the list is fairly small and the warning could be updated to be a bit more specific, though.

[newguy123-creator]

The whole point of this excersize, was to see if if this map renderer, can work together with the three based Gaussian Splat viewer SparkJS.
In Mapbox GL JS, it seems to be overriding my splat shader and so its a total mess.

In this renderer however, the splats at least look as they should, but there is other weird stuff going on. For example I have this splat 1km in the sky, and looking straight from top, all is well:

However, adjust the pitch a bit:

I thought the above could perhaps have something to do with cam near far, but disabling that makes no difference.

That is not the only weird thing. The general map navigation seems to glitch, flash, and jump around when I navigate to try and zoom into the splat, even though the splat code has no camera controls. Almost asif there is some boundary detection of the splat and the 3d tile rendered cam is trying to avoid you looking at it....

Any ideas or thoughts of what else to try?

[gkjohnson]

I'm not familiar with how SparkJS works so you may be better off asking there - but just from the screenshot this looks like a draw order issue where the splat is rendered without writing to the depth buffer and the near overlapping tiles are rendered after, causing this artifact.

The tiles in 3d tiles renderer are not using any kind of fancy rendering or shaders - especially in this XYZ tiles case. These are just a set of distorted plane geometry that render with a mesh basic material and write to the depth buffer.