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