Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/guyettinger/gle-scene-components

GLE Scene Component Library
https://github.com/guyettinger/gle-scene-components

3d gaussian-splatting mobx react react-three-fiber resium typescript

Last synced: about 6 hours ago
JSON representation

GLE Scene Component Library

Host: GitHub
URL: https://github.com/guyettinger/gle-scene-components
Owner: guyettinger
License: mit
Created: 2023-09-30T16:32:28.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-09-11T21:35:12.000Z (about 2 months ago)
Last Synced: 2024-09-12T07:58:05.414Z (about 2 months ago)
Topics: 3d, gaussian-splatting, mobx, react, react-three-fiber, resium, typescript
Language: JavaScript
Homepage: https://gle-scene-components.vercel.app
Size: 205 MB
Stars: 5
Watchers: 1
Forks: 2
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        

    



# GLE Scene Components

[![Version](https://img.shields.io/npm/v/gle-scene-components?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/gle-scene-components)

[![Downloads](https://img.shields.io/npm/dt/gle-scene-components.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/gle-scene-components)

A React component library for building 3D scenes.

## Installation

```shell

npm install gle-scene-components

```

## Configuration

### Configure Resium

Follow the [Resium Install Guide ](https://resium.reearth.io/installation)

## Supports

- [React Three Fiber](https://github.com/pmndrs/react-three-fiber)

- [Resium](https://github.com/reearth/resium)

- [Potree](https://github.com/guyettinger/gle-potree)

- [Gaussian Splatting](https://github.com/guyettinger/gle-gaussian-splat-3d)

- [Cesium 3D Tiles](https://cesium.com/blog/2023/10/26/photorealistic-3d-tiles-in-cesium-ion/)

- [ThreeJS 3D Tiles](https://github.com/ebeaufay/threedtiles)

- [WebXR](https://github.com/pmndrs/react-xr)

## Documentation

- [Storybook](https://gle-scene-components.vercel.app/)

## Demos

- [Boxes](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--boxes)

- [Animated Boxes](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--animated-boxes)

- [Point Clouds](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--point-clouds)

- [Gaussian Splatting](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--gaussian-splat-clouds)

- [Coordinated Groups](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--coordinated-groups)

- [Google Photorealistic 3D Tiles](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--google-tiles)

- [Mesh 3D Tiles](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--three-d-tiles)

- [VR](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--vr)

- [AR](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--ar)

## Examples

![example-simple-scene.png](public%2Fimages%2Fexample-simple-scene.png)

```tsx

export const ExampleSimpleScene = () => {

    return (

        

            

                

                    

                    

                    

                

            

        

    )

}

```

[Simple Example Demo](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--boxes)

![example-complex-scene.png](public%2Fimages%2Fexample-complex-scene.png)

```tsx

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(null)

    

    return (

        <>

             sceneRef.current?.moveCameraToLongitudeLatitudeHeight(upperArenaLongitudeLatitudeHeight)}>

                Upper Arena

            

             sceneRef.current?.moveCameraToLongitudeLatitudeHeight(barnParkingLotLongitudeLatitudeHeight)}>

                Parking

            

             sceneRef.current?.moveCameraToLongitudeLatitudeHeight(lowerArenaLongitudeLatitudeHeight)}>

                Lower Arena

            

            

                

                    

                        

                            

                        

                        

                            

                        

                        

                            

                                

                            

                            

                        

                    

                    

                        

                    

                

            

        >

    )

}

```

[Complex Example Demo](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--everything)

## Development

Install

```

npm install

```

Build Library

```

npm run build

```

Run Tests

```

npm run test

```

Run Storybook

```

npm run storybook

```