This is an angular component to render stl-models with THREE.js.
yarn add angular-stl-model-viewernpm install angular-stl-model-viewer
- import
StlModelViewerModuleto your app module - use stl-model-viewer component in your html
<stl-model-viewer [stlModels]="['example.stl']"></stl-model-viewer> - alternatively use
[stlModelFiles]="['stlFileContent']"
The working basic example can be found in our live demo.
| 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 |
| Attr | Details |
|---|---|
| rendered | Emitted when the stl-model is rendered. |
| 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 |
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.