Skip to content

Commit f0c7d31

Browse files
gkjohnsonmrdoob
gkjohnson
authored and
mrdoob
committed
Added 3d tiles example.
1 parent a6d70f7 commit f0c7d31

File tree

5 files changed

+136
-0
lines changed

5 files changed

+136
-0
lines changed

‎examples/files.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
"webgl_lines_fat_wireframe",
7474
"webgl_loader_3dm",
7575
"webgl_loader_3ds",
76+
"webgl_loader_3dtiles",
7677
"webgl_loader_3mf",
7778
"webgl_loader_3mf_materials",
7879
"webgl_loader_amf",

‎examples/screenshots/webgl_loader_3dtiles.jpg‎

38.5 KB
Loading

‎examples/tags.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"webgl_lights_pointlights": [ "multiple" ],
4242
"webgl_lines_fat": [ "gpu", "stats", "panel" ],
4343
"webgl_lines_fat_raycasting": [ "gpu", "stats", "panel", "raycast" ],
44+
"webgl_loader_3dtiles": [ "external", "3dtiles", "3d-tiles", "maps", "tiles", "globe", "earth", "cesium" ],
4445
"webgl_loader_gltf_dispersion": [ "transmission" ],
4546
"webgl_loader_ifc": [ "external" ],
4647
"webgl_loader_ldraw": [ "lego" ],

‎examples/textures/google_on_non_white_hdpi.png‎

11.2 KB
Loading

‎examples/webgl_loader_3dtiles.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js loader - 3d tiles</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="main.css">
8+
<style>
9+
body {
10+
background-color: #111;
11+
color: #eee;
12+
}
13+
14+
a {
15+
color: #b3e5fc;
16+
text-decoration: underline;
17+
}
18+
19+
img {
20+
pointer-events: none;
21+
position: absolute;
22+
left: 10px;
23+
bottom: 10px;
24+
width: 70px;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<div id="info">
31+
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> 3d tiles - <a href="https://github.com/NASA-AMMOS/3DTilesRendererJS" target="_blank" rel="noopener">3d-tiles-renderer</a><br/>
32+
See <a href="https://github.com/NASA-AMMOS/3DTilesRendererJS" target="_blank" rel="noopener">main project repository</a> for more information and examples on loading 3d tiles
33+
<br/>
34+
and other tiled data formats. <a href="https://developers.google.com/maps/documentation/tile/3d-tiles">Google Photorealistic Tiles</a> token courtesy of <a href="https://ion.cesium.com/">Cesium Ion</a>.
35+
</div>
36+
37+
<img src="./textures/google_on_non_white_hdpi.png" />
38+
39+
<script type="importmap">
40+
{
41+
"imports": {
42+
"three": "../build/three.module.js",
43+
"three/examples/": "./",
44+
"3d-tiles-renderer": "https://cdn.jsdelivr.net/npm/[email protected]/src/index.js",
45+
"3d-tiles-renderer/plugins": "https://cdn.jsdelivr.net/npm/[email protected]/src/plugins/index.js"
46+
}
47+
}
48+
</script>
49+
50+
<script type="module">
51+
52+
import * as THREE from 'three';
53+
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
54+
import { TilesRenderer, GlobeControls } from '3d-tiles-renderer';
55+
import { CesiumIonAuthPlugin, GLTFExtensionsPlugin, TilesFadePlugin, UpdateOnChangePlugin } from '3d-tiles-renderer/plugins';
56+
57+
// Ion key provided by Cesium for use on threejs.org
58+
// A personal Cesium Ion key can be used for development.
59+
const ION_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMTFiZTRmZS1mMWIxLTQ5YzYtYjA4Zi0xYTE0MjFmYzQ5OGYiLCJpZCI6MjY3NzgzLCJpYXQiOjE3MzY0NzQxMDh9.ppGPgpse1lq7QeNyljX7THUyK5w1x_4HksSHSlhe5sY';
60+
61+
let camera, scene, renderer;
62+
let tiles, controls;
63+
64+
init();
65+
66+
function init() {
67+
68+
// camera
69+
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
70+
camera.position.set( - 1, 1, 1 ).normalize().multiplyScalar( 10 );
71+
camera.position.set( - 8000000, 10000000, - 14720000 );
72+
camera.lookAt( 0, 0, 0 );
73+
74+
// scene
75+
scene = new THREE.Scene();
76+
77+
// renderer
78+
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
79+
renderer.setPixelRatio( window.devicePixelRatio );
80+
renderer.setSize( window.innerWidth, window.innerHeight );
81+
renderer.setAnimationLoop( animate );
82+
document.body.appendChild( renderer.domElement );
83+
84+
// loader
85+
const dracoLoader = new DRACOLoader();
86+
dracoLoader.setDecoderPath( 'jsm/libs/draco/' );
87+
dracoLoader.setDecoderConfig( { type: 'js' } );
88+
89+
// tiles
90+
tiles = new TilesRenderer();
91+
tiles.registerPlugin( new CesiumIonAuthPlugin( { apiToken: ION_KEY, assetId: '2275207', autoRefreshToken: true } ) );
92+
tiles.registerPlugin( new GLTFExtensionsPlugin( { dracoLoader } ) );
93+
tiles.registerPlugin( new TilesFadePlugin() );
94+
tiles.registerPlugin( new UpdateOnChangePlugin() );
95+
tiles.setCamera( camera );
96+
tiles.setResolutionFromRenderer( camera, renderer );
97+
scene.add( tiles.group );
98+
99+
// rotate the globe so the north pole is up
100+
tiles.group.rotation.x = - Math.PI / 2;
101+
102+
// controls
103+
controls = new GlobeControls( scene, camera, renderer.domElement, tiles );
104+
controls.enableDamping = true;
105+
106+
window.addEventListener( 'resize', onWindowResize );
107+
onWindowResize();
108+
109+
}
110+
111+
function onWindowResize() {
112+
113+
camera.aspect = window.innerWidth / window.innerHeight;
114+
camera.updateProjectionMatrix();
115+
116+
renderer.setSize( window.innerWidth, window.innerHeight );
117+
118+
tiles.setResolutionFromRenderer( camera, renderer );
119+
120+
}
121+
122+
function animate() {
123+
124+
controls.update();
125+
tiles.update();
126+
127+
renderer.render( scene, camera );
128+
129+
}
130+
131+
</script>
132+
133+
</body>
134+
</html>

0 commit comments

Comments
 (0)