[] = []
244 | if (this.stlModels.length > 0) {
245 | meshCreations = this.stlModels.map((modelPath, index) =>
246 | this.createMesh(modelPath, this.meshOptions[index])
247 | )
248 | }
249 | else {
250 | meshCreations = this.stlModelFiles.map((modelFile, index) =>
251 | this.createMesh(modelFile, this.meshOptions[index], true)
252 | )
253 | }
254 | const meshes: THREE.Object3D[] = await Promise.all(meshCreations)
255 |
256 | meshes.map(mesh => this.meshGroup.add(mesh))
257 |
258 | this.scene.add(this.meshGroup)
259 | this.eleRef.nativeElement.appendChild(this.renderer.domElement)
260 | this.setSizes()
261 | this.render()
262 | this.ngZone.run(() => {
263 | this.isRendered = true
264 | this.rendered.emit()
265 | this.cdr.detectChanges()
266 | })
267 | }
268 | }
269 |
--------------------------------------------------------------------------------
/projects/angular-stl-model-viewer/src/lib/angular-stl-model-viewer.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core'
2 | import { StlModelViewerComponent } from './angular-stl-model-viewer.component'
3 |
4 | @NgModule({
5 | exports: [StlModelViewerComponent],
6 | imports: [
7 | StlModelViewerComponent
8 | ]
9 | })
10 | export class StlModelViewerModule { }
11 |
--------------------------------------------------------------------------------
/projects/angular-stl-model-viewer/src/public-api.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Public API Surface of angular-stl-model-viewer
3 | */
4 |
5 | export * from './lib/angular-stl-model-viewer.component'
6 | export * from './lib/angular-stl-model-viewer.module'
7 |
--------------------------------------------------------------------------------
/projects/angular-stl-model-viewer/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import { getTestBed } from '@angular/core/testing'
4 | import {
5 | BrowserTestingModule,
6 | platformBrowserTesting
7 | } from '@angular/platform-browser/testing'
8 | import 'zone.js'
9 | import 'zone.js/testing'
10 |
11 | getTestBed().initTestEnvironment(
12 | BrowserTestingModule,
13 | platformBrowserTesting()
14 | )
15 |
--------------------------------------------------------------------------------
/projects/angular-stl-model-viewer/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/lib",
5 | "declaration": true,
6 | "inlineSources": true,
7 | "types": [],
8 | "lib": [
9 | "dom",
10 | "es2018"
11 | ]
12 | },
13 | "angularCompilerOptions": {
14 | "skipTemplateCodegen": true,
15 | "strictMetadataEmit": true,
16 | "enableResourceInlining": true
17 | },
18 | "exclude": [
19 | "src/test.ts",
20 | "**/*.spec.ts"
21 | ]
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/projects/angular-stl-model-viewer/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.lib.json",
3 | "angularCompilerOptions": {
4 | "compilationMode": "partial"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/projects/angular-stl-model-viewer/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts"
12 | ],
13 | "include": [
14 | "**/*.spec.ts",
15 | "**/*.d.ts"
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/projects/examples/browserslist:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # You can see what browsers were selected by your queries by running:
6 | # npx browserslist
7 |
8 | > 0.5%
9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.
--------------------------------------------------------------------------------
/projects/examples/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 | process.env.CHROME_BIN = require('puppeteer').executablePath()
4 |
5 | module.exports = function (config) {
6 | config.set({
7 | basePath: '',
8 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
9 | plugins: [
10 | require('karma-jasmine'),
11 | require('karma-firefox-launcher'),
12 | require('karma-jasmine-html-reporter'),
13 | require('karma-coverage'),
14 | require('@angular-devkit/build-angular/plugins/karma')
15 | ],
16 | client: {
17 | clearContext: false // leave Jasmine Spec Runner output visible in browser
18 | },
19 | preprocessors: {
20 | 'src/**/*.ts': ['coverage']
21 | },
22 | coverageReporter: {
23 | dir: require('path').join(__dirname, '../../coverage/ngx-quill'),
24 | reporters: [
25 | { type: 'html', subdir: 'report-html' },
26 | { type: 'lcovonly', subdir: '.', file: 'report-lcovonly.txt' },
27 | { type: 'text-summary', subdir: '.', file: 'text-summary.txt' }
28 | ]
29 | },
30 | reporters: ['progress', 'kjhtml', 'coverage'],
31 | port: 9876,
32 | colors: true,
33 | logLevel: config.LOG_INFO,
34 | autoWatch: true,
35 | browsers: ['FirefoxHeadless'],
36 | customLaunchers: {
37 | FirefoxHeadless: {
38 | base: 'Firefox',
39 | flags: [
40 | '-headless'
41 | ],
42 | prefs: {
43 | 'network.proxy.type': 0
44 | }
45 | }
46 | },
47 | singleRun: false,
48 | restartOnFileChange: true
49 | })
50 | }
51 |
--------------------------------------------------------------------------------
/projects/examples/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | stl-model-viewer {
2 | width: 100%;
3 | height: 100%;
4 | display: block;
5 | }
6 |
--------------------------------------------------------------------------------
/projects/examples/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | {{title}}
2 |
3 |
4 |
5 |
6 |
Custom controls, light, scene, camera, renderer
7 |
8 |
9 |
--------------------------------------------------------------------------------
/projects/examples/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, waitForAsync } from '@angular/core/testing'
2 | import { AppComponent } from './app.component'
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(waitForAsync(() => {
6 | TestBed.configureTestingModule({
7 |
8 | imports: [AppComponent]
9 | }).compileComponents()
10 | }))
11 |
12 | it('should create the app', () => {
13 | const fixture = TestBed.createComponent(AppComponent)
14 | const app = fixture.componentInstance
15 | expect(app).toBeTruthy()
16 | })
17 |
18 | it('should have as title "Examples"', () => {
19 | const fixture = TestBed.createComponent(AppComponent)
20 | const app = fixture.componentInstance
21 | expect(app.title).toEqual('Examples')
22 | })
23 |
24 | it('should render stl-model-viewer', async () => {
25 | const fixture = TestBed.createComponent(AppComponent)
26 | fixture.detectChanges()
27 | const compiled = fixture.nativeElement
28 | expect(compiled.querySelectorAll('stl-model-viewer').length).toBe(3)
29 | })
30 | })
31 |
--------------------------------------------------------------------------------
/projects/examples/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core'
2 | import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
3 |
4 | import { BrowserModule } from '@angular/platform-browser'
5 | import { StlModelViewerModule } from 'angular-stl-model-viewer'
6 | import * as THREE from 'three'
7 |
8 | @Component({
9 | selector: 'app-root',
10 | imports: [
11 | BrowserModule,
12 | StlModelViewerModule
13 | ],
14 | styleUrls: ['./app.component.css'],
15 | templateUrl: './app.component.html'
16 | })
17 | export class AppComponent {
18 | title = 'Examples'
19 |
20 | renderer = new THREE.WebGLRenderer({ antialias: true })
21 | camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15)
22 | controls = new OrbitControls(this.camera, this.renderer.domElement)
23 | scene = new THREE.Scene()
24 | light = new THREE.PointLight(0xffffff, 80)
25 |
26 | constructor() {
27 | this.renderer.setPixelRatio(window.devicePixelRatio)
28 | this.renderer.shadowMap.enabled = true
29 |
30 | // default camera position
31 | this.camera.position.set(3, 3, 3)
32 |
33 | // default light position
34 | this.light.position.set(1, 1, 2)
35 |
36 | // default scene background
37 | this.scene.background = new THREE.Color(0xffffff)
38 |
39 | this.controls.enableZoom = true
40 | this.controls.minDistance = 1
41 | this.controls.maxDistance = 7
42 |
43 | this.controls.update()
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/projects/examples/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codaline-io/angular-stl-model-viewer/ab7d2c113aad599ec544f8f9e6bcf0436ede13b3/projects/examples/src/assets/.gitkeep
--------------------------------------------------------------------------------
/projects/examples/src/assets/peter.stl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codaline-io/angular-stl-model-viewer/ab7d2c113aad599ec544f8f9e6bcf0436ede13b3/projects/examples/src/assets/peter.stl
--------------------------------------------------------------------------------
/projects/examples/src/assets/strap.stl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codaline-io/angular-stl-model-viewer/ab7d2c113aad599ec544f8f9e6bcf0436ede13b3/projects/examples/src/assets/strap.stl
--------------------------------------------------------------------------------
/projects/examples/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | }
4 |
--------------------------------------------------------------------------------
/projects/examples/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | }
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/projects/examples/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codaline-io/angular-stl-model-viewer/ab7d2c113aad599ec544f8f9e6bcf0436ede13b3/projects/examples/src/favicon.ico
--------------------------------------------------------------------------------
/projects/examples/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Examples
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/projects/examples/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core'
2 |
3 | import { bootstrapApplication } from '@angular/platform-browser'
4 | import { AppComponent } from './app/app.component'
5 | import { environment } from './environments/environment'
6 |
7 | if (environment.production) {
8 | enableProdMode()
9 | }
10 |
11 | bootstrapApplication(AppComponent, {
12 | providers: []
13 | })
14 | .catch(err => console.error(err))
15 |
--------------------------------------------------------------------------------
/projects/examples/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | /***************************************************************************************************
56 | * Zone JS is required by default for Angular itself.
57 | */
58 | import 'zone.js' // Included with Angular CLI.
59 |
60 | /***************************************************************************************************
61 | * APPLICATION IMPORTS
62 | */
63 |
--------------------------------------------------------------------------------
/projects/examples/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/projects/examples/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js'
4 | import 'zone.js/testing'
5 |
6 | import { getTestBed } from '@angular/core/testing'
7 | import {
8 | BrowserTestingModule,
9 | platformBrowserTesting
10 | } from '@angular/platform-browser/testing'
11 |
12 | getTestBed().initTestEnvironment(
13 | BrowserTestingModule,
14 | platformBrowserTesting()
15 | )
16 |
--------------------------------------------------------------------------------
/projects/examples/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/app",
5 | "types": []
6 | },
7 | "files": [
8 | "src/main.ts",
9 | "src/polyfills.ts"
10 | ],
11 | "include": [
12 | "src/**/*.d.ts",
13 | "src/environments/environment.prod.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/projects/examples/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "downlevelIteration": true,
9 | "experimentalDecorators": true,
10 | "module": "esnext",
11 | "moduleResolution": "node",
12 | "importHelpers": true,
13 | "useDefineForClassFields": false,
14 | "target": "ES2022",
15 | "lib": [
16 | "es2018",
17 | "dom"
18 | ],
19 | "paths": {
20 | "angular-stl-model-viewer": [
21 | "dist/angular-stl-model-viewer/angular-stl-model-viewer",
22 | "dist/angular-stl-model-viewer"
23 | ]
24 | }
25 | },
26 | "angularCompilerOptions": {
27 | "fullTemplateTypeCheck": true,
28 | "strictInjectionParameters": true
29 | }
30 | }
31 |
--------------------------------------------------------------------------------