gle-scene-components v1.0.27

GLE Scene Components

A React component library for building 3D scenes.

Installation

npm install gle-scene-components

Supports

• React Three Fiber
• Resium
• Potree
• Gaussian Splatting
• Cesium 3D Tiles
• ThreeJS 3D Tiles
• WebXR

Documentation

• Storybook

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>
    )
}

Simple Example Demo

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>
        </>
    )
}

Complex Example Demo

Configuration

Configure Resium

Follow the Resium Install Guide

Configure Cross-origin Isolation

Gaussian Splatting Shared Memory requires Cross-origin Isolation to be configured in deployment.

This can be achieved by setting response headers on your server:

response.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
response.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');

... or deploying coi-serviceworker in your webpage:

<script src="coi-serviceworker.js"></script>

Development

Install

npm install

Build Library

npm run build

Run Tests

npm run test

Run Storybook

npm run storybook