| @@ -44,8 +44,11 @@ | |||
| viewer.scene.mainCamera.setDirty() | |||
| viewer.scene.mainCamera.controlsMode = 'environment' | |||
| viewer.scene.mainCamera.controls.minDistance = 0.3 | |||
| viewer.scene.mainCamera.controls.maxDistance = 30 | |||
| viewer.scene.mainCamera.controls.maxZoom = 30 | |||
| viewer.scene.mainCamera.controls.maxDistance = 50 | |||
| viewer.scene.mainCamera.controls.enableDamping = true | |||
| viewer.scene.mainCamera.controls.cameraRadius = 0.25 | |||
| viewer.scene.mainCamera.controls.fallbackPlane.normal.set( 0,0 , 1 ); | |||
| viewer.scene.mainCamera.controls.up.set( 0, 0, 1 ); | |||
| // https://github.com/CesiumGS/3d-tiles-samples | |||
| // from https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/example/data/root.b3dm | |||
| @@ -15,16 +15,11 @@ | |||
| } | |||
| :root { | |||
| //--primary-color: #58a6ff; | |||
| --primary-color: #6d7a8c; | |||
| //--primary-color: #ccdef5; | |||
| //--primary-color: #ec630a; | |||
| --secondary-color: #ec630a; | |||
| //--background-color: #1a1a1c; | |||
| --background-color: #E7EFF8; | |||
| --background-color-search: #dae1ea; | |||
| --background-color-search-hover: #c3d4e7; | |||
| //--text-color: #bbb; | |||
| --text-color: #1C2026; | |||
| --text-color-accent: #2b313a; | |||
| --text-color-hover: #2b313a; | |||
| @@ -39,25 +39,27 @@ | |||
| }) | |||
| viewer.addPluginsSync([EnvironmentControlsPlugin, SlippyMapTilesLoadPlugin, LoadingScreenPlugin, SSAAPlugin]) | |||
| // todo once loaded small tiles, its not loading back the bigger ones on zoom out | |||
| // also getting weird behaviour sometimes | |||
| async function init() { | |||
| viewer.scene.mainCamera.position.set(0,0, 20) | |||
| viewer.scene.mainCamera.controlsMode = 'environment' | |||
| viewer.scene.mainCamera.position.set(0,0, 200) | |||
| viewer.scene.mainCamera.lookAt(0,0, 0) | |||
| viewer.scene.mainCamera.minNearPlane = 0.1 | |||
| viewer.scene.mainCamera.setDirty() | |||
| viewer.scene.mainCamera.controlsMode = 'environment' | |||
| viewer.scene.mainCamera.controls.minDistance = 0.3 | |||
| viewer.scene.mainCamera.controls.maxDistance = 30 | |||
| viewer.scene.mainCamera.controls.enableDamping = true | |||
| viewer.scene.mainCamera.controls.minZoom = 0.1 | |||
| viewer.scene.mainCamera.controls.minDistance = 0.1 | |||
| viewer.scene.mainCamera.controls.maxDistance = 400 | |||
| viewer.scene.mainCamera.controls.cameraRadius = 1 | |||
| viewer.scene.mainCamera.controls.fallbackPlane.normal.set( 0,0 , 1 ); | |||
| viewer.scene.mainCamera.controls.up.set( 0, 0, 1 ); | |||
| // https://github.com/CesiumGS/3d-tiles-samples | |||
| // from https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/example/data/root.b3dm | |||
| const result = await viewer.load('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { | |||
| autoCenter: true, | |||
| autoScale: true, | |||
| autoScaleRadius: 30, | |||
| autoScaleRadius: 300, | |||
| fileExtension: SlippyMapTilesLoadPlugin.DUMMY_EXT, | |||
| tiles: { | |||
| errorTarget: 1, | |||
| @@ -67,6 +69,7 @@ | |||
| }, | |||
| } | |||
| }) | |||
| console.log(result) | |||
| // result.rotation.x = - Math.PI / 2; | |||
| } | |||
| _testStart() | |||
| @@ -35,6 +35,13 @@ npm install @threepipe/plugin-3d-tiles-renderer | |||
| This is still a WIP. | |||
| ::: | |||
| :::tip Editor | |||
| Any tileset can also be loaded into the tweakpane editor by adding the url and extension to the query params like - | |||
| https://threepipe.org/examples/tweakpane-editor/?m=https://raw.githubusercontent.com/NASA-AMMOS/3DTilesRendererJS/c7a9a7f7607e8759d16c26fb83815ad1cd1fd865/example/data/tileset.json&ext=tileset | |||
| The controls(environment, globe) can be picked from the UI above by going to Viewer -> Scene -> Camera -> Controls | |||
| ::: | |||
| ## Sample Usage | |||
| ### Load and render tileset | |||