From e345979ba53599bef0fd82e360a6c47bfd579de2 Mon Sep 17 00:00:00 2001 From: mgermerie <73115044+mgermerie@users.noreply.github.com> Date: Fri, 6 Sep 2024 10:52:33 +0200 Subject: [PATCH] fix(tutorials): use OGC3DTilesLayer in 3d tiles tutorials --- docs/tutorials/3DTiles-mesh-b3dm.md | 36 ++++++++--------- docs/tutorials/3DTiles-point-cloud-pnts.md | 45 +++++++++++----------- 2 files changed, 37 insertions(+), 44 deletions(-) diff --git a/docs/tutorials/3DTiles-mesh-b3dm.md b/docs/tutorials/3DTiles-mesh-b3dm.md index 6cc38cf726..a6a4174e53 100644 --- a/docs/tutorials/3DTiles-mesh-b3dm.md +++ b/docs/tutorials/3DTiles-mesh-b3dm.md @@ -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', @@ -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', }); @@ -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) @@ -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', @@ -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); diff --git a/docs/tutorials/3DTiles-point-cloud-pnts.md b/docs/tutorials/3DTiles-point-cloud-pnts.md index e69dc08a20..bd9968caa0 100644 --- a/docs/tutorials/3DTiles-point-cloud-pnts.md +++ b/docs/tutorials/3DTiles-point-cloud-pnts.md @@ -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/" @@ -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: @@ -148,12 +147,12 @@ 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; } @@ -161,13 +160,13 @@ function updatePointCloudSize(event) { } ``` -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: @@ -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/" @@ -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);