{"id":21318640,"url":"https://github.com/codaline-io/angular-stl-model-viewer","last_synced_at":"2025-04-06T02:07:32.023Z","repository":{"id":36958196,"uuid":"166240938","full_name":"codaline-io/angular-stl-model-viewer","owner":"codaline-io","description":"Angular component for rendering an STL model","archived":false,"fork":false,"pushed_at":"2025-03-28T22:13:28.000Z","size":11040,"stargazers_count":38,"open_issues_count":1,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T01:07:44.367Z","etag":null,"topics":["angular","stl","stl-files","stl-models","three","threejs"],"latest_commit_sha":null,"homepage":null,"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/codaline-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2019-01-17T14:39:53.000Z","updated_at":"2025-02-26T13:45:54.000Z","dependencies_parsed_at":"2023-11-07T15:29:52.814Z","dependency_job_id":"2248de14-8268-4c36-8416-65906c8d8053","html_url":"https://github.com/codaline-io/angular-stl-model-viewer","commit_stats":{"total_commits":461,"total_committers":8,"mean_commits":57.625,"dds":0.735357917570499,"last_synced_commit":"dec6b8b427b23cea71a751e7211888608bb3a9dd"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codaline-io%2Fangular-stl-model-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codaline-io%2Fangular-stl-model-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codaline-io%2Fangular-stl-model-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codaline-io%2Fangular-stl-model-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codaline-io","download_url":"https://codeload.github.com/codaline-io/angular-stl-model-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423513,"owners_count":20936626,"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":["angular","stl","stl-files","stl-models","three","threejs"],"created_at":"2024-11-21T19:18:43.742Z","updated_at":"2025-04-06T02:07:32.006Z","avatar_url":"https://github.com/codaline-io.png","language":"TypeScript","readme":"angular-stl-model-viewer\n==\n\nThis is an angular component to render stl-models with THREE.js.\n\nInstallation\n==\n- `yarn add angular-stl-model-viewer`\n- `npm install angular-stl-model-viewer`\n\nUsage\n==\n- import `StlModelViewerModule` to your app module\n- use stl-model-viewer component in your html `\u003cstl-model-viewer [stlModels]=\"['example.stl']\"\u003e\u003c/stl-model-viewer\u003e`\n- alternatively use `[stlModelFiles]=\"['stlFileContent']\"`\n\n\nExample\n=\n\nThe working basic example can be found in our [live demo][live-demo].\n\nConfiguration\n==\n## Input Properties\n| Attr         | Type                   | Default                                                                          | Details                                            |\n| ------------ | ---------------------- | -------------------------------------------------------------------------------- |--------------------------------------------------- |\n| stlModels     | string[]                 | empty array                                                                                | List of stl model paths\n| stlModelFiles     | string[]                 | empty array                                                                                | List of stl model files/content\n| hasControls  | boolean                | true                                                                             | If true, the user can interact with the stl-models  |\n| camera       | THREE.Camera           | THREE.PerspectiveCamera( 35, WindowInnerWidth / WindowInnerHeight, 1, 15 )       | The projection mode used for rendering the scene   |\n| cameraTarget | THREE.Vector3          | THREE.Vector3( 0, 0, 0 )                                                         | The orientation point for the camera               |\n| light        | THREE.Light            | THREE.PointLight( 0xffffff )                                                     | Illuminates the scene                              |\n| material     | THREE.MeshMaterialType | THREE.MeshPhongMaterial({ color: 0xc4c4c4, shininess: 100, specular: 0x111111 }) | Casts more precisely the possible materials assignable to a [                                                                                                                                [Mesh]] object |\n| scene        | THREE.Scene            | THREE.Scene()                                                                    | Scenes allow you to set up what and where is to be rendered by                                                                                                                               three.js. This is where you place objects, lights and cameras |\n| renderer     | THREE.WebGLRenderer    | THREE.WebGLRenderer({ antialias: true })                                         | Displays your beautifully crafted scenes using WebGL |\n| controls     | THREE.OrbitControls    | THREE.OrbitControls                                                              | Allow the camera to orbit around a target          |\n| meshOptions  | MeshOptions[]            | []                                                                               | customize mesh options per stl-model                                                  \n| centered     | boolean                 | true                                                                               | Flag if models should be centered\n\n\n## Output Events\n| Attr       | Details                                  |\n| ---------- | ---------------------------------------- |\n| rendered   |  Emitted when the stl-model is rendered. |\n\n\n## MeshOptionsType\n\n| Attr          | Type                 | Default                         | Details                                 |\n| ------------- | -------------------- | ------------------------------- | --------------------------------------- |\n| castShadow    | boolean              | true                            | Gets rendered into shadow map |\n| position      | THREE.Vector3        | THREE.Vector3( 0, 0, 0 )          | Object's local position |\n| receiveShadow | boolean              | true                            | Material gets baked in shadow receiving |\n| scale         | THREE.Vector3        | THREE.Vector3( 0.03, 0.03, 0.03 ) | Object's local scale |\n| up            | THREE.Vector3        | -                               | Up direction |\n| userData      | {[key: string]: any} | -                               | An object that can be used to store custom data about the Object3d. It should not hold references to functions as                                                                            these will not be cloned |\n| visible       | boolean              | -                               | Object gets rendered if true |\n\nContributing\n===\nIn lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using `npm run lint` and `npm run test`.\n\n\n[live-demo]: https://codaline-io.github.io/angular-stl-model-viewer\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodaline-io%2Fangular-stl-model-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodaline-io%2Fangular-stl-model-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodaline-io%2Fangular-stl-model-viewer/lists"}