1.0.33 • Published 10 months ago
gle-scene-components v1.0.33
GLE Scene Components
A React component library for building 3D scenes.
Installation
npm install gle-scene-components
Configuration
Configure Resium
Follow the Resium Install Guide
Supports
Documentation
Demos
- Boxes
- Animated Boxes
- Point Clouds
- Gaussian Splatting
- Coordinated Groups
- Google Photorealistic 3D Tiles
- Mesh 3D Tiles
- VR
- AR
Examples
export const ExampleSimpleScene = () => {
return (
<Scene name='Simple Scene'
sceneCenterLongitudeLatitudeHeight={[-83.765350, 34.401279, 357.0]}>
<SceneContent>
<ThreeSceneContent>
<Box position={[4, 0, 0]}/>
<Box position={[0, 0, -4]}/>
<Box position={[-4, 0, 0]}/>
</ThreeSceneContent>
</SceneContent>
</Scene>
)
}
export const ExampleComplexScene = () => {
// coordinates
const upperArenaLongitudeLatitudeHeight = new Vector3(-83.765350, 34.401279, 357.0)
const barnParkingLotLongitudeLatitudeHeight = new Vector3(-83.76536188233062, 34.400715493095205, 353.0)
const lowerArenaLongitudeLatitudeHeight = new Vector3(-83.76612684589652, 34.40024525982904, 350.0)
// reference
const sceneRef = useRef<SceneInterface>(null)
return (
<>
<SceneButton
onClick={() => sceneRef.current?.moveCameraToLongitudeLatitudeHeight(upperArenaLongitudeLatitudeHeight)}>
Upper Arena
</SceneButton>
<SceneButton
onClick={() => sceneRef.current?.moveCameraToLongitudeLatitudeHeight(barnParkingLotLongitudeLatitudeHeight)}>
Parking
</SceneButton>
<SceneButton
onClick={() => sceneRef.current?.moveCameraToLongitudeLatitudeHeight(lowerArenaLongitudeLatitudeHeight)}>
Lower Arena
</SceneButton>
<Scene name='Complex Scene'
ref={sceneRef}
sceneCenterLongitudeLatitudeHeight={upperArenaLongitudeLatitudeHeight}>
<SceneContent>
<ThreeSceneContent>
<CoordinatedGroup longitudeLatitudeHeight={upperArenaLongitudeLatitudeHeight}>
<PointCloud
baseUrl="https://raw.githubusercontent.com/potree/potree/develop/pointclouds/lion_takanawa/"
fileName="cloud.js"
onPointCloudLoad={rotatePointCloudOctreeYUp}
position={[0, -.75, 0]}
/>
</CoordinatedGroup>
<CoordinatedGroup longitudeLatitudeHeight={barnParkingLotLongitudeLatitudeHeight}>
<Box position={[0, 0, 0]}/>
</CoordinatedGroup>
<CoordinatedGroup longitudeLatitudeHeight={lowerArenaLongitudeLatitudeHeight}>
<group position={[0, 2.60, -15]}
rotation={[MathUtils.degToRad(30), 0, 0, 'XYZ']}>
<GaussianSplatCloud baseUrl="./"
fileName="splats/ornament/ornament.splat"
rotation={[
MathUtils.degToRad(-38),
MathUtils.degToRad(-85),
MathUtils.degToRad(180), 'ZYX']}
/>
</group>
<OGC3DTiles url={"https://storage.googleapis.com/ogc-3d-tiles/museumMeshed/tileset.json"}
position={[0, -2, 0]}
rotation={[
MathUtils.degToRad(0),
MathUtils.degToRad(90),
MathUtils.degToRad(180), 'XYZ'
]}/>
</CoordinatedGroup>
</ThreeSceneContent>
<CesiumSceneContent>
<GoogleMapsPhotorealistic3DTiles/>
</CesiumSceneContent>
</SceneContent>
</Scene>
</>
)
}
Development
Install
npm install
Build Library
npm run build
Run Tests
npm run test
Run Storybook
npm run storybook
1.0.29
10 months ago
1.0.33
10 months ago
1.0.32
10 months ago
1.0.31
10 months ago
1.0.30
10 months ago
1.0.28
11 months ago
1.0.27
2 years ago
1.0.26
2 years ago
1.0.25
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago