Skip to content

Commit a5b621b

Browse files
pizza3gkjohnson
pizza3
and
gkjohnson
authored
Add flattening plugin example for r3f (#1412)
* Add flattening example for r3f * Update flattening example to use CesiumIonAuthPlugin instead of GoogleCloudAuthPlugin * Update demo * Update README with link --------- Co-authored-by: Garrett Johnson <garrett.kjohnson@gmail.com>
1 parent b6b10b0 commit a5b621b

3 files changed

Lines changed: 121 additions & 0 deletions

File tree

‎example/r3f/flattening.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>@react-three/fiber 3D Tiles Renderer</title>
7+
<style>
8+
html {
9+
overflow: hidden;
10+
font-family: Arial, Helvetica, sans-serif;
11+
user-select: none;
12+
}
13+
14+
#info {
15+
position: absolute;
16+
top: 0;
17+
left: 0;
18+
color: white;
19+
width: 100%;
20+
text-align: center;
21+
padding: 5px;
22+
pointer-events: none;
23+
line-height: 1.5em;
24+
z-index: 1;
25+
}
26+
27+
#info a {
28+
color: white;
29+
pointer-events: all;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<div id="info">Demonstration of flattening plugin using <a href="https://r3f.docs.pmnd.rs">@react-three/fiber</a></div>
35+
<div id="root"></div>
36+
<script type="module" src="./flattening.jsx"></script>
37+
</body>
38+
</html>

‎example/r3f/flattening.jsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import { Canvas } from '@react-three/fiber';
4+
import { Environment, GizmoHelper, GizmoViewport } from '@react-three/drei';
5+
import { TilesPlugin, TilesRenderer, EnvironmentControls, EastNorthUpFrame } from '3d-tiles-renderer/r3f';
6+
import { TilesFadePlugin, GLTFExtensionsPlugin, ReorientationPlugin, CesiumIonAuthPlugin, UpdateOnChangePlugin } from '3d-tiles-renderer/plugins';
7+
import { TileFlatteningPlugin, TileFlatteningShape } from './plugins/TileFlatteningPlugin.jsx';
8+
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
9+
import {
10+
MathUtils,
11+
} from 'three';
12+
13+
const dracoLoader = new DRACOLoader().setDecoderPath( 'https://www.gstatic.com/draco/v1/decoders/' );
14+
15+
const LAT = 35.3606 * MathUtils.DEG2RAD;
16+
const LON = 138.7274 * MathUtils.DEG2RAD;
17+
function App() {
18+
19+
return (
20+
<Canvas
21+
camera={ {
22+
position: [ 1e4 * 0.7, 1e4 * 0.7, 1e4 * 0.7 ],
23+
far: 1600000
24+
} }
25+
style={ {
26+
width: '100%',
27+
height: '100%',
28+
position: 'absolute',
29+
margin: 0,
30+
left: 0,
31+
top: 0,
32+
} }
33+
>
34+
{/* 3D Tiles renderer tileset */}
35+
<TilesRenderer group={ { rotation: [ - Math.PI / 2, 0, 0 ] } }>
36+
<TilesPlugin plugin={ CesiumIonAuthPlugin } args={ { apiToken: import.meta.env.VITE_ION_KEY, assetId: '2275207', autoRefreshToken: true } } />
37+
<TilesPlugin plugin={ GLTFExtensionsPlugin } dracoLoader={ dracoLoader } />
38+
<TilesPlugin plugin={ UpdateOnChangePlugin } />
39+
<TilesPlugin plugin={ TilesFadePlugin } />
40+
<TilesPlugin plugin={ ReorientationPlugin } args={ { lat: LAT, lon: LON } } />
41+
<TileFlatteningPlugin>
42+
<TileFlatteningShape relativeToEllipsoid visible={ false }>
43+
<EastNorthUpFrame lat={ LAT } lon={ LON } height={ 1000 }>
44+
<mesh scale={ 5000 }>
45+
<circleGeometry />
46+
</mesh>
47+
</EastNorthUpFrame>
48+
</TileFlatteningShape>
49+
</TileFlatteningPlugin>
50+
51+
</TilesRenderer>
52+
53+
{/* Controls */}
54+
<EnvironmentControls
55+
enableDamping={ true }
56+
maxDistance={ 1e4 * 2 }
57+
minDistance={ 500 }
58+
minPolarAngle={ 0 }
59+
maxPolarAngle={ 3 * Math.PI / 8 }
60+
/>
61+
62+
{/* other r3f staging */}
63+
<Environment
64+
preset="sunset" background={ true }
65+
backgroundBlurriness={ 0.9 }
66+
environmentIntensity={ 1 }
67+
/>
68+
<GizmoHelper alignment="bottom-right">
69+
<GizmoViewport />
70+
</GizmoHelper>
71+
</Canvas>
72+
);
73+
74+
}
75+
76+
createRoot( document.getElementById( 'root' ) ).render(
77+
<StrictMode>
78+
<App />
79+
</StrictMode>,
80+
);
81+

‎src/r3f/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ Set of components for loading and rendering 3D Tiles in [@react-three/fiber](htt
1010

1111
[Google Photorealistic Tiles example](https://nasa-ammos.github.io/3DTilesRendererJS/example/bundle/r3f/globe.html)
1212

13+
[Tile Flattening Plugin example](https://nasa-ammos.github.io/3DTilesRendererJS/example/bundle/r3f/flattening.html)
14+
1315
# Use
1416

1517
## Simple

0 commit comments

Comments
 (0)