{"id":13632367,"url":"https://github.com/gabotechs/react-stl-viewer","last_synced_at":"2026-06-21T03:00:52.537Z","repository":{"id":37036114,"uuid":"410072528","full_name":"gabotechs/react-stl-viewer","owner":"gabotechs","description":"React component for visualizing 3d STL models in the browser using three.js","archived":false,"fork":false,"pushed_at":"2024-01-14T17:51:28.000Z","size":184491,"stargazers_count":99,"open_issues_count":14,"forks_count":20,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-06-01T00:07:42.450Z","etag":null,"topics":["3d","3dmodel","component","model","obj","react","render","renderer","stl","three","threejs","viewer"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/gabotechs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2021-09-24T18:59:44.000Z","updated_at":"2026-04-01T04:02:22.000Z","dependencies_parsed_at":"2023-02-14T00:01:43.205Z","dependency_job_id":"52843e43-582e-4618-89a4-12ed165c060e","html_url":"https://github.com/gabotechs/react-stl-viewer","commit_stats":null,"previous_names":["gabrielmusat/react-stl-viewer"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/gabotechs/react-stl-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabotechs%2Freact-stl-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabotechs%2Freact-stl-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabotechs%2Freact-stl-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabotechs%2Freact-stl-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gabotechs","download_url":"https://codeload.github.com/gabotechs/react-stl-viewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabotechs%2Freact-stl-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34592057,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-21T02:00:05.568Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","3dmodel","component","model","obj","react","render","renderer","stl","three","threejs","viewer"],"created_at":"2024-08-01T22:03:01.592Z","updated_at":"2026-06-21T03:00:52.492Z","avatar_url":"https://github.com/gabotechs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-stl-viewer\n\nReact component for visualizing STLs using Three.js.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/demo.gif\"\u003e\n\u003c/p\u003e\n\n## Install\n\n```shell\nnpm install --save react-stl-viewer\n```\n\nor\n\n```shell\nyarn add react-stl-viewer\n```\n\n## Usage\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {StlViewer} from \"react-stl-viewer\";\n\nconst url = \"https://storage.googleapis.com/ucloud-v3/ccab50f18fb14c91ccca300a.stl\"\n\nconst style = {\n    top: 0,\n    left: 0,\n    width: '100vw',\n    height: '100vh',\n}\n\nfunction App() {\n    return (\n        \u003cStlViewer\n            style={style}\n            orbitControls\n            shadows\n            url={url}\n        /\u003e\n    );\n}\n\nReactDOM.render(\u003cApp/\u003e, document.getElementById('root'));\n```\n\n## Demo\n\nYou can see working the examples from `.storybook/stories` [here](https://gabotechs.github.io/react-stl-viewer)\n\n## Props\n\n| Prop              |              Type              | Required |                            Notes                            |\n|-------------------|:------------------------------:|:--------:|:-----------------------------------------------------------:|\n| `url`             |            `string`            |  `true`  |                     url of the Stl file                     |\n| `cameraProps`     |         `CameraProps`          | `false`  |                camera properties, see below                 |\n| `modelProps`      |          `ModelProps`          | `false`  |               3d model properties, see below                |\n| `floorProps`      |          `FloorProps`          | `false`  |                 floor properties, see below                 |\n| `shadows`         |           `boolean`            | `false`  |     render shadows projected by the model on the ground     |\n| `showAxes`        |           `boolean`            | `false`  |                       show x y z axis                       |\n| `orbitControls`   |           `boolean`            | `false`  |                enable camera orbit controls                 |\n| `extraHeaders`    |    `Record\u003cstring, string\u003e`    | `false`  |          custom headers for making the http query           |\n| `onFinishLoading` | `(ev: ModelDimensions) =\u003e any` | `false`  |         callback triggered when Stl is fully loaded         |\n| `onError`         |     `(err: Error) =\u003e any`      | `false`  | callback triggered when an error occurred while loading Stl |\n| `canvasId`        |            `string`            | `false`  |    id of the canvas element used for rendering the model    |\n\nThe component also accepts ```\u003cdiv/\u003e``` props\n\n## Interfaces\n\n### CameraProps\n\n| Prop              |          Type          | Required |                                                  Notes                                                   |\n|-------------------|:----------------------:|:--------:|:--------------------------------------------------------------------------------------------------------:|\n| `ref`             | `{current: CameraRef}` | `false`  |                          reference of the camera for accessing it's properties                           |\n| `initialPosition` |    `CameraPosition`    | `false`  | set the position of the camera in geographic coordinates. The origin of coordinates is the object itself |\n\n### CameraRef\n\n| Prop                |                Type                 | Required |                                       Notes                                        |\n|---------------------|:-----------------------------------:|:--------:|:----------------------------------------------------------------------------------:|\n| `setCameraPosition` | `(position: CameraPosition) =\u003e any` |  `true`  | imperatively sets the camera position based on the provided geographic coordinates |\n\nsetCameraPosition:\n\n### ModelProps\n\n| Prop            |                      Type                      | Required |                          Notes                          |\n|-----------------|:----------------------------------------------:|:--------:|:-------------------------------------------------------:|\n| `ref`           |             `{current: ModelRef}`              | `false`  | reference of the 3d model for accessing it's properties |\n| `scale`         |                    `number`                    | `false`  |          scale of the 3d model, defaults to 1           |\n| `positionX`     |                    `number`                    | `false`  |        x coordinate in the world of the 3d model        |\n| `positionY`     |                    `number`                    | `false`  |        y coordinate in the world of the 3d model        |\n| `rotationX`     |                    `number`                    | `false`  |             rotation in x axis of the model             |\n| `rotationY`     |                    `number`                    | `false`  |             rotation in y axis of the model             |\n| `rotationY`     |                    `number`                    | `false`  |             rotation in z axis of the model             |\n| `color`         |            `CSSProperties['color']`            | `false`  |        color of the 3d model, defaults to \"grey\"        |\n| `geometryProps` | `(geometry: BufferGeometry) =\u003e BufferGeometry` | `false`  |     Perform some processing to the models geometry      | \n\n### FloorProps\n\n| Prop         |   Type   | Required |                              Notes                               |\n|--------------|:--------:|:--------:|:----------------------------------------------------------------:|\n| `gridWidth`  | `number` | `false`  | if specified, a grid will be drawn in the floor with this width  |\n| `gridLength` | `number` | `false`  | if specified, a grid will be drawn in the floor with this length |\n\n### ModelDimensions\n\n| Prop             |   Type   |                              Notes                               |\n|------------------|:--------:|:----------------------------------------------------------------:|\n| `boundingRadius` | `number` | the radius of the bounding sphere of the 3d model before scaling |\n| `width`          | `number` |                      width of the 3d object                      |\n| `height`         | `number` |                     height of the 3d object                      |\n| `length`         | `number` |                     length of the 3d object                      |\n\n### CameraPosition\n\n| Prop        |   Type   | Required |                                                                      Notes                                                                       |\n|-------------|:--------:|:--------:|:------------------------------------------------------------------------------------------------------------------------------------------------:|\n| `latitude`  | `number` | `false`  | camera's position latitude, it should be a number between `- Math.PI / 2` and `Math.PI / 2`, if the number exceeds the limits it will be clamped |\n| `longitude` | `number` | `false`  |    camera's position longitude, it should be a number between `- Math.PI` and `Math.PI`, if the number exceeds the limits it will be clamped     |\n| `distance`  | `number` | `false`  |      the distance factor between the object and the camera. This is a factor relative to the object size or the grid size if it's specified      |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabotechs%2Freact-stl-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabotechs%2Freact-stl-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabotechs%2Freact-stl-viewer/lists"}