{"id":18411055,"url":"https://github.com/guyettinger/gle-scene-components","last_synced_at":"2025-07-04T06:06:28.157Z","repository":{"id":197467509,"uuid":"698681781","full_name":"guyettinger/gle-scene-components","owner":"guyettinger","description":"GLE Scene Component Library","archived":false,"fork":false,"pushed_at":"2024-09-11T21:35:12.000Z","size":215146,"stargazers_count":5,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-20T14:52:51.117Z","etag":null,"topics":["3d","gaussian-splatting","mobx","react","react-three-fiber","resium","typescript"],"latest_commit_sha":null,"homepage":"https://gle-scene-components.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guyettinger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-30T16:32:28.000Z","updated_at":"2024-09-11T21:35:16.000Z","dependencies_parsed_at":"2023-10-15T20:34:48.746Z","dependency_job_id":"d51b6557-023c-47d5-b8f8-8a4936d6714a","html_url":"https://github.com/guyettinger/gle-scene-components","commit_stats":null,"previous_names":["guyettinger/gle-scene-components"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/guyettinger/gle-scene-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guyettinger%2Fgle-scene-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guyettinger%2Fgle-scene-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guyettinger%2Fgle-scene-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guyettinger%2Fgle-scene-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guyettinger","download_url":"https://codeload.github.com/guyettinger/gle-scene-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guyettinger%2Fgle-scene-components/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263457183,"owners_count":23469289,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","gaussian-splatting","mobx","react","react-three-fiber","resium","typescript"],"created_at":"2024-11-06T03:35:02.734Z","updated_at":"2025-07-04T06:06:28.127Z","avatar_url":"https://github.com/guyettinger.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"/\"\u003e\n    \u003cimg alt=\"logo\" src=\"public/images/logo-flipped.png\" align=\"right\" width=\"120\" height=\"120\"/\u003e\n\u003c/a\u003e\n\n# GLE Scene Components\n[![Version](https://img.shields.io/npm/v/gle-scene-components?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/gle-scene-components)\n[![Downloads](https://img.shields.io/npm/dt/gle-scene-components.svg?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/gle-scene-components)\n\nA React component library for building 3D scenes.\n\n## Installation\n```shell\nnpm install gle-scene-components\n```\n\n## Configuration\n### Configure Resium\nFollow the [Resium Install Guide ](https://resium.reearth.io/installation)\n\n## Supports\n- [React Three Fiber](https://github.com/pmndrs/react-three-fiber)\n- [Resium](https://github.com/reearth/resium)\n- [Potree](https://github.com/guyettinger/gle-potree)\n- [Gaussian Splatting](https://github.com/guyettinger/gle-gaussian-splat-3d)\n- [Cesium 3D Tiles](https://cesium.com/blog/2023/10/26/photorealistic-3d-tiles-in-cesium-ion/)\n- [ThreeJS 3D Tiles](https://github.com/ebeaufay/threedtiles)\n- [WebXR](https://github.com/pmndrs/react-xr)\n\n## Documentation\n- [Storybook](https://gle-scene-components.vercel.app/)\n\n## Demos\n- [Boxes](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--boxes)\n- [Animated Boxes](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--animated-boxes)\n- [Point Clouds](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--point-clouds)\n- [Gaussian Splatting](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--gaussian-splat-clouds)\n- [Coordinated Groups](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--coordinated-groups)\n- [Google Photorealistic 3D Tiles](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--google-tiles)\n- [Mesh 3D Tiles](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--three-d-tiles)\n- [VR](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--vr)\n- [AR](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--ar)\n\n## Examples\n\n![example-simple-scene.png](public%2Fimages%2Fexample-simple-scene.png)\n```tsx\nexport const ExampleSimpleScene = () =\u003e {\n    return (\n        \u003cScene name='Simple Scene'\n               sceneCenterLongitudeLatitudeHeight={[-83.765350, 34.401279, 357.0]}\n               cesiumIonAccessToken={cesiumIonAccessToken}\u003e\n            \u003cSceneContent\u003e\n                \u003cThreeSceneContent\u003e\n                    \u003cBox position={[4, 0, 0]}/\u003e\n                    \u003cBox position={[0, 0, -4]}/\u003e\n                    \u003cBox position={[-4, 0, 0]}/\u003e\n                \u003c/ThreeSceneContent\u003e\n            \u003c/SceneContent\u003e\n        \u003c/Scene\u003e\n    )\n}\n```\n[Simple Example Demo](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--boxes)\n\n\n![example-complex-scene.png](public%2Fimages%2Fexample-complex-scene.png)\n```tsx\nexport const ExampleComplexScene = () =\u003e {\n    \n    // coordinates\n    const upperArenaLongitudeLatitudeHeight = new Vector3(-83.765350, 34.401279, 357.0)\n    const barnParkingLotLongitudeLatitudeHeight = new Vector3(-83.76536188233062, 34.400715493095205, 353.0)\n    const lowerArenaLongitudeLatitudeHeight = new Vector3(-83.76612684589652, 34.40024525982904, 350.0)\n\n    // reference\n    const sceneRef = useRef\u003cSceneInterface\u003e(null)\n    \n    return (\n        \u003c\u003e\n            \u003cSceneButton\n                onClick={() =\u003e sceneRef.current?.moveCameraToLongitudeLatitudeHeight(upperArenaLongitudeLatitudeHeight)}\u003e\n                Upper Arena\n            \u003c/SceneButton\u003e\n            \u003cSceneButton\n                onClick={() =\u003e sceneRef.current?.moveCameraToLongitudeLatitudeHeight(barnParkingLotLongitudeLatitudeHeight)}\u003e\n                Parking\n            \u003c/SceneButton\u003e\n            \u003cSceneButton\n                onClick={() =\u003e sceneRef.current?.moveCameraToLongitudeLatitudeHeight(lowerArenaLongitudeLatitudeHeight)}\u003e\n                Lower Arena\n            \u003c/SceneButton\u003e\n            \u003cScene name='Complex Scene'\n                   ref={sceneRef}\n                   sceneCenterLongitudeLatitudeHeight={upperArenaLongitudeLatitudeHeight}\n                   cesiumIonAccessToken={cesiumIonAccessToken}\u003e\n                \u003cSceneContent\u003e\n                    \u003cThreeSceneContent\u003e\n                        \u003cCoordinatedGroup longitudeLatitudeHeight={upperArenaLongitudeLatitudeHeight}\u003e\n                            \u003cPointCloud\n                                baseUrl=\"https://raw.githubusercontent.com/potree/potree/develop/pointclouds/lion_takanawa/\"\n                                fileName=\"cloud.js\"\n                                onPointCloudLoad={rotatePointCloudOctreeYUp}\n                                position={[0, -.75, 0]}\n                            /\u003e\n                        \u003c/CoordinatedGroup\u003e\n                        \u003cCoordinatedGroup longitudeLatitudeHeight={barnParkingLotLongitudeLatitudeHeight}\u003e\n                            \u003cBox position={[0, 0, 0]}/\u003e\n                        \u003c/CoordinatedGroup\u003e\n                        \u003cCoordinatedGroup longitudeLatitudeHeight={lowerArenaLongitudeLatitudeHeight}\u003e\n                            \u003cgroup position={[0, 2.60, -15]}\n                                   rotation={[MathUtils.degToRad(30), 0, 0, 'XYZ']}\u003e\n                                \u003cGaussianSplatCloud baseUrl=\"./\"\n                                                    fileName=\"splats/ornament/ornament.splat\"\n                                                    rotation={[\n                                                        MathUtils.degToRad(-38),\n                                                        MathUtils.degToRad(-85),\n                                                        MathUtils.degToRad(180), 'ZYX']}\n                                /\u003e\n                            \u003c/group\u003e\n                            \u003cOGC3DTiles url={\"https://storage.googleapis.com/ogc-3d-tiles/museumMeshed/tileset.json\"}\n                                        position={[0, -2, 0]}\n                                        rotation={[\n                                            MathUtils.degToRad(0),\n                                            MathUtils.degToRad(90),\n                                            MathUtils.degToRad(180), 'XYZ'\n                                        ]}/\u003e\n                        \u003c/CoordinatedGroup\u003e\n                    \u003c/ThreeSceneContent\u003e\n                    \u003cCesiumSceneContent\u003e\n                        \u003cGoogleMapsPhotorealistic3DTiles/\u003e\n                    \u003c/CesiumSceneContent\u003e\n                \u003c/SceneContent\u003e\n            \u003c/Scene\u003e\n        \u003c/\u003e\n    )\n}\n```\n[Complex Example Demo](https://gle-scene-components.vercel.app/?path=/story/gle-scene-components-scene--everything)\n\n## Development\nInstall\n```\nnpm install\n```\nBuild Library\n```\nnpm run build\n```\nRun Tests\n```\nnpm run test\n```\nRun Storybook\n```\nnpm run storybook\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguyettinger%2Fgle-scene-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguyettinger%2Fgle-scene-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguyettinger%2Fgle-scene-components/lists"}