-
Notifications
You must be signed in to change notification settings - Fork 64
/
index.tsx
46 lines (42 loc) · 1.61 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import * as ReactDOM from 'react-dom/client'
import { useState, useRef, Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { PerspectiveCamera, OrbitControls } from '@react-three/drei'
import { ErrorBoundary } from 'react-error-boundary';
import { Matrix4, Euler } from 'three'
import { Loader3DTilesR3FAsset } from './loader-3dtiles-r3f'
function App() {
const camera = useRef(null);
return (
<div id="canvas-container">
<Canvas style={{ background: '#272730'}}>
<PerspectiveCamera ref={camera}>
<ErrorBoundary fallbackRender={() => (
<mesh>
<sphereGeometry />
<meshBasicMaterial color="red" />
</mesh>
)}>
<Suspense fallback={
<mesh>
<sphereGeometry />
<meshBasicMaterial color="yellow" />
</mesh>
}>
<Loader3DTilesR3FAsset
dracoDecoderPath={"https://unpkg.com/[email protected]/examples/jsm/libs/draco"}
basisTranscoderPath={"https://unpkg.com/[email protected]/examples/jsm/libs/basis"}
rotation={new Euler(-Math.PI / 2, 0, 0)}
url="https://int.nyt.com/data/3dscenes/ONA360/TILESET/0731_FREEMAN_ALLEY_10M_A_36x8K__10K-PN_50P_DB/tileset_tileset.json"
maximumScreenSpaceError={48}
/>
</Suspense>
</ErrorBoundary>
</PerspectiveCamera>
<OrbitControls camera={camera.current} />
</Canvas>
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);