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 <stl-model-viewer [stlModels]="['example.stl']"></stl-model-viewer>
• alternatively use [stlModelFiles]="['stlFileContent']"

Example

The working basic example can be found in our 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.