Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codaline-io/angular-stl-model-viewer
Angular component for rendering an STL model
https://github.com/codaline-io/angular-stl-model-viewer
angular stl stl-files stl-models three threejs
Last synced: 3 days ago
JSON representation
Angular component for rendering an STL model
- Host: GitHub
- URL: https://github.com/codaline-io/angular-stl-model-viewer
- Owner: codaline-io
- License: mit
- Created: 2019-01-17T14:39:53.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-11-20T16:15:20.000Z (2 months ago)
- Last Synced: 2025-01-20T22:08:38.966Z (11 days ago)
- Topics: angular, stl, stl-files, stl-models, three, threejs
- Language: TypeScript
- Size: 10.4 MB
- Stars: 37
- Watchers: 4
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
angular-stl-model-viewer
==
This is an angular component to render stl-models with THREE.js.
Installation
==
- `yarn add angular-stl-model-viewer`
- `npm install angular-stl-model-viewer`
Usage
==
- import `StlModelViewerModule` to your app module
- use stl-model-viewer component in your html ``
- alternatively use `[stlModelFiles]="['stlFileContent']"`
Example
=
The working basic example can be found in our [live demo][live-demo].
Configuration
==
## Input Properties
| Attr | Type | Default | Details |
| ------------ | ---------------------- | -------------------------------------------------------------------------------- |--------------------------------------------------- |
| stlModels | string[] | empty array | List of stl model paths
| stlModelFiles | string[] | empty array | List of stl model files/content
| hasControls | boolean | true | If true, the user can interact with the stl-models |
| camera | THREE.Camera | THREE.PerspectiveCamera( 35, WindowInnerWidth / WindowInnerHeight, 1, 15 ) | The projection mode used for rendering the scene |
| cameraTarget | THREE.Vector3 | THREE.Vector3( 0, 0, 0 ) | The orientation point for the camera |
| light | THREE.Light | THREE.PointLight( 0xffffff ) | Illuminates the scene |
| material | THREE.MeshMaterialType | THREE.MeshPhongMaterial({ color: 0xc4c4c4, shininess: 100, specular: 0x111111 }) | Casts more precisely the possible materials assignable to a [ [Mesh]] object |
| 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 |
| renderer | THREE.WebGLRenderer | THREE.WebGLRenderer({ antialias: true }) | Displays your beautifully crafted scenes using WebGL |
| controls | THREE.OrbitControls | THREE.OrbitControls | Allow the camera to orbit around a target |
| meshOptions | MeshOptions[] | [] | customize mesh options per stl-model
| centered | boolean | true | Flag if models should be centered
## Output Events
| Attr | Details |
| ---------- | ---------------------------------------- |
| rendered | Emitted when the stl-model is rendered. |
## MeshOptionsType
| Attr | Type | Default | Details |
| ------------- | -------------------- | ------------------------------- | --------------------------------------- |
| castShadow | boolean | true | Gets rendered into shadow map |
| position | THREE.Vector3 | THREE.Vector3( 0, 0, 0 ) | Object's local position |
| receiveShadow | boolean | true | Material gets baked in shadow receiving |
| scale | THREE.Vector3 | THREE.Vector3( 0.03, 0.03, 0.03 ) | Object's local scale |
| up | THREE.Vector3 | - | Up direction |
| 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 |
| visible | boolean | - | Object gets rendered if true |
Contributing
===
In 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`.
[live-demo]: https://codaline-io.github.io/angular-stl-model-viewer