Merge pull request #381 from makimenko/stl-loader

#375: STL Loader

projects/atft/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atft",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "description": "Ready-to-use Angular components for Three.js, see https://makimenko.github.io/angular-template-for-threejs/.",
   "keywords": [
     "threejs",

projects/atft/src/lib/object/loader/atft-loader.module.ts

@@ -3,21 +3,24 @@ import {CommonModule} from '@angular/common';
 import {ObjectLoaderComponent} from './object-loader.component';
 import {ObjLoaderComponent} from './obj-loader.component';
 import {SVGLoaderComponent} from './svg-loader.component';
+import {StlLoaderComponent} from './stl-loader.component';
 
 
 @NgModule({
   declarations: [
     ObjLoaderComponent,
     ObjectLoaderComponent,
-    SVGLoaderComponent
+    SVGLoaderComponent,
+    StlLoaderComponent,
   ],
   imports: [
     CommonModule
   ],
   exports: [
     ObjLoaderComponent,
     ObjectLoaderComponent,
-    SVGLoaderComponent
+    SVGLoaderComponent,
+    StlLoaderComponent,
   ]
 })
 export class AtftLoaderModule {

projects/atft/src/lib/object/loader/index.ts

@@ -2,5 +2,6 @@ export * from './atft-loader.module';
 export * from './obj-loader.component';
 export * from './object-loader.component';
 export * from './svg-loader.component';
+export * from './stl-loader.component';
 export * from './abstract-model-loader';
 export * from './services';

projects/atft/src/lib/object/loader/stl-loader.component.ts

@@ -0,0 +1,48 @@
+import {Component, Input, Optional, SkipSelf} from '@angular/core';
+
+import * as THREE from 'three';
+import {RendererService} from '../../renderer/renderer.service';
+import {appliedMaterial, provideParent} from '../../util';
+import {AbstractObject3D} from '../abstract-object-3d';
+import {AbstractModelLoader} from './abstract-model-loader';
+import {STLLoader} from 'three/examples/jsm/loaders/STLLoader';
+
+@Component({
+  selector: 'atft-stl-loader',
+  providers: [provideParent(StlLoaderComponent)],
+  template: '<ng-content></ng-content>'
+})
+export class StlLoaderComponent extends AbstractModelLoader {
+  private loader = new STLLoader();
+
+  @Input()
+  material: string;
+
+  @Input()
+  materialColor: string | number = '#FFFFFF';
+
+  @Input()
+  depthWrite = true;
+
+  constructor(
+    protected rendererService: RendererService,
+    @SkipSelf() @Optional() protected parent: AbstractObject3D<any>
+  ) {
+    super(rendererService, parent);
+  }
+
+  protected async loadLazyObject() {
+    // console.log('StlLoaderComponent.loadLazyObject');
+    return new Promise<THREE.Object3D>((resolve, reject) => {
+      this.loader.load(this.model, geometry => {
+          const material = appliedMaterial(this.materialColor, this.material, this.depthWrite);
+          const mesh = new THREE.Mesh(geometry, material);
+          resolve(mesh);
+        },
+        undefined,
+        reject
+      );
+    });
+  }
+
+}

src/stories/other/loader.stories.ts

@@ -87,6 +87,18 @@ class StorybookDifferentSVGLoaderComponent {
 
 }
 
+@Component({
+  template: axesSceneWrapper(`
+    <atft-stl-loader
+        model="https://raw.githubusercontent.com/makimenko/files/master/angular-template-for-threejs/model/Stl/Menger_sponge_sample.stl"
+        materialColor="#AAFFAA"
+    >
+    </atft-stl-loader>
+  `)
+})
+class StorybookStlLoaderComponent {
+}
+
 export default {
   title: 'Other/Loader',
   decorators: [
@@ -123,6 +135,11 @@ export const DifferentSvgLoader = (args) => ({
   props: args
 });
 
+export const StlLoader = (args) => ({
+  component: StorybookStlLoaderComponent,
+  props: args
+});
+
 SvgLoader.args = {
   model: './assets/svg/idea.svg',
   overrideMaterialColor: '0xff0000'