Skip to content

Commit

Permalink
fix(tutorials): use OGC3DTilesLayer in 3d tiles tutorials
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgermerie
mgermerie committed Sep 6, 2024
1 parent 696a5d7 commit e345979
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 44 deletions.
36 changes: 15 additions & 21 deletions docs/tutorials/3DTiles-mesh-b3dm.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ var view = new itowns.PlanarView(viewerDiv, extent, { placement: {
// Add a WMS imagery source
var wmsImagerySource = new itowns.WMSSource({
extent: extent,
name: 'Ortho2009_vue_ensemble_16cm_CC46',
url: 'https://download.data.grandlyon.com/wms/grandlyon',
name: 'ortho_latest',
url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
version: '1.3.0',
crs: 'EPSG:3946',
format: 'image/jpeg',
Expand Down Expand Up @@ -112,10 +112,10 @@ itowns.enableDracoLoader('./libs/draco/');
```

As for every data displayed in iTowns, we first need to define a data `Source`.
Our data is in the 3d-tiles format, so we can use iTowns `{@link C3DTilesSource}` :
Our data is in the 3d-tiles format, so we can use iTowns `{@link OGC3DTilesSource}` :

```js
const buildingsSource = new itowns.C3DTilesSource({
const buildingsSource = new itowns.OGC3DTilesSource({
url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/' +
'3DTiles/lyon_1_3946_textured_draco/tileset.json',
});
Expand All @@ -124,24 +124,18 @@ const buildingsSource = new itowns.C3DTilesSource({
It is worth noting that the 3d-tiles data we want to display on a given `{@link View}` must be in the same Coordinates
Reference System (CRS) as the `{@link View}`.
Here, our 3d-tiles data are in [RGF93 / CC46](https://epsg.io/3946) projection, just like our `{@link PlanarView}`.
This is the reason why we do not need to specify a `crs` parameter when instantiating our `{@link C3DTilesSource}`.
This is the reason why we do not need to specify a `crs` parameter when instantiating our `{@link OGC3DTilesSource}`.

Now that the source of our data is set, we need to create a `{@link Layer}` which will contain the data.
To display 3d-tiles data, iTowns comes with a `{@link C3DTilesLayer}`, which we can use as such :
To display 3d-tiles data, iTowns comes with a `{@link OGC3DTilesLayer}`, which we can use as such :

```js
const buildingsLayer = new itowns.C3DTilesLayer('buildings', {
const buildingsLayer = new itowns.OGC3DTilesLayer('buildings', {
source: buildingsSource,
}, view);
itowns.View.prototype.addLayer.call(view, buildingsLayer);
});
view.addLayer(buildingsLayer);
```

When instantiating a `{@link C3DTilesLayer}`, we need to specify which `{@link View}` it is added to.
We also need to call the generic `addLayer` method from `{@link View}`, and not the specific one from
`{@link PlanarView}`.
This is because both 3d-tiles data and `{@link PlanarView}` have their own spatial subdivision.
Therefore, 3d-tiles data must not use specific `{@link PlanarView}` spatial subdivision (which is by default the case when using the `addLayer` method of `PlanarView` or `GlobeView`).

The code above results in the following :

![3D Tiles b3dm mesh without lights](images/3DTiles-mesh-b3dm-1.png)
Expand Down Expand Up @@ -213,8 +207,8 @@ The final code to do so is the following :
// Add a WMS imagery source
var wmsImagerySource = new itowns.WMSSource({
extent: extent,
name: 'Ortho2009_vue_ensemble_16cm_CC46',
url: 'https://download.data.grandlyon.com/wms/grandlyon',
name: 'ortho_latest',
url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
version: '1.3.0',
crs: 'EPSG:3946',
format: 'image/jpeg',
Expand Down Expand Up @@ -256,15 +250,15 @@ The final code to do so is the following :
// extension of gltf. We need to enable it.
itowns.enableDracoLoader('./libs/draco/');
const buildingsSource = new itowns.C3DTilesSource({
const buildingsSource = new itowns.OGC3DTilesSource({
url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/' +
'master/3DTiles/lyon_1_3946_textured_draco/tileset.json',
});
const buildingsLayer = new itowns.C3DTilesLayer('buildings', {
const buildingsLayer = new itowns.OGC3DTilesLayer('buildings', {
source: buildingsSource,
}, view);
itowns.View.prototype.addLayer.call(view, buildingsLayer);
});
view.addLayer(buildingsLayer);
const directionalLight = new itowns.THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-0.9, 0.3, 1);
Expand Down
45 changes: 22 additions & 23 deletions docs/tutorials/3DTiles-point-cloud-pnts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ var orthoSource = new itowns.TMSSource({
crs: "EPSG:3857",
isInverted: true,
format: "image/png",
url: "http://osm.oslandia.io/styles/klokantech-basic/${z}/${x}/${y}.png",
url: "https://maps.pole-emploi.fr/styles/klokantech-basic/${z}/${x}/${y}.png",
attribution: {
name:"OpenStreetMap",
url: "http://www.openstreetmap.org/"
Expand Down Expand Up @@ -115,24 +115,23 @@ a basemap and a 3D terrain:

## Adding the 3D Tiles Layer

As usual, we first configure a source. Here, we will use a `{@link C3DTilesSource}` for which it is as simple as giving the url of the dataset to display.
As usual, we first configure a source. Here, we will use a `{@link OGC3DTilesSource}` for which it is as simple as giving the url of the dataset to display.

```js
const pointCloudSource = new itowns.C3DTilesSource({
const pointCloudSource = new itowns.OGC3DTilesSource({
url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/' +
'master/3DTiles/lidar-hd-gorges-saint-chely-tarn/tileset.json',
});
```

Then, we create the `{@link C3DTilesLayer}` by giving it and `id`, the `source` and the `view`.
And finally we add it to the `{@link GlobeView}` by using the generic method of `{@link View}` to not
use the `GlobeView` subdivision (see [the 3D Tiles textured buildings tutorial]{@tutorial 3DTiles-mesh-b3dm} for more information).
Then, we create the `{@link OGC3DTilesLayer}` by giving it and `id` and the `source`.
And finally we add it to the `{@link GlobeView}`.

```js
const pointCloudLayer = new itowns.C3DTilesLayer('gorges', {
const pointCloudLayer = new itowns.OGC3DTilesLayer('gorges', {
source: pointCloudSource,
}, view);
itowns.View.prototype.addLayer.call(view, pointCloudLayer);
});
view.addLayer(pointCloudLayer);
```

At this point, you should see the point cloud displayed:
Expand All @@ -148,26 +147,26 @@ In the next part, we will see how we can improve that.
## Updating 3D Tiles style

3D Tiles style can be changed on the fly when loading the 3D Tiles data in itowns. It can be done with
the `C3DTILES_LAYER_EVENTS.ON_TILE_CONTENT_LOADED` event of `{@link C3DTilesLayer}` that is called for each tile when the content of a tile has been loaded. The tile content is a Threejs `Object3D` or `Group`, so we can access its material and make any style changes that we want. In our case, we will modify the size of the points.
the `OGC3DTILES_LAYER_EVENTS.LOAD_MODEL` event of `{@link OGC3DTilesLayer}` that is called for each tile when the content of a tile has been loaded. The tile content is a Threejs `Object3D` or `Group`, so we can access its material and make any style changes that we want. In our case, we will modify the size of the points.
First, we create a function to update the size of the point:

```js
function updatePointCloudSize(event) {
event.tileContent.traverse(obj => {
event.scene.traverse(obj => {
if (obj.isPoints) {
obj.material.size = 3.0;
}
});
}
```

In this function, we traverse the `tileContent` hierarchy until we find the threejs `Points` object with `obj.isPoints`. Then, we change the size of the threejs `PointMaterial` material. You can refer
In this function, we traverse the `scene` hierarchy until we find the threejs `Points` object with `obj.isPoints`. Then, we change the size of the threejs `PointMaterial` material. You can refer
to threejs documentation for more information on `Object3D`, `Group`, `Points` and `PointsMaterial` objects.

Then, we just need to assign this callback as a listener to the `C3DTILES_LAYER_EVENTS.ON_TILE_CONTENT_LOADED` event:
Then, we just need to assign this callback as a listener to the `OGC3DTILES_LAYER_EVENTS.LOAD_MODEL` event:

```js
pointCloudLayer.addEventListener(itowns.C3DTILES_LAYER_EVENTS.ON_TILE_CONTENT_LOADED, updatePointCloudSize);
pointCloudLayer.addEventListener(itowns.OGC3DTILES_LAYER_EVENTS.LOAD_MODEL, updatePointCloudSize);
```

If you zoom in to the points, you can now see that they are bigger:
Expand Down Expand Up @@ -211,7 +210,7 @@ The full code to achieve this result is:
crs: "EPSG:3857",
isInverted: true,
format: "image/png",
url: "http://osm.oslandia.io/styles/klokantech-basic/${z}/${x}/${y}.png",
url: "https://maps.pole-emploi.fr/styles/klokantech-basic/${z}/${x}/${y}.png",
attribution: {
name:"OpenStreetMap",
url: "http://www.openstreetmap.org/"
Expand Down Expand Up @@ -265,25 +264,25 @@ The full code to achieve this result is:
view.addLayer(elevationLayer);
const pointCloudSource = new itowns.C3DTilesSource({
const pointCloudSource = new itowns.OGC3DTilesSource({
url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/' +
'master/3DTiles/lidar-hd-gorges-saint-chely-tarn/tileset.json',
});
const pointCloudLayer = new itowns.OGC3DTilesLayer('gorges', {
source: pointCloudSource,
});
view.addLayer(pointCloudLayer);
function updatePointCloudSize(event) {
event.tileContent.traverse(obj => {
event.scene.traverse(obj => {
if (obj.isPoints) {
obj.material.size = 3.0;
}
});
}
const pointCloudLayer = new itowns.C3DTilesLayer('gorges', {
source: pointCloudSource,
}, view);
pointCloudLayer.addEventListener(itowns.C3DTILES_LAYER_EVENTS.ON_TILE_CONTENT_LOADED, updatePointCloudSize);
itowns.View.prototype.addLayer.call(view, pointCloudLayer);
pointCloudLayer.addEventListener(itowns.OGC3DTILES_LAYER_EVENTS.LOAD_MODEL, updatePointCloudSize);
</script>
</body>
</html>
Expand Down

0 comments on commit e345979

Please sign in to comment.