1.0.33 • Published 10 months ago

gle-scene-components v1.0.33

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

GLE Scene Components

Version Downloads

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

Examples

example-simple-scene.png

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

example-complex-scene.png

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

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