├── .editorconfig ├── .eslintrc.json ├── .github └── workflows │ ├── ci-cd.yml │ ├── release.conf.json │ └── release.yml ├── .gitignore ├── .prettierrc ├── .vscode ├── launch.json └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── Todo.md ├── angular.json ├── docs ├── angular-dev-tools.png ├── dev-mode-dom.png ├── multi-scene.png ├── multi-view-postprocessing.png ├── multi-view.png ├── prod-mode-dom.png └── stats-panel.png ├── package-lock.json ├── package.json ├── projects ├── ngx-three-demo │ ├── .eslintrc.json │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── animation-example │ │ │ │ ├── animation-example.component.html │ │ │ │ ├── animation-example.component.spec.ts │ │ │ │ ├── animation-example.component.ts │ │ │ │ ├── robot.component.html │ │ │ │ └── robot.component.ts │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.html │ │ │ ├── app.component.scss │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── assets.ts │ │ │ ├── basic-example │ │ │ │ └── basic-example.component.ts │ │ │ ├── code │ │ │ │ ├── EditorService.ts │ │ │ │ ├── code.component.html │ │ │ │ ├── code.component.scss │ │ │ │ ├── code.component.spec.ts │ │ │ │ ├── code.component.ts │ │ │ │ ├── codesandbox.ts │ │ │ │ └── stackblitz.ts │ │ │ ├── controls-example │ │ │ │ ├── controls-example.component.html │ │ │ │ ├── controls-example.component.spec.ts │ │ │ │ └── controls-example.component.ts │ │ │ ├── css3d-renderer-example │ │ │ │ ├── css3d-renderer-example.component.html │ │ │ │ ├── css3d-renderer-example.component.scss │ │ │ │ └── css3d-renderer-example.component.ts │ │ │ ├── dynamic-loader-example │ │ │ │ ├── dynamic-loader-example.component.html │ │ │ │ ├── dynamic-loader-example.component.spec.ts │ │ │ │ └── dynamic-loader-example.component.ts │ │ │ ├── events-example │ │ │ │ ├── events-example.component.html │ │ │ │ ├── events-example.component.scss │ │ │ │ ├── events-example.component.spec.ts │ │ │ │ └── events-example.component.ts │ │ │ ├── example-page │ │ │ │ ├── example-page.component.html │ │ │ │ ├── example-page.component.scss │ │ │ │ ├── example-page.component.spec.ts │ │ │ │ └── example-page.component.ts │ │ │ ├── html-example │ │ │ │ ├── html-example.component.html │ │ │ │ ├── html-example.component.spec.ts │ │ │ │ └── html-example.component.ts │ │ │ ├── html-with-css3d-example │ │ │ │ ├── html-with-css3d-example.component.html │ │ │ │ ├── html-with-css3d-example.component.spec.ts │ │ │ │ └── html-with-css3d-example.component.ts │ │ │ ├── instanced-mesh-example │ │ │ │ ├── instanced-mesh-example.component.html │ │ │ │ ├── instanced-mesh-example.component.spec.ts │ │ │ │ └── instanced-mesh-example.component.ts │ │ │ ├── introductory-example │ │ │ │ └── introductory-example.component.ts │ │ │ ├── loader-example │ │ │ │ ├── loader-example.component.html │ │ │ │ ├── loader-example.component.spec.ts │ │ │ │ └── loader-example.component.ts │ │ │ ├── material │ │ │ │ └── material.module.ts │ │ │ ├── multi-renderer-example │ │ │ │ ├── multi-renderer-example.component.html │ │ │ │ ├── multi-renderer-example.component.spec.ts │ │ │ │ └── multi-renderer-example.component.ts │ │ │ ├── multi-scene-example │ │ │ │ ├── multi-scene-example.component.html │ │ │ │ ├── multi-scene-example.component.scss │ │ │ │ ├── multi-scene-example.component.spec.ts │ │ │ │ └── multi-scene-example.component.ts │ │ │ ├── multi-view-postprocessing-example │ │ │ │ ├── multi-view-postprocessing-example.component.html │ │ │ │ ├── multi-view-postprocessing-example.component.spec.ts │ │ │ │ └── multi-view-postprocessing-example.component.ts │ │ │ ├── navigation-shell │ │ │ │ ├── navigation-shell.component.html │ │ │ │ ├── navigation-shell.component.scss │ │ │ │ ├── navigation-shell.component.spec.ts │ │ │ │ └── navigation-shell.component.ts │ │ │ ├── on-demand-example │ │ │ │ ├── on-demand-example.component.html │ │ │ │ ├── on-demand-example.component.scss │ │ │ │ ├── on-demand-example.component.spec.ts │ │ │ │ └── on-demand-example.component.ts │ │ │ ├── outline-pass-events-example │ │ │ │ ├── outline-pass-events-example.component.html │ │ │ │ ├── outline-pass-events-example.component.scss │ │ │ │ └── outline-pass-events-example.component.ts │ │ │ ├── plyloader-example │ │ │ │ ├── plyloader-example.component.html │ │ │ │ ├── plyloader-example.component.spec.ts │ │ │ │ └── plyloader-example.component.ts │ │ │ ├── post-processing-example │ │ │ │ ├── post-processing-example.component.html │ │ │ │ ├── post-processing-example.component.scss │ │ │ │ ├── post-processing-example.component.spec.ts │ │ │ │ └── post-processing-example.component.ts │ │ │ ├── ref-by-id-example │ │ │ │ ├── ref-by-id-example.component.html │ │ │ │ ├── ref-by-id-example.component.spec.ts │ │ │ │ └── ref-by-id-example.component.ts │ │ │ ├── simple-example │ │ │ │ ├── simple-example.component.html │ │ │ │ ├── simple-example.component.spec.ts │ │ │ │ └── simple-example.component.ts │ │ │ └── views-example │ │ │ │ ├── views-example.component.html │ │ │ │ ├── views-example.component.scss │ │ │ │ ├── views-example.component.spec.ts │ │ │ │ └── views-example.component.ts │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ ├── BoomBox.glb │ │ │ ├── DamagedHelmet.glb │ │ │ ├── RobotExpressive.glb │ │ │ ├── dolphins.ply │ │ │ └── mac-draco.glb │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.scss │ │ └── test.ts │ ├── tsconfig.app.json │ └── tsconfig.spec.json └── ngx-three │ ├── .eslintrc.json │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── lib │ │ ├── ThCanvas.scss │ │ ├── ThCanvas.ts │ │ ├── ThControlBase.ts │ │ ├── ThEngine.service.ts │ │ ├── ThGeometryBase.ts │ │ ├── ThMaterialBase.ts │ │ ├── ThObjectBase.ts │ │ ├── ThPassBase.ts │ │ ├── ThTextureBase.ts │ │ ├── ThView.ts │ │ ├── ThWrapperBase.spec.ts │ │ ├── ThWrapperBase.ts │ │ ├── ThWrapperLifeCycle.ts │ │ ├── component.helpers.ts │ │ ├── directives │ │ │ └── ref-by-id.directive.ts │ │ ├── events │ │ │ ├── events.ts.bac │ │ │ ├── raycaster.events.directive.ts │ │ │ └── raycaster.service.ts │ │ ├── extra │ │ │ └── web │ │ │ │ ├── html.component.html │ │ │ │ └── html.component.ts │ │ ├── generated │ │ │ ├── ThAfterimagePass.ts │ │ │ ├── ThAmbientLight.ts │ │ │ ├── ThArcballControls.ts │ │ │ ├── ThArrayCamera.ts │ │ │ ├── ThArrowHelper.ts │ │ │ ├── ThAudio.ts │ │ │ ├── ThAudioListener.ts │ │ │ ├── ThAxesHelper.ts │ │ │ ├── ThBatchedMesh.ts │ │ │ ├── ThBloomPass.ts │ │ │ ├── ThBokehPass.ts │ │ │ ├── ThBone.ts │ │ │ ├── ThBox3Helper.ts │ │ │ ├── ThBoxGeometry.ts │ │ │ ├── ThBoxHelper.ts │ │ │ ├── ThBoxLineGeometry.ts │ │ │ ├── ThBufferGeometry.ts │ │ │ ├── ThCSS2DObjectGen.ts │ │ │ ├── ThCSS3DObjectGen.ts │ │ │ ├── ThCamera.ts │ │ │ ├── ThCameraHelper.ts │ │ │ ├── ThCanvasTexture.ts │ │ │ ├── ThCapsuleGeometry.ts │ │ │ ├── ThCircleGeometry.ts │ │ │ ├── ThClearMaskPass.ts │ │ │ ├── ThClearPass.ts │ │ │ ├── ThCompressedArrayTexture.ts │ │ │ ├── ThCompressedCubeTexture.ts │ │ │ ├── ThCompressedTexture.ts │ │ │ ├── ThConeGeometry.ts │ │ │ ├── ThConvexGeometry.ts │ │ │ ├── ThCubeCamera.ts │ │ │ ├── ThCubeTexture.ts │ │ │ ├── ThCubeTexturePass.ts │ │ │ ├── ThCylinderGeometry.ts │ │ │ ├── ThData3DTexture.ts │ │ │ ├── ThDataArrayTexture.ts │ │ │ ├── ThDataTexture.ts │ │ │ ├── ThDecalGeometry.ts │ │ │ ├── ThDepthTexture.ts │ │ │ ├── ThDirectionalLight.ts │ │ │ ├── ThDirectionalLightHelper.ts │ │ │ ├── ThDodecahedronGeometry.ts │ │ │ ├── ThDotScreenPass.ts │ │ │ ├── ThDragControls.ts │ │ │ ├── ThEdgesGeometry.ts │ │ │ ├── ThEffectComposerGen.ts │ │ │ ├── ThExtrudeGeometry.ts │ │ │ ├── ThFilmPass.ts │ │ │ ├── ThFirstPersonControls.ts │ │ │ ├── ThFlyControls.ts │ │ │ ├── ThFramebufferTexture.ts │ │ │ ├── ThGlitchPass.ts │ │ │ ├── ThGridHelper.ts │ │ │ ├── ThGroup.ts │ │ │ ├── ThHalftonePass.ts │ │ │ ├── ThHemisphereLight.ts │ │ │ ├── ThHemisphereLightHelper.ts │ │ │ ├── ThIcosahedronGeometry.ts │ │ │ ├── ThInstancedBufferGeometry.ts │ │ │ ├── ThInstancedMesh.ts │ │ │ ├── ThLOD.ts │ │ │ ├── ThLUTPass.ts │ │ │ ├── ThLatheGeometry.ts │ │ │ ├── ThLight.ts │ │ │ ├── ThLightProbe.ts │ │ │ ├── ThLine.ts │ │ │ ├── ThLineBasicMaterial.ts │ │ │ ├── ThLineDashedMaterial.ts │ │ │ ├── ThLineLoop.ts │ │ │ ├── ThLineSegments.ts │ │ │ ├── ThMapControls.ts │ │ │ ├── ThMaskPass.ts │ │ │ ├── ThMaterial.ts │ │ │ ├── ThMesh.ts │ │ │ ├── ThMeshBasicMaterial.ts │ │ │ ├── ThMeshDepthMaterial.ts │ │ │ ├── ThMeshDistanceMaterial.ts │ │ │ ├── ThMeshLambertMaterial.ts │ │ │ ├── ThMeshMatcapMaterial.ts │ │ │ ├── ThMeshNormalMaterial.ts │ │ │ ├── ThMeshPhongMaterial.ts │ │ │ ├── ThMeshPhysicalMaterial.ts │ │ │ ├── ThMeshStandardMaterial.ts │ │ │ ├── ThMeshToonMaterial.ts │ │ │ ├── ThObject3D.ts │ │ │ ├── ThOctahedronGeometry.ts │ │ │ ├── ThOrbitControls.ts │ │ │ ├── ThOrthographicCamera.ts │ │ │ ├── ThOutlinePass.ts │ │ │ ├── ThOutputPass.ts │ │ │ ├── ThParametricGeometry.ts │ │ │ ├── ThPass.ts │ │ │ ├── ThPerspectiveCamera.ts │ │ │ ├── ThPlaneGeometry.ts │ │ │ ├── ThPlaneHelper.ts │ │ │ ├── ThPointLight.ts │ │ │ ├── ThPointLightHelper.ts │ │ │ ├── ThPointerLockControls.ts │ │ │ ├── ThPoints.ts │ │ │ ├── ThPointsMaterial.ts │ │ │ ├── ThPolarGridHelper.ts │ │ │ ├── ThPolyhedronGeometry.ts │ │ │ ├── ThPositionalAudio.ts │ │ │ ├── ThRawShaderMaterial.ts │ │ │ ├── ThRectAreaLight.ts │ │ │ ├── ThRenderPassGen.ts │ │ │ ├── ThRingGeometry.ts │ │ │ ├── ThRoundedBoxGeometry.ts │ │ │ ├── ThSAOPass.ts │ │ │ ├── ThSMAAPass.ts │ │ │ ├── ThSSAARenderPass.ts │ │ │ ├── ThSSAOPass.ts │ │ │ ├── ThSSRPass.ts │ │ │ ├── ThSavePass.ts │ │ │ ├── ThScene.ts │ │ │ ├── ThShaderMaterial.ts │ │ │ ├── ThShaderPass.ts │ │ │ ├── ThShadowMaterial.ts │ │ │ ├── ThShapeGeometry.ts │ │ │ ├── ThSkeletonHelper.ts │ │ │ ├── ThSkinnedMesh.ts │ │ │ ├── ThSphereGeometry.ts │ │ │ ├── ThSpotLight.ts │ │ │ ├── ThSpotLightHelper.ts │ │ │ ├── ThSprite.ts │ │ │ ├── ThSpriteMaterial.ts │ │ │ ├── ThStereoCamera.ts │ │ │ ├── ThTAARenderPass.ts │ │ │ ├── ThTeapotGeometry.ts │ │ │ ├── ThTetrahedronGeometry.ts │ │ │ ├── ThTextGeometry.ts │ │ │ ├── ThTexture.ts │ │ │ ├── ThTexturePass.ts │ │ │ ├── ThTorusGeometry.ts │ │ │ ├── ThTorusKnotGeometry.ts │ │ │ ├── ThTrackballControls.ts │ │ │ ├── ThTransformControlsGen.ts │ │ │ ├── ThTransformControlsGizmo.ts │ │ │ ├── ThTransformControlsPlane.ts │ │ │ ├── ThTubeGeometry.ts │ │ │ ├── ThUnrealBloomPass.ts │ │ │ ├── ThVideoTexture.ts │ │ │ ├── ThWireframeGeometry.ts │ │ │ ├── index.ts │ │ │ ├── ngx-three-generated.module.ts │ │ │ └── overrides │ │ │ │ ├── ThCSS2DObject.ts │ │ │ │ ├── ThCSS3DObject.ts │ │ │ │ ├── ThEffectComposer.ts │ │ │ │ ├── ThRenderPass.ts │ │ │ │ └── ThTransformControls.ts │ │ ├── generator │ │ │ ├── ImportOrganizer.ts │ │ │ ├── NgxThreeBarrelGen.ts │ │ │ ├── NgxThreeClass.ts │ │ │ ├── NgxThreeControl.ts │ │ │ ├── NgxThreeGeometry.ts │ │ │ ├── NgxThreeMaterial.ts │ │ │ ├── NgxThreeModuleGen.ts │ │ │ ├── NgxThreeObject.ts │ │ │ ├── NgxThreeOverrideStub.ts │ │ │ ├── NgxThreePass.ts │ │ │ ├── NgxThreeTexture.ts │ │ │ ├── control_types.ts │ │ │ ├── generateComponents.ts │ │ │ ├── geometry_extra_types.ts │ │ │ ├── object_extra_types.ts │ │ │ ├── overrides.ts │ │ │ ├── pass_types.ts │ │ │ ├── three_types.ts │ │ │ └── utils.ts │ │ ├── loaders │ │ │ ├── LazyObject3dProxy.spec.ts │ │ │ ├── LazyObject3dProxy.ts │ │ │ ├── ThAsyncLoaderBase.ts │ │ │ ├── ThCallbackLoaderBase.ts │ │ │ ├── ThCubeTextureLoader.ts │ │ │ ├── ThFBXLoader.ts │ │ │ ├── ThGLTFLoader.ts │ │ │ ├── ThLoaderBase.ts │ │ │ ├── ThOBJLoader.ts │ │ │ ├── ThPLYLoader.ts │ │ │ ├── ThTextureLoader.ts │ │ │ ├── compressed-texture │ │ │ │ ├── ThDDSLoader.ts │ │ │ │ ├── ThDRACOLoader.ts │ │ │ │ ├── ThKTX2Loader.ts │ │ │ │ ├── ThKTXLoader.ts │ │ │ │ └── ThPVRLoader.ts │ │ │ └── data-texture │ │ │ │ ├── ThEXRLoader.ts │ │ │ │ ├── ThRGBELoader.ts │ │ │ │ ├── ThRGBMLoader.ts │ │ │ │ ├── ThTGALoader.ts │ │ │ │ └── ThUltraHDRLoader.ts │ │ ├── ngx-three.module.ts │ │ ├── pipes │ │ │ ├── bind.pipe.spec.ts │ │ │ ├── bind.pipe.ts │ │ │ ├── clone.pipe.spec.ts │ │ │ ├── clone.pipe.ts │ │ │ ├── color.pipe.spec.ts │ │ │ ├── color.pipe.ts │ │ │ ├── fog.pipe.spec.ts │ │ │ ├── fog.pipe.ts │ │ │ ├── plane.pipe.spec.ts │ │ │ ├── plane.pipe.ts │ │ │ ├── vector.pipe.spec.ts │ │ │ └── vector.pipe.ts │ │ ├── renderer │ │ │ ├── renderer-providers.ts │ │ │ ├── th-animation-loop.service.ts │ │ │ ├── th-render.directive.spec.ts │ │ │ └── th-render.directive.ts │ │ ├── stats │ │ │ ├── stats.directive.spec.ts │ │ │ └── stats.directive.ts │ │ ├── util.spec.ts │ │ └── util.ts │ ├── public-api.ts │ └── test.ts │ ├── tsconfig.generate.json │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": [ 4 | "projects/**/*" 5 | ], 6 | "overrides": [ 7 | { 8 | "files": [ 9 | "*.ts" 10 | ], 11 | "parserOptions": { 12 | "project": [ 13 | "tsconfig.json", 14 | "e2e/tsconfig.json" 15 | ], 16 | "createDefaultProgram": true 17 | }, 18 | "extends": [ 19 | "plugin:@angular-eslint/recommended", 20 | "plugin:@typescript-eslint/recommended", 21 | "plugin:@angular-eslint/template/process-inline-templates" 22 | ], 23 | "rules": { 24 | "prefer-arrow/prefer-arrow-functions": "off", 25 | "@typescript-eslint/member-ordering": "off", 26 | "@typescript-eslint/no-explicit-any": "off", 27 | "no-underscore-dangle": [ 28 | "error", 29 | { 30 | "allowAfterThis": true 31 | } 32 | ], 33 | "@typescript-eslint/no-unused-vars": [ 34 | "error", 35 | { 36 | "argsIgnorePattern": "^_" 37 | // "varsIgnorePattern": "^_", 38 | // "caughtErrorsIgnorePattern": "^_" 39 | } 40 | ], 41 | "@angular-eslint/prefer-on-push-component-change-detection": [ 42 | "error" 43 | ] 44 | } 45 | }, 46 | { 47 | "files": [ 48 | "*.html" 49 | ], 50 | "extends": [ 51 | "plugin:@angular-eslint/template/recommended" 52 | ], 53 | "rules": {} 54 | } 55 | ], 56 | "settings": { 57 | "import/ignore": [ 58 | "node_modules" 59 | ] 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /.github/workflows/ci-cd.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: [main] 9 | tags-ignore: 10 | - '**' 11 | pull_request: 12 | branches: [main] 13 | 14 | jobs: 15 | build: 16 | runs-on: ubuntu-latest 17 | 18 | strategy: 19 | matrix: 20 | node-version: [20.x] 21 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 22 | 23 | steps: 24 | - uses: actions/checkout@v4 25 | - name: Use Node.js ${{ matrix.node-version }} 26 | uses: actions/setup-node@v4 27 | with: 28 | node-version: ${{ matrix.node-version }} 29 | 30 | - name: npm ci and npm run build 31 | run: | 32 | npm ci 33 | npm run build:prod 34 | - run: npm run lint 35 | - run: npm run test-headless 36 | 37 | - name: build demo 38 | run: npm run build:demo 39 | -------------------------------------------------------------------------------- /.github/workflows/release.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "categories": [ 3 | { 4 | "title": "## 🚀 Features", 5 | "labels": ["feat", "feature"] 6 | }, 7 | { 8 | "title": "## 🐛 Fixes", 9 | "labels": ["fix"] 10 | }, 11 | { 12 | "title": "## 🧪 Tests", 13 | "labels": ["test"] 14 | }, 15 | { 16 | "title": "## 📘 Documentation", 17 | "labels": ["docs", "doc"] 18 | }, 19 | { 20 | "title": "## 🏭 Build", 21 | "labels": ["build"] 22 | }, 23 | { 24 | "title": "## 🧹 Chore", 25 | "labels": ["chore"] 26 | }, 27 | { 28 | "title": "## 📦 Uncategorized", 29 | "labels": [] 30 | } 31 | 32 | ], 33 | "label_extractor": [ 34 | { 35 | "pattern": "^([^:])+", 36 | "method": "match", 37 | "on_property": "title" 38 | } 39 | ] 40 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | node_modules/ 12 | 13 | 14 | # profiling files 15 | chrome-profiler-events*.json 16 | speed-measure-plugin*.json 17 | 18 | # IDEs and editors 19 | /.idea 20 | .project 21 | .classpath 22 | .c9/ 23 | *.launch 24 | .settings/ 25 | *.sublime-workspace 26 | 27 | # IDE - VSCode 28 | .vscode/* 29 | !.vscode/settings.json 30 | !.vscode/tasks.json 31 | !.vscode/launch.json 32 | !.vscode/extensions.json 33 | .history/* 34 | 35 | # misc 36 | /.angular/cache 37 | /.sass-cache 38 | /connect.lock 39 | /coverage 40 | /libpeerconnection.log 41 | npm-debug.log 42 | yarn-error.log 43 | testem.log 44 | /typings 45 | 46 | # System Files 47 | .DS_Store 48 | Thumbs.db 49 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 120 4 | } -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Debug Examples", 6 | "request": "launch", 7 | "type": "pwa-chrome", 8 | "url": "http://localhost:4200", 9 | "webRoot": "${workspaceFolder}" 10 | }, 11 | { 12 | "name": "Debug Generator", 13 | "type": "node", 14 | "request": "launch", 15 | "runtimeExecutable": "node", 16 | "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"], 17 | 18 | "args": ["src/lib/generator/generateComponents.ts"], 19 | "env": { "TS_NODE_PROJECT": "tsconfig.generate.json" }, 20 | 21 | "cwd": "${workspaceRoot}/projects/ngx-three", 22 | "internalConsoleOptions": "openOnSessionStart", 23 | "skipFiles": ["/**", "node_modules/**"] 24 | } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", 3 | "editor.formatOnSave": true, 4 | "[typescript]": { 5 | "editor.defaultFormatter": "esbenp.prettier-vscode" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [0.28] 4 | 5 | ### Features 6 | - allow useage of multiple renderers 7 | - renderers can be provided and injected 8 | - CSS3D renderer example 9 | - WebGL + CSS3D renderer example 10 | - Html renderering (with occlusion) with CSS3D renderer example 11 | 12 | ### Breaking Changes 13 | - if you have used `[rendererParameters]="..."` on the ThCanvas you have to change this to a structural diretive `*rendererParameters="..."` 14 | - ThEngine service has changed, and does not expose a renderer member but "renderers" -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 demike 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Todo.md: -------------------------------------------------------------------------------- 1 | before render? 2 | 3 | - canvas sucht sich camera für default view als viewchild (verschachtelung in tieferen ebenen nicht möglich) 4 | - root-scene wird nicht / falsch als contentchild injected 5 | - ~~EngineService ist nicht exportiert.~~ 6 | - obj! --> objRef? 7 | - ~~EngineService resize (nicht auf window, sonder mit z.b.: resize observer auf canvas element)~~ 8 | 9 | - Model Laden 10 | - loader muss dynamisch werden 11 | - alle changes auf geladenes modell übertragen 12 | 13 | ``` 14 | im 15 | 16 | set objRef() { 17 | 18 | // applyPropertiesToObjRef 19 | // attachToParent 20 | // setzen 21 | 22 | // emit objRef$ 23 | } 24 | ``` 25 | 26 | async_model1.objRef$<--ref.proxy<--async_model2 27 | 28 | 1. no model loaded 29 | 2. async_model 1 changes (loaded), async_model2 not yet loaded 30 | 3. objRef$ triggers, --> nothing happens 31 | 4. async_model2 loaded --> adds itself to ref.proxy, and in turn to the referenced node 32 | 33 | 5. async_model1.objRef is set 34 | - old obj1 has to be disposed 35 | - new obj is set to async_model1.proxy and so all parameters are applied to the new model (position ... ) 36 | - objRef$ triggers 37 | - ref searches node, and applies it to its proxy and in turn the child nodes are applied to it 38 | -------------------------------------------------------------------------------- /docs/angular-dev-tools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/docs/angular-dev-tools.png -------------------------------------------------------------------------------- /docs/dev-mode-dom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/docs/dev-mode-dom.png -------------------------------------------------------------------------------- /docs/multi-scene.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/docs/multi-scene.png -------------------------------------------------------------------------------- /docs/multi-view-postprocessing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/docs/multi-view-postprocessing.png -------------------------------------------------------------------------------- /docs/multi-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/docs/multi-view.png -------------------------------------------------------------------------------- /docs/prod-mode-dom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/docs/prod-mode-dom.png -------------------------------------------------------------------------------- /docs/stats-panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/docs/stats-panel.png -------------------------------------------------------------------------------- /projects/ngx-three-demo/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../.eslintrc.json", 3 | "ignorePatterns": [ 4 | "!**/*", 5 | "**/environment.prod.ts" 6 | ], 7 | "overrides": [ 8 | { 9 | "files": [ 10 | "*.ts" 11 | ], 12 | "parserOptions": { 13 | "project": [ 14 | "projects/ngx-three-demo/tsconfig.app.json", 15 | "projects/ngx-three-demo/tsconfig.spec.json", 16 | "projects/ngx-three-demo/e2e/tsconfig.json" 17 | ], 18 | "createDefaultProgram": true 19 | }, 20 | "rules": { 21 | "@angular-eslint/component-selector": [ 22 | "error", 23 | { 24 | "type": "element", 25 | "prefix": "app", 26 | "style": "kebab-case" 27 | } 28 | ], 29 | "@angular-eslint/directive-selector": [ 30 | "error", 31 | { 32 | "type": "attribute", 33 | "prefix": "app", 34 | "style": "camelCase" 35 | } 36 | ] 37 | } 38 | }, 39 | { 40 | "files": [ 41 | "*.html" 42 | ], 43 | "rules": {} 44 | } 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | SELENIUM_PROMISE_MANAGER: false, 20 | baseUrl: 'http://localhost:4200/', 21 | framework: 'jasmine', 22 | jasmineNodeOpts: { 23 | showColors: true, 24 | defaultTimeoutInterval: 30000, 25 | print: function() {} 26 | }, 27 | onPrepare() { 28 | require('ts-node').register({ 29 | project: require('path').join(__dirname, './tsconfig.json') 30 | }); 31 | jasmine.getEnv().addReporter(new SpecReporter({ 32 | spec: { 33 | displayStacktrace: StacktraceOption.PRETTY 34 | } 35 | })); 36 | } 37 | }; -------------------------------------------------------------------------------- /projects/ngx-three-demo/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | /* TODO: use playwright 2 | import { AppPage } from './app.po'; 3 | import { browser, logging } from 'protractor'; 4 | 5 | describe('workspace-project App', () => { 6 | let page: AppPage; 7 | 8 | beforeEach(() => { 9 | page = new AppPage(); 10 | }); 11 | 12 | it('should display welcome message', async () => { 13 | await page.navigateTo(); 14 | expect(await page.getTitleText()).toEqual('ngx-three-demo app is running!'); 15 | }); 16 | 17 | afterEach(async () => { 18 | // Assert that there are no errors emitted from the browser 19 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 20 | expect(logs).not.toContain( 21 | jasmine.objectContaining({ 22 | level: logging.Level.SEVERE 23 | } as logging.Entry) 24 | ); 25 | }); 26 | }); 27 | */ 28 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | /* TODO: use playwright 2 | import { browser, by, element } from 'protractor'; 3 | 4 | export class AppPage { 5 | async navigateTo(): Promise { 6 | return browser.get(browser.baseUrl); 7 | } 8 | 9 | async getTitleText(): Promise { 10 | return element(by.css('app-root .content span')).getText(); 11 | } 12 | } 13 | */ 14 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../../out-tsc/e2e", 6 | "module": "commonjs", 7 | "target": "es2018", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/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 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, '../../coverage/ngx-three-demo'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/animation-example/animation-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/animation-example/animation-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FogPipe } from 'ngx-three'; 3 | 4 | import { AnimationExampleComponent } from './animation-example.component'; 5 | 6 | describe('AnimationExampleComponent', () => { 7 | let component: AnimationExampleComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | declarations: [AnimationExampleComponent, FogPipe] 13 | }).compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AnimationExampleComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/animation-example/animation-example.component.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'; 2 | import { ThGridHelper } from 'ngx-three'; 3 | import { Material } from 'three'; 4 | 5 | @Component({ 6 | selector: 'app-animation-example', 7 | templateUrl: './animation-example.component.html', 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | export class AnimationExampleComponent implements AfterViewInit { 12 | // eslint-disable-next-line @typescript-eslint/naming-convention 13 | public readonly Math = Math; 14 | 15 | @ViewChild('gridHelper', { static: true }) 16 | public gridHelper?: ThGridHelper; 17 | 18 | constructor() {} 19 | 20 | ngAfterViewInit(): void { 21 | const material = this.gridHelper?.objRef?.material as Material | undefined; 22 | if (material) { 23 | material.opacity = 0.2; 24 | material.transparent = true; 25 | } 26 | } 27 | 28 | public onBeforeRender() { 29 | // TODO: implement me 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/animation-example/robot.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/projects/ngx-three-demo/src/app/app.component.scss -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async () => { 7 | await TestBed.configureTestingModule({ 8 | imports: [RouterTestingModule], 9 | declarations: [AppComponent] 10 | }).compileComponents(); 11 | }); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it("should have as title 'ngx-three-demo'", () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.title).toEqual('ngx-three-demo'); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class AppComponent { 11 | title = 'ngx-three-demo'; 12 | } 13 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/assets.ts: -------------------------------------------------------------------------------- 1 | export const GITHUB_ASSET_PATH = 2 | 'https://raw.githubusercontent.com/demike/ngx-three/main/projects/ngx-three-demo/src/assets/'; 3 | export const ASSET_PATH = 'assets/'; 4 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/basic-example/basic-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-basic-example', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | template: ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | `, 18 | standalone: false 19 | }) 20 | export class BasicExampleComponent {} 21 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/code/EditorService.ts: -------------------------------------------------------------------------------- 1 | import { toCodeSandbox } from './codesandbox'; 2 | import { toStackblitz } from './stackblitz'; 3 | 4 | export class EditorService { 5 | public urls: string[] = []; 6 | public fileNames: string[] = []; 7 | public declarations?: string[]; 8 | 9 | public setUrls(urls: string[]) { 10 | this.urls = urls; 11 | this.fileNames = this.extractFileNames(); 12 | } 13 | 14 | private extractFileNames() { 15 | return this.urls.map((path) => path.split('/').pop() ?? ''); 16 | } 17 | 18 | public toStackblitz(event?: MouseEvent) { 19 | event?.preventDefault(); 20 | toStackblitz(this.urls, this.declarations); 21 | } 22 | 23 | public toCodeSandbox(event?: MouseEvent) { 24 | event?.preventDefault(); 25 | toCodeSandbox(this.urls, this.declarations); 26 | } 27 | 28 | public getLanguage(fileName: string) { 29 | const fileEnding = fileName.substring(fileName.lastIndexOf('.') + 1); 30 | switch (fileEnding) { 31 | case 'ts': 32 | return 'typescript'; 33 | case 'js': 34 | return 'javascript'; 35 | case 'html': 36 | return 'html'; 37 | case 'css': 38 | return 'css'; 39 | default: 40 | return 'typescript'; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/code/code.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | @for (codeUrl of codeUrls; track codeUrl; let i = $index) { 6 | 7 | 
 8 |               
 9 |
10 | 11 | } 12 | 13 |
14 | 15 | 16 | 20 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/code/code.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CodeComponent } from './code.component'; 4 | import { EditorService } from './EditorService'; 5 | 6 | describe('CodeComponent', () => { 7 | let component: CodeComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | declarations: [CodeComponent], 13 | providers: [EditorService] 14 | }).compileComponents(); 15 | }); 16 | 17 | beforeEach(() => { 18 | fixture = TestBed.createComponent(CodeComponent); 19 | component = fixture.componentInstance; 20 | fixture.detectChanges(); 21 | }); 22 | 23 | it('should create', () => { 24 | expect(component).toBeTruthy(); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/code/code.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; 2 | import { EditorService } from './EditorService'; 3 | 4 | @Component({ 5 | selector: 'app-code', 6 | templateUrl: './code.component.html', 7 | styleUrls: ['./code.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | export class CodeComponent { 12 | public fileNames: string[] = []; 13 | 14 | constructor(public readonly editorService: EditorService) {} 15 | 16 | @Input() 17 | public set codeUrls(urls: string[]) { 18 | this.editorService.setUrls(urls); 19 | this.fileNames = this.editorService.fileNames; 20 | } 21 | 22 | public get codeUrls() { 23 | return this.editorService.urls; 24 | } 25 | 26 | public getLanguage(fileName: string) { 27 | return this.editorService.getLanguage(fileName); 28 | } 29 | 30 | @Input() lineNumbers = false; 31 | } 32 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/controls-example/controls-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/controls-example/controls-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ControlsExampleComponent } from './controls-example.component'; 4 | 5 | describe('ControlsExampleComponent', () => { 6 | let component: ControlsExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ControlsExampleComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(ControlsExampleComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/controls-example/controls-example.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from '@angular/core'; 2 | import { ASSET_PATH } from '../assets'; 3 | 4 | @Component({ 5 | selector: 'app-controls-example', 6 | templateUrl: './controls-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class ControlsExampleComponent { 11 | public selected = false; 12 | public readonly glbPath = `${ASSET_PATH}DamagedHelmet.glb`; 13 | } 14 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/css3d-renderer-example/css3d-renderer-example.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | @for (el of this.table; track el; let i = $index) { 12 | 13 |
14 |
15 | {{ i + 1 }} 16 |
17 |
18 | {{ el[0] }} 19 |
20 |
21 | {{ el[1] }}
22 | {{ el[2] }} 23 |
24 |
25 | 26 | } 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/css3d-renderer-example/css3d-renderer-example.component.scss: -------------------------------------------------------------------------------- 1 | .canvas-background { 2 | background-color: #000000; 3 | } 4 | 5 | a { 6 | color: #8ff; 7 | } 8 | 9 | #menu { 10 | position: absolute; 11 | bottom: 20px; 12 | width: 100%; 13 | text-align: center; 14 | z-index: 10; 15 | } 16 | 17 | .element { 18 | width: 120px; 19 | height: 160px; 20 | box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5); 21 | border: 1px solid rgba(127, 255, 255, 0.25); 22 | font-family: Helvetica, sans-serif; 23 | text-align: center; 24 | line-height: normal; 25 | cursor: default; 26 | } 27 | 28 | .element:hover { 29 | box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75); 30 | border: 1px solid rgba(127, 255, 255, 0.75); 31 | } 32 | 33 | .element .number { 34 | position: absolute; 35 | top: 20px; 36 | right: 20px; 37 | font-size: 12px; 38 | color: rgba(127, 255, 255, 0.75); 39 | } 40 | 41 | .element .symbol { 42 | position: absolute; 43 | top: 40px; 44 | left: 0px; 45 | right: 0px; 46 | font-size: 60px; 47 | font-weight: bold; 48 | color: rgba(255, 255, 255, 0.75); 49 | text-shadow: 0 0 10px rgba(0, 255, 255, 0.95); 50 | } 51 | 52 | .element .details { 53 | position: absolute; 54 | bottom: 15px; 55 | left: 0px; 56 | right: 0px; 57 | font-size: 12px; 58 | color: rgba(127, 255, 255, 0.75); 59 | } 60 | 61 | button { 62 | color: rgba(127, 255, 255, 0.75); 63 | background: transparent; 64 | outline: 1px solid rgba(127, 255, 255, 0.75); 65 | border: 0px; 66 | padding: 5px 10px; 67 | cursor: pointer; 68 | } 69 | 70 | button:hover { 71 | background-color: rgba(0, 255, 255, 0.5); 72 | } 73 | 74 | button:active { 75 | color: #000000; 76 | background-color: rgba(0, 255, 255, 0.75); 77 | } -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/dynamic-loader-example/dynamic-loader-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/dynamic-loader-example/dynamic-loader-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DynamicLoaderExampleComponent } from './dynamic-loader-example.component'; 4 | 5 | describe('DynamicLoaderExampleComponent', () => { 6 | let component: DynamicLoaderExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [DynamicLoaderExampleComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(DynamicLoaderExampleComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/events-example/events-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 30 | 31 | 32 | 33 | 34 |
35 |

Updates

36 |
    37 | @for (change of changes; track change) { 38 |
  1. 39 | {{ change }} 40 |
    2. 41 | } 42 |
43 |
44 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/events-example/events-example.component.scss: -------------------------------------------------------------------------------- 1 | .change-list { 2 | padding: 1em; 3 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 4 | transition: 0.3s; 5 | } 6 | 7 | :host { 8 | display: grid; 9 | grid-template-columns: repeat(2, 1fr); 10 | } 11 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/events-example/events-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { NgxThreeModule } from 'ngx-three'; 3 | 4 | import { EventsExampleComponent } from './events-example.component'; 5 | 6 | describe('EventsExampleComponent', () => { 7 | let component: EventsExampleComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [NgxThreeModule], 13 | declarations: [EventsExampleComponent] 14 | }).compileComponents(); 15 | }); 16 | 17 | beforeEach(() => { 18 | fixture = TestBed.createComponent(EventsExampleComponent); 19 | component = fixture.componentInstance; 20 | fixture.detectChanges(); 21 | }); 22 | 23 | it('should create', () => { 24 | expect(component).toBeTruthy(); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/events-example/events-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, ChangeDetectorRef, Component, SimpleChanges } from '@angular/core'; 2 | import { ASSET_PATH } from '../assets'; 3 | @Component({ 4 | selector: 'app-events-example', 5 | templateUrl: './events-example.component.html', 6 | styleUrls: ['./events-example.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class EventsExampleComponent { 11 | public readonly id = 'CID'; 12 | public changes: string[] = []; 13 | public rotation: [x: number, y: number, z: number] = [0, 0, 0]; 14 | public position: [x: number, y: number, z: number] = [0, 1, 0]; 15 | public readonly assetPath = `${ASSET_PATH}DamagedHelmet.glb`; 16 | constructor(private cdref: ChangeDetectorRef) { 17 | window.setInterval(() => { 18 | this.rotation = [0, this.rotation[1] + 0.05, 0]; 19 | this.cdref.markForCheck(); 20 | }, 1500); 21 | 22 | window.setInterval(() => { 23 | this.position = [0, (this.position[1] + 1) % 5, 0]; 24 | this.cdref.markForCheck(); 25 | }, 3000); 26 | } 27 | 28 | public logUpdates(changes: SimpleChanges) { 29 | this.pushToChangesArray(Object.keys(changes).toString()); 30 | } 31 | 32 | public onLoaded() { 33 | this.changes.push('Model loaded'); 34 | } 35 | 36 | public onOrbitControlChange() { 37 | this.pushToChangesArray(`${this.id}: orbit control change`); 38 | } 39 | 40 | public onOrbitControlEnd = () => { 41 | // <-- preserves binding scope when used in template 42 | this.pushToChangesArray(`${this.id}: orbit control end`); 43 | }; 44 | 45 | private pushToChangesArray(change: string) { 46 | if (this.changes.length >= 20) { 47 | this.changes.shift(); 48 | } 49 | this.changes.push(change); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/example-page/example-page.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/example-page/example-page.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/projects/ngx-three-demo/src/app/example-page/example-page.component.scss -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/example-page/example-page.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { EditorService } from '../code/EditorService'; 4 | 5 | import { ExamplePageComponent } from './example-page.component'; 6 | 7 | describe('ExamplePageComponent', () => { 8 | let component: ExamplePageComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(async () => { 12 | await TestBed.configureTestingModule({ 13 | imports: [RouterTestingModule], 14 | providers: [EditorService], 15 | declarations: [ExamplePageComponent] 16 | }).compileComponents(); 17 | 18 | fixture = TestBed.createComponent(ExamplePageComponent); 19 | component = fixture.componentInstance; 20 | fixture.detectChanges(); 21 | }); 22 | 23 | it('should create', () => { 24 | expect(component).toBeTruthy(); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/example-page/example-page.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Type } from '@angular/core'; 2 | import { ActivatedRoute } from '@angular/router'; 3 | import { EditorService } from '../code/EditorService'; 4 | 5 | @Component({ 6 | selector: 'app-example-page', 7 | templateUrl: './example-page.component.html', 8 | styleUrls: ['./example-page.component.scss'], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | standalone: false 11 | }) 12 | export class ExamplePageComponent { 13 | public exampleComponent: Type | null = null; 14 | 15 | public codeUrls: string[]; 16 | 17 | constructor( 18 | private editorService: EditorService, 19 | private route: ActivatedRoute, 20 | ) { 21 | this.codeUrls = this.route.snapshot.data.codeUrls ?? []; 22 | this.editorService.declarations = this.route.snapshot.data.declarations; 23 | this.exampleComponent = this.route.snapshot.data.exampleComponent; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/html-example/html-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { AppModule } from '../app.module'; 3 | 4 | import { HtmlExampleComponent } from './html-example.component'; 5 | 6 | describe('HtmlExampleComponent', () => { 7 | let component: HtmlExampleComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [AppModule] 13 | }).compileComponents(); 14 | 15 | fixture = TestBed.createComponent(HtmlExampleComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/html-with-css3d-example/html-with-css3d-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { AppModule } from '../app.module'; 3 | 4 | import { HtmlWithCSS3dExampleComponent } from './html-with-css3d-example.component'; 5 | 6 | describe('HtmlExampleComponent', () => { 7 | let component: HtmlWithCSS3dExampleComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [AppModule], 13 | }).compileComponents(); 14 | 15 | fixture = TestBed.createComponent(HtmlWithCSS3dExampleComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/instanced-mesh-example/instanced-mesh-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/instanced-mesh-example/instanced-mesh-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { InstancedMeshExampleComponent } from './instanced-mesh-example.component'; 4 | 5 | describe('InstancedMeshExampleComponent', () => { 6 | let component: InstancedMeshExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [InstancedMeshExampleComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(InstancedMeshExampleComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/introductory-example/introductory-example.component.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @angular-eslint/component-class-suffix */ 2 | import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'app-box', 6 | template: ` 7 | 13 | 14 | 15 | 16 | `, 17 | changeDetection: ChangeDetectionStrategy.OnPush, 18 | standalone: false 19 | }) 20 | export class Box { 21 | public selected = false; 22 | 23 | @Input() 24 | public rotation: [x: number, y: number, z: number] = [0, 0, 0]; 25 | @Input() 26 | public position: [x: number, y: number, z: number] = [0, 0, 0]; 27 | } 28 | 29 | @Component({ 30 | selector: 'app-introductory-example', 31 | template: ` 32 | 33 | 34 | 35 | 36 | 37 | 38 | `, 39 | changeDetection: ChangeDetectionStrategy.OnPush, 40 | standalone: false 41 | }) 42 | export class IntroductoryExampleComponent { 43 | public rotation: [x: number, y: number, z: number] = [0, 0, 0]; 44 | public onBeforeRender() { 45 | this.rotation = [0, this.rotation[2] + 0.01, this.rotation[2] + 0.01]; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/loader-example/loader-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/loader-example/loader-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LoaderExampleComponent } from './loader-example.component'; 4 | 5 | describe('LoaderExampleComponent', () => { 6 | let component: LoaderExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [LoaderExampleComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(LoaderExampleComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/loader-example/loader-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { ASSET_PATH } from '../assets'; 3 | 4 | @Component({ 5 | selector: 'app-loader-example', 6 | templateUrl: './loader-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class LoaderExampleComponent { 11 | public assetPath1 = `${ASSET_PATH}DamagedHelmet.glb`; 12 | public assetPath2 = `${ASSET_PATH}BoomBox.glb`; 13 | public rotation: [x: number, y: number, z: number] = [0, 0, 0]; 14 | public onBeforeRender(): void { 15 | this.rotation = [0, this.rotation[1] + 0.01, 0]; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/material/material.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { MatButtonModule } from '@angular/material/button'; 3 | import { MatIconModule } from '@angular/material/icon'; 4 | import { MatListModule } from '@angular/material/list'; 5 | import { MatCardModule } from '@angular/material/card'; 6 | import { MatToolbarModule } from '@angular/material/toolbar'; 7 | import { MatSelectModule } from '@angular/material/select'; 8 | import { MatTabsModule } from '@angular/material/tabs'; 9 | import { MatSliderModule } from '@angular/material/slider'; 10 | 11 | const MATERIAL_MODULES = [ 12 | MatButtonModule, 13 | MatListModule, 14 | MatIconModule, 15 | MatCardModule, 16 | MatToolbarModule, 17 | MatSelectModule, 18 | MatTabsModule, 19 | MatSliderModule 20 | ]; 21 | 22 | @NgModule({ 23 | imports: [MATERIAL_MODULES], 24 | exports: [MATERIAL_MODULES] 25 | }) 26 | export class MaterialModule {} 27 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/multi-renderer-example/multi-renderer-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | A Helmet 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/multi-renderer-example/multi-renderer-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MultiRendererExampleComponent } from './multi-renderer-example.component'; 4 | 5 | describe('MultiViewPostprocessingComponent', () => { 6 | let component: MultiRendererExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [MultiRendererExampleComponent], 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(MultiRendererExampleComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/multi-renderer-example/multi-renderer-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { ASSET_PATH } from '../assets'; 3 | import { provideCSS2dRenderer, provideWebGLRenderer } from 'projects/ngx-three/src/lib/renderer/renderer-providers'; 4 | 5 | @Component({ 6 | selector: 'app-multi-renderer-example', 7 | templateUrl: './multi-renderer-example.component.html', 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | styles: [ 10 | ` 11 | ::ng-deep .label { 12 | background-color: lightgrey; 13 | border-radius: 5px; 14 | line-height: 1rem; 15 | padding: 0.5rem; 16 | display: inline-block; 17 | } 18 | `, 19 | ], 20 | providers: [provideWebGLRenderer(), provideCSS2dRenderer()], 21 | standalone: false 22 | }) 23 | export class MultiRendererExampleComponent { 24 | public assetPath1 = `${ASSET_PATH}DamagedHelmet.glb`; 25 | public assetPath2 = `${ASSET_PATH}BoomBox.glb`; 26 | public rotation: [x: number, y: number, z: number] = [0, 0, 0]; 27 | public onBeforeRender(): void { 28 | this.rotation = [0, this.rotation[1] + 0.01, 0]; 29 | } 30 | 31 | public resetRotation() { 32 | this.rotation = [0, 0, 0]; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/multi-scene-example/multi-scene-example.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/multi-scene-example/multi-scene-example.component.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | position: absolute; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | .slider { 8 | position: absolute; 9 | cursor: ew-resize; 10 | 11 | width: 40px; 12 | height: 40px; 13 | background-color: #f32196; 14 | opacity: 0.7; 15 | border-radius: 50%; 16 | 17 | top: calc(50% - 20px); 18 | left: calc(50% - 20px); 19 | } 20 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/multi-scene-example/multi-scene-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MultiSceneExampleComponent } from './multi-scene-example.component'; 4 | 5 | describe('MultiSceneExampleComponent', () => { 6 | let component: MultiSceneExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [MultiSceneExampleComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(MultiSceneExampleComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/multi-view-postprocessing-example/multi-view-postprocessing-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MultiViewPostprocessingExampleComponent } from './multi-view-postprocessing-example.component'; 4 | 5 | describe('MultiViewPostprocessingComponent', () => { 6 | let component: MultiViewPostprocessingExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [MultiViewPostprocessingExampleComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(MultiViewPostprocessingExampleComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/navigation-shell/navigation-shell.component.scss: -------------------------------------------------------------------------------- 1 | .sidenav-container { 2 | height: 100%; 3 | } 4 | 5 | .sidenav { 6 | width: 200px; 7 | } 8 | 9 | .sidenav .mat-toolbar { 10 | background: inherit; 11 | } 12 | 13 | .mat-toolbar.mat-primary { 14 | position: sticky; 15 | top: 0; 16 | z-index: 1; 17 | } 18 | 19 | .content { 20 | height: 100vh; 21 | } 22 | 23 | .main-route-content > *:last-child { 24 | display: block; 25 | height: 100%; 26 | } 27 | 28 | .toolbar-spacer { 29 | flex: 1 1 auto; 30 | } 31 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/navigation-shell/navigation-shell.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { LayoutModule } from '@angular/cdk/layout'; 2 | import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; 3 | import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 4 | import { MatButtonModule } from '@angular/material/button'; 5 | import { MatIconModule } from '@angular/material/icon'; 6 | import { MatListModule } from '@angular/material/list'; 7 | import { MatSidenavModule } from '@angular/material/sidenav'; 8 | import { MatToolbarModule } from '@angular/material/toolbar'; 9 | 10 | import { NavigationShellComponent } from './navigation-shell.component'; 11 | import { EditorService } from '../code/EditorService'; 12 | 13 | describe('NavigationShellComponent', () => { 14 | let component: NavigationShellComponent; 15 | let fixture: ComponentFixture; 16 | 17 | beforeEach(waitForAsync(() => { 18 | TestBed.configureTestingModule({ 19 | declarations: [NavigationShellComponent], 20 | imports: [ 21 | NoopAnimationsModule, 22 | LayoutModule, 23 | MatButtonModule, 24 | MatIconModule, 25 | MatListModule, 26 | MatSidenavModule, 27 | MatToolbarModule 28 | ], 29 | providers: [EditorService] 30 | }).compileComponents(); 31 | })); 32 | 33 | beforeEach(() => { 34 | fixture = TestBed.createComponent(NavigationShellComponent); 35 | component = fixture.componentInstance; 36 | fixture.detectChanges(); 37 | }); 38 | 39 | it('should compile', () => { 40 | expect(component).toBeTruthy(); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/navigation-shell/navigation-shell.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; 3 | import { Observable } from 'rxjs'; 4 | import { map, shareReplay } from 'rxjs/operators'; 5 | import { EXAMPLE_ROUTES } from '../app-routing.module'; 6 | import { EditorService } from '../code/EditorService'; 7 | 8 | @Component({ 9 | selector: 'app-navigation-shell', 10 | templateUrl: './navigation-shell.component.html', 11 | styleUrls: ['./navigation-shell.component.scss'], 12 | changeDetection: ChangeDetectionStrategy.OnPush, 13 | standalone: false 14 | }) 15 | export class NavigationShellComponent { 16 | public routes = EXAMPLE_ROUTES; 17 | isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset).pipe( 18 | map((result) => result.matches), 19 | shareReplay(), 20 | ); 21 | 22 | constructor( 23 | private breakpointObserver: BreakpointObserver, 24 | public readonly editorService: EditorService, 25 | ) {} 26 | } 27 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/on-demand-example/on-demand-example.component.scss: -------------------------------------------------------------------------------- 1 | .needs-loop { 2 | color: red; 3 | } 4 | 5 | .works-on-demand { 6 | color: green; 7 | } 8 | 9 | .control-panel { 10 | display: flex; 11 | gap: 1em; 12 | margin: 1em; 13 | } -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/on-demand-example/on-demand-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { OnDemandExampleComponent } from './on-demand-example.component'; 4 | 5 | describe('OnDemandExampleComponent', () => { 6 | let component: OnDemandExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [OnDemandExampleComponent] 12 | }).compileComponents(); 13 | 14 | fixture = TestBed.createComponent(OnDemandExampleComponent); 15 | component = fixture.componentInstance; 16 | fixture.detectChanges(); 17 | }); 18 | 19 | it('should create', () => { 20 | expect(component).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/on-demand-example/on-demand-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { ASSET_PATH } from '../assets'; 3 | 4 | @Component({ 5 | selector: 'app-on-demand-example', 6 | templateUrl: './on-demand-example.component.html', 7 | styleUrls: ['./on-demand-example.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | export class OnDemandExampleComponent { 12 | protected controlType = 'orbit'; 13 | protected renderOnDemand = true; 14 | protected selected = false; 15 | public readonly glbPath = `${ASSET_PATH}DamagedHelmet.glb`; 16 | } 17 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/outline-pass-events-example/outline-pass-events-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | @for (data of meshData; track data) { 12 | 22 | 23 | 24 | } 25 | 26 | 27 | 28 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/outline-pass-events-example/outline-pass-events-example.component.scss: -------------------------------------------------------------------------------- 1 | :host ::ng-deep .lil-gui{ 2 | position:fixed; 3 | right:0; 4 | z-index: 9999; 5 | } -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/plyloader-example/plyloader-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 32 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/plyloader-example/plyloader-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { NgxThreeModule } from 'ngx-three'; 3 | 4 | import { PLYLoaderExampleComponent } from './plyloader-example.component'; 5 | 6 | describe('PLYLoaderExampleComponent', () => { 7 | let component: PLYLoaderExampleComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | declarations: [PLYLoaderExampleComponent], 13 | imports: [NgxThreeModule] 14 | }).compileComponents(); 15 | }); 16 | 17 | beforeEach(() => { 18 | fixture = TestBed.createComponent(PLYLoaderExampleComponent); 19 | component = fixture.componentInstance; 20 | fixture.detectChanges(); 21 | }); 22 | 23 | it('should create', () => { 24 | expect(component).toBeTruthy(); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/plyloader-example/plyloader-example.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core'; 2 | import { ThPerspectiveCamera } from 'ngx-three'; 3 | import { Vector3 } from 'three'; 4 | import { ASSET_PATH } from '../assets'; 5 | 6 | @Component({ 7 | selector: 'app-plyloader-example', 8 | templateUrl: './plyloader-example.component.html', 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | standalone: false 11 | }) 12 | export class PLYLoaderExampleComponent { 13 | // eslint-disable-next-line @typescript-eslint/naming-convention 14 | public Math = Math; 15 | public cameraPosition = new Vector3(3, 0.15, 3); 16 | 17 | @ViewChild('camera') 18 | public camera?: ThPerspectiveCamera; 19 | 20 | public assetPath = `${ASSET_PATH}dolphins.ply`; 21 | public onBeforeRender(): void { 22 | const timer = Date.now() * 0.0005; 23 | if (this.camera) { 24 | this.camera.position = new Vector3(Math.sin(timer) * 2.5, 0.15, Math.cos(timer) * 2.5); 25 | this.camera.lookAt = [0, 0.1, 0]; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/post-processing-example/post-processing-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | @for (data of meshData; track data) { 20 | 26 | 27 | 28 | } 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/post-processing-example/post-processing-example.component.scss: -------------------------------------------------------------------------------- 1 | label { 2 | margin-right: 0.5em; 3 | } 4 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/post-processing-example/post-processing-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PostProcessingExampleComponent } from './post-processing-example.component'; 4 | 5 | describe('PostProcessingExampleComponent', () => { 6 | let component: PostProcessingExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [PostProcessingExampleComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(PostProcessingExampleComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/ref-by-id-example/ref-by-id-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 20 | 21 | 22 | 23 | 24 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/ref-by-id-example/ref-by-id-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { AppModule } from '../app.module'; 3 | 4 | import { RefByIdExampleComponent } from './ref-by-id-example.component'; 5 | 6 | describe('RefByIdExampleComponent', () => { 7 | let component: RefByIdExampleComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [AppModule] 13 | }).compileComponents(); 14 | 15 | fixture = TestBed.createComponent(RefByIdExampleComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/simple-example/simple-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/simple-example/simple-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SimpleExampleComponent } from './simple-example.component'; 4 | 5 | describe('SimpleExampleComponent', () => { 6 | let component: SimpleExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [SimpleExampleComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(SimpleExampleComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/views-example/views-example.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/projects/ngx-three-demo/src/app/views-example/views-example.component.scss -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/app/views-example/views-example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ViewsExampleComponent } from './views-example.component'; 4 | 5 | describe('ViewsExampleComponent', () => { 6 | let component: ViewsExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ViewsExampleComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(ViewsExampleComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/projects/ngx-three-demo/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/assets/BoomBox.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/projects/ngx-three-demo/src/assets/BoomBox.glb -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/assets/DamagedHelmet.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/projects/ngx-three-demo/src/assets/DamagedHelmet.glb -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/assets/RobotExpressive.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/projects/ngx-three-demo/src/assets/RobotExpressive.glb -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/assets/mac-draco.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/projects/ngx-three-demo/src/assets/mac-draco.glb -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/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/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demike/ngx-three/6a289abc1b39ad7cc61566ac38658dc4170e73d7/projects/ngx-three-demo/src/favicon.ico -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgxThreeDemo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true /*, ngZone: 'noop' */ }) 13 | .catch((err) => console.error(err)); 14 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 3 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,500,700'); 4 | @import 'normalize.css'; 5 | @import '@angular/material/prebuilt-themes/deeppurple-amber.css'; 6 | 7 | @import 'highlight.js/styles/atom-one-dark.css'; 8 | 9 | /* 10 | @include mat-core(); 11 | 12 | $primary: mat-palette($mat-red, 700); 13 | $accent: mat-palette($mat-grey, 800); 14 | $warn: mat-palette($mat-lime, 400); 15 | $theme: mat-dark-theme($primary, $accent, $warn); 16 | 17 | @include angular-material-theme(); 18 | */ 19 | 20 | * { 21 | box-sizing: border-box; 22 | } 23 | 24 | /* 25 | body { 26 | height: 100vh; 27 | font-family: Roboto, "Helvetica Neue", sans-serif; 28 | overflow-y: auto; 29 | display: flex; 30 | flex-direction: column; 31 | background: mat-color(mat-palette($mat-red, 900)); 32 | } 33 | 34 | 35 | h3 { 36 | color: white; 37 | font-weight: 300; 38 | margin: 3em 0 1.5em; 39 | } 40 | 41 | */ 42 | 43 | .example-container { 44 | display: block; 45 | height: calc(100vh - 64px); 46 | } 47 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/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/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 6 | 7 | // First, initialize the Angular testing environment. 8 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 9 | teardown: { destroyAfterEach: false } 10 | }); 11 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/app", 6 | "types": [], 7 | "resolveJsonModule": true, 8 | "allowSyntheticDefaultImports": true 9 | }, 10 | "files": ["src/main.ts", "src/polyfills.ts"], 11 | "include": ["src/**/*.d.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /projects/ngx-three-demo/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": ["jasmine"], 7 | "resolveJsonModule": true, 8 | "allowSyntheticDefaultImports": true 9 | }, 10 | "files": ["src/test.ts", "src/polyfills.ts"], 11 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /projects/ngx-three/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../.eslintrc.json", 3 | "ignorePatterns": [ 4 | "!**/*" 5 | ], 6 | "overrides": [ 7 | { 8 | "files": [ 9 | "*.ts" 10 | ], 11 | "parserOptions": { 12 | "project": [ 13 | "projects/ngx-three/tsconfig.lib.json", 14 | "projects/ngx-three/tsconfig.spec.json" 15 | ], 16 | "createDefaultProgram": true 17 | }, 18 | "rules": { 19 | "@angular-eslint/component-selector": [ 20 | "error", 21 | { 22 | "type": "element", 23 | "prefix": "th", 24 | "style": "kebab-case" 25 | } 26 | ], 27 | "@angular-eslint/directive-selector": [ 28 | "off", 29 | { 30 | "type": "attribute", 31 | "prefix": "th", 32 | "style": "camelCase" 33 | } 34 | ], 35 | "@angular-eslint/no-output-on-prefix": "off" 36 | } 37 | }, 38 | { 39 | "files": [ 40 | "*.html" 41 | ], 42 | "rules": {} 43 | } 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /projects/ngx-three/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 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, '../../coverage/ngx-three'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /projects/ngx-three/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-three", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/ngx-three/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-three", 3 | "version": "0.0.2", 4 | "repository": { 5 | "type": "git", 6 | "url": "git+https://github.com/demike/ngx-three.git" 7 | }, 8 | "keywords": [ 9 | "angular", 10 | "three.js", 11 | "WebGL", 12 | "generator" 13 | ], 14 | "author": "Michael Derfler", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/demike/ngx-three/issues" 18 | }, 19 | "homepage": "https://github.com/demike/ngx-three#readme", 20 | "peerDependencies": { 21 | "@angular/common": "^19.1.7", 22 | "@angular/core": "^19.1.7", 23 | "three": "~0.171.0" 24 | }, 25 | "dependencies": { 26 | "tslib": "^2.6.2" 27 | }, 28 | "devDependencies": { 29 | "typescript": "^5.1.6", 30 | "ts-node": "^10.9.1", 31 | "prettier": "^3.0.2", 32 | "utility-types": "^3.10.0" 33 | }, 34 | "scripts": { 35 | "typegen:components": "ts-node -P \"tsconfig.generate.json\" src/lib/generator/generateComponents.ts" 36 | } 37 | } -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/ThCanvas.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex: auto; 4 | line-height: 0; 5 | height: 100%; 6 | } 7 | 8 | canvas { 9 | flex: auto; 10 | outline: none; 11 | width: 100%; 12 | height: 100% 13 | } 14 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/ThGeometryBase.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { BufferGeometry, NormalOrGLBufferAttributes } from 'three'; 3 | import { ThObject3D } from './generated/ThObject3D'; 4 | import { ThWrapperBase } from './ThWrapperBase'; 5 | @Component({ 6 | selector: 'th-abs-geometry', 7 | template: '', 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | // eslint-disable-next-line @angular-eslint/component-class-suffix 12 | export class ThGeometryBase, ARGS> extends ThWrapperBase { 13 | constructor(protected parent: ThObject3D) { 14 | super(); 15 | } 16 | 17 | public addToParent() { 18 | if (!this.parent.objRef) { 19 | return; 20 | //throw new Error("parent object doesn't hold a three js object instance"); 21 | } 22 | 23 | (this.parent.objRef as any).geometry = this.objRef; 24 | if ((this.parent.objRef as any).updateMorphTargets) { 25 | (this.parent.objRef as any).updateMorphTargets(); 26 | } 27 | } 28 | 29 | public removeFromParent() { 30 | if (this._objRef && this.parent && this.parent.objRef) { 31 | (this.parent.objRef as any).geometry = undefined; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/ThMaterialBase.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { Material, Mesh } from 'three'; 3 | import { ThObject3D } from './generated/ThObject3D'; 4 | import { ThWrapperBase } from './ThWrapperBase'; 5 | @Component({ 6 | selector: 'th-abs-material', 7 | template: '', 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | // eslint-disable-next-line @angular-eslint/component-class-suffix 12 | export class ThMaterialBase extends ThWrapperBase { 13 | constructor(protected parent: ThObject3D) { 14 | super(); 15 | } 16 | 17 | public addToParent() { 18 | if (!this.parent.objRef) { 19 | throw new Error("parent object doesn't hold a three js object instance"); 20 | } 21 | 22 | (this.parent.objRef as Mesh).material = this.objRef as Material; 23 | } 24 | 25 | public removeFromParent() { 26 | if (this._objRef && this.parent && this.parent.objRef) { 27 | (this.parent.objRef as any).material = undefined; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/ThPassBase.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnInit, Optional } from '@angular/core'; 2 | import { ThEffectComposer } from './generated/overrides/ThEffectComposer'; 3 | import { Pass } from 'three/examples/jsm/postprocessing/Pass.js'; 4 | import { ThWrapperBase } from './ThWrapperBase'; 5 | @Component({ 6 | selector: 'th-abs-control', 7 | template: '', 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | // eslint-disable-next-line @angular-eslint/component-class-suffix 12 | export class ThPassBase extends ThWrapperBase implements OnInit { 13 | constructor(@Optional() protected effectComposer?: ThEffectComposer) { 14 | super(); 15 | } 16 | 17 | public addToParent() { 18 | if (this._objRef && this.effectComposer && this.effectComposer.objRef) { 19 | this.effectComposer.objRef.addPass(this._objRef); 20 | } 21 | } 22 | 23 | public removeFromParent() { 24 | if (this._objRef && this.effectComposer && this.effectComposer.objRef) { 25 | this.effectComposer.objRef.removePass(this._objRef); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/ThTextureBase.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { Texture } from 'three'; 3 | import { ThWrapperBase } from './ThWrapperBase'; 4 | @Component({ 5 | selector: 'th-abs-texture', 6 | template: '', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | // eslint-disable-next-line @angular-eslint/component-class-suffix 11 | export class ThTextureBase extends ThWrapperBase {} 12 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/component.helpers.ts: -------------------------------------------------------------------------------- 1 | import { forwardRef, Provider, Type } from '@angular/core'; 2 | import { Object3D } from 'three'; 3 | import { ThCamera } from './generated/ThCamera'; 4 | import { ThObject3D } from './generated/ThObject3D'; 5 | 6 | export function createThProviderArray(cls: InstanceType, baseCls: InstanceType) { 7 | const providers: Provider[] = []; 8 | if (ThObject3D.isPrototypeOf(baseCls) || Object3D === baseCls) { 9 | providers.push({ provide: ThObject3D, useExisting: forwardRef(() => cls) }); 10 | 11 | if (ThCamera.isPrototypeOf(baseCls) || ThCamera === baseCls) { 12 | providers.push({ provide: ThCamera, useExisting: forwardRef(() => cls) }); 13 | } 14 | } 15 | } 16 | 17 | /** 18 | * usage: 19 | * 20 | * @Component({ 21 | * providers: createObj3DProviderArray(forwardRef(() => TheComponent))) 22 | * }) 23 | * export class TheComponent { 24 | * ... 25 | * } 26 | * @param type the Object3D derived Class to be provided 27 | */ 28 | export function createObj3DProviderArray(type: Type) { 29 | return [{ provide: ThObject3D, useExisting: forwardRef(() => type) }]; 30 | } 31 | 32 | export function createCameraProviderArray(type: Type) { 33 | return [ 34 | { provide: ThObject3D, useExisting: forwardRef(() => type) }, 35 | { provide: ThCamera, useExisting: forwardRef(() => type) } 36 | ]; 37 | } 38 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/extra/web/html.component.html: -------------------------------------------------------------------------------- 1 | @if (transform) { 2 |
3 |
4 |
5 | 6 |
7 |
8 |
9 | } @else { 10 |
11 | 12 |
13 | } 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThAmbientLight.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { AmbientLight } from 'three'; 12 | import { ColorRepresentation } from 'three/src/math/Color.js'; 13 | import { ThLight } from './ThLight'; 14 | import { ThObject3D } from './ThObject3D'; 15 | 16 | @Component({ 17 | selector: 'th-ambientLight', 18 | template: '', 19 | changeDetection: ChangeDetectionStrategy.OnPush, 20 | providers: [ 21 | { provide: ThObject3D, useExisting: forwardRef(() => ThAmbientLight) }, 22 | ], 23 | standalone: false 24 | }) 25 | export class ThAmbientLight< 26 | T extends AmbientLight = AmbientLight, 27 | TARGS = [color?: ColorRepresentation, intensity?: number], 28 | > extends ThLight { 29 | public getType(): Type { 30 | return AmbientLight; 31 | } 32 | 33 | public get isAmbientLight(): true | undefined { 34 | return this._objRef?.isAmbientLight; 35 | } 36 | public get type(): (string | 'AmbientLight') | undefined { 37 | return this._objRef?.type; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThArrayCamera.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Input, 9 | Type, 10 | forwardRef, 11 | } from '@angular/core'; 12 | import { ArrayCamera } from 'three'; 13 | import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera.js'; 14 | import { ThCamera } from './ThCamera'; 15 | import { ThObject3D } from './ThObject3D'; 16 | import { ThPerspectiveCamera } from './ThPerspectiveCamera'; 17 | 18 | @Component({ 19 | selector: 'th-arrayCamera', 20 | template: '', 21 | changeDetection: ChangeDetectionStrategy.OnPush, 22 | providers: [ 23 | { provide: ThObject3D, useExisting: forwardRef(() => ThArrayCamera) }, 24 | { provide: ThCamera, useExisting: forwardRef(() => ThArrayCamera) }, 25 | ], 26 | standalone: false 27 | }) 28 | export class ThArrayCamera< 29 | T extends ArrayCamera = ArrayCamera, 30 | TARGS = /* cameras? */ PerspectiveCamera[], 31 | > extends ThPerspectiveCamera { 32 | public getType(): Type { 33 | return ArrayCamera; 34 | } 35 | 36 | public get isArrayCamera(): true | undefined { 37 | return this._objRef?.isArrayCamera; 38 | } 39 | @Input() 40 | public set cameras(value: PerspectiveCamera[]) { 41 | if (this._objRef) { 42 | this._objRef.cameras = value; 43 | } 44 | } 45 | 46 | public get cameras(): PerspectiveCamera[] | undefined { 47 | return this._objRef?.cameras; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThAxesHelper.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { AxesHelper, BufferGeometry, Material, Object3DEventMap } from 'three'; 12 | import { ThLineSegments } from './ThLineSegments'; 13 | import { ThObject3D } from './ThObject3D'; 14 | 15 | @Component({ 16 | selector: 'th-axesHelper', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { provide: ThObject3D, useExisting: forwardRef(() => ThAxesHelper) }, 21 | ], 22 | standalone: false 23 | }) 24 | export class ThAxesHelper< 25 | T extends AxesHelper = AxesHelper, 26 | TARGS = /* size? */ number, 27 | > extends ThLineSegments< 28 | BufferGeometry, 29 | Material | Material[], 30 | Object3DEventMap, 31 | T, 32 | TARGS 33 | > { 34 | public getType(): Type { 35 | return AxesHelper; 36 | } 37 | 38 | public get type(): (string | 'AxesHelper') | undefined { 39 | return this._objRef?.type; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThBone.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { Bone } from 'three'; 12 | import { Object3DEventMap } from 'three/src/core/Object3D.js'; 13 | import { ThObject3D } from './ThObject3D'; 14 | 15 | @Component({ 16 | selector: 'th-bone', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [{ provide: ThObject3D, useExisting: forwardRef(() => ThBone) }], 20 | standalone: false 21 | }) 22 | export class ThBone< 23 | TEventMap extends Object3DEventMap = Object3DEventMap, 24 | T extends Bone = Bone, 25 | TARGS = [], 26 | > extends ThObject3D { 27 | public getType(): Type> { 28 | return Bone; 29 | } 30 | 31 | public get isBone(): true | undefined { 32 | return this._objRef?.isBone; 33 | } 34 | public get type(): (string | 'Bone') | undefined { 35 | return this._objRef?.type; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThBox3Helper.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Input, 9 | Type, 10 | forwardRef, 11 | } from '@angular/core'; 12 | import { 13 | Box3, 14 | Box3Helper, 15 | BufferGeometry, 16 | Material, 17 | Object3DEventMap, 18 | } from 'three'; 19 | import { ColorRepresentation } from 'three/src/math/Color.js'; 20 | import { Vector3 } from 'three/src/math/Vector3.js'; 21 | import { applyValue } from '../util'; 22 | import { ThLineSegments } from './ThLineSegments'; 23 | import { ThObject3D } from './ThObject3D'; 24 | 25 | @Component({ 26 | selector: 'th-box3Helper', 27 | template: '', 28 | changeDetection: ChangeDetectionStrategy.OnPush, 29 | providers: [ 30 | { provide: ThObject3D, useExisting: forwardRef(() => ThBox3Helper) }, 31 | ], 32 | standalone: false 33 | }) 34 | export class ThBox3Helper< 35 | T extends Box3Helper = Box3Helper, 36 | TARGS = [box: Box3, color?: ColorRepresentation], 37 | > extends ThLineSegments< 38 | BufferGeometry, 39 | Material | Material[], 40 | Object3DEventMap, 41 | T, 42 | TARGS 43 | > { 44 | public getType(): Type { 45 | return Box3Helper; 46 | } 47 | 48 | public get type(): (string | 'Box3Helper') | undefined { 49 | return this._objRef?.type; 50 | } 51 | @Input() 52 | public set box(value: Box3 | [min: Vector3, max: Vector3]) { 53 | if (this._objRef) { 54 | this._objRef.box = applyValue(this._objRef.box, value); 55 | } 56 | } 57 | public get box(): Box3 | undefined { 58 | return this._objRef?.box; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThBoxGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { BoxGeometry, NormalBufferAttributes } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | 14 | @Component({ 15 | selector: 'th-boxGeometry', 16 | template: '', 17 | changeDetection: ChangeDetectionStrategy.OnPush, 18 | providers: [ 19 | { provide: ThBufferGeometry, useExisting: forwardRef(() => ThBoxGeometry) }, 20 | ], 21 | standalone: false 22 | }) 23 | export class ThBoxGeometry< 24 | T extends BoxGeometry = BoxGeometry, 25 | TARGS = [ 26 | width?: number, 27 | height?: number, 28 | depth?: number, 29 | widthSegments?: number, 30 | heightSegments?: number, 31 | depthSegments?: number, 32 | ], 33 | > extends ThBufferGeometry { 34 | public getType(): Type { 35 | return BoxGeometry; 36 | } 37 | 38 | public get type(): (string | 'BoxGeometry') | undefined { 39 | return this._objRef?.type; 40 | } 41 | public get parameters(): 42 | | { 43 | readonly width: number; 44 | readonly height: number; 45 | readonly depth: number; 46 | readonly widthSegments: number; 47 | readonly heightSegments: number; 48 | readonly depthSegments: number; 49 | } 50 | | undefined { 51 | return this._objRef?.parameters; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThBoxHelper.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { BoxHelper, Object3DEventMap } from 'three'; 12 | import { BufferGeometry } from 'three/src/core/BufferGeometry.js'; 13 | import { Object3D } from 'three/src/core/Object3D.js'; 14 | import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial.js'; 15 | import { ColorRepresentation } from 'three/src/math/Color.js'; 16 | import { ThLineSegments } from './ThLineSegments'; 17 | import { ThObject3D } from './ThObject3D'; 18 | 19 | @Component({ 20 | selector: 'th-boxHelper', 21 | template: '', 22 | changeDetection: ChangeDetectionStrategy.OnPush, 23 | providers: [ 24 | { provide: ThObject3D, useExisting: forwardRef(() => ThBoxHelper) }, 25 | ], 26 | standalone: false 27 | }) 28 | export class ThBoxHelper< 29 | T extends BoxHelper = BoxHelper, 30 | TARGS = [object: Object3D, color?: ColorRepresentation], 31 | > extends ThLineSegments< 32 | BufferGeometry, 33 | LineBasicMaterial, 34 | Object3DEventMap, 35 | T, 36 | TARGS 37 | > { 38 | public getType(): Type { 39 | return BoxHelper; 40 | } 41 | 42 | public get type(): (string | 'BoxHelper') | undefined { 43 | return this._objRef?.type; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThBoxLineGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { NormalBufferAttributes } from 'three'; 12 | import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js'; 13 | import { ThBufferGeometry } from './ThBufferGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-boxLineGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThBoxLineGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThBoxLineGeometry< 28 | T extends BoxLineGeometry = BoxLineGeometry, 29 | TARGS = [ 30 | width?: number, 31 | height?: number, 32 | depth?: number, 33 | widthSegments?: number, 34 | heightSegments?: number, 35 | depthSegments?: number, 36 | ], 37 | > extends ThBufferGeometry { 38 | public getType(): Type { 39 | return BoxLineGeometry; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThCanvasTexture.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { CanvasTexture } from 'three'; 12 | import { 13 | MagnificationTextureFilter, 14 | Mapping, 15 | MinificationTextureFilter, 16 | PixelFormat, 17 | TextureDataType, 18 | Wrapping, 19 | } from 'three/src/constants.js'; 20 | import { OffscreenCanvas } from 'three/src/textures/Texture.js'; 21 | import { ThTextureBase } from '../ThTextureBase'; 22 | import { ThTexture } from './ThTexture'; 23 | 24 | @Component({ 25 | selector: 'th-canvasTexture', 26 | template: '', 27 | changeDetection: ChangeDetectionStrategy.OnPush, 28 | providers: [ 29 | { provide: ThTextureBase, useExisting: forwardRef(() => ThCanvasTexture) }, 30 | ], 31 | standalone: false 32 | }) 33 | export class ThCanvasTexture< 34 | T extends CanvasTexture = CanvasTexture, 35 | TARGS = [ 36 | canvas: TexImageSource | OffscreenCanvas, 37 | mapping?: Mapping, 38 | wrapS?: Wrapping, 39 | wrapT?: Wrapping, 40 | magFilter?: MagnificationTextureFilter, 41 | minFilter?: MinificationTextureFilter, 42 | format?: PixelFormat, 43 | type?: TextureDataType, 44 | anisotropy?: number, 45 | ], 46 | > extends ThTexture { 47 | public getType(): Type { 48 | return CanvasTexture; 49 | } 50 | 51 | public get isCanvasTexture(): true | undefined { 52 | return this._objRef?.isCanvasTexture; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThCapsuleGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { CapsuleGeometry, NormalBufferAttributes } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | 14 | @Component({ 15 | selector: 'th-capsuleGeometry', 16 | template: '', 17 | changeDetection: ChangeDetectionStrategy.OnPush, 18 | providers: [ 19 | { 20 | provide: ThBufferGeometry, 21 | useExisting: forwardRef(() => ThCapsuleGeometry), 22 | }, 23 | ], 24 | standalone: false 25 | }) 26 | export class ThCapsuleGeometry< 27 | T extends CapsuleGeometry = CapsuleGeometry, 28 | TARGS = [ 29 | radius?: number, 30 | length?: number, 31 | capSegments?: number, 32 | radialSegments?: number, 33 | ], 34 | > extends ThBufferGeometry { 35 | public getType(): Type { 36 | return CapsuleGeometry; 37 | } 38 | 39 | public get type(): (string | 'CapsuleGeometry') | undefined { 40 | return this._objRef?.type; 41 | } 42 | public get parameters(): 43 | | { 44 | readonly radius: number; 45 | readonly length: number; 46 | readonly capSegments: number; 47 | readonly radialSegments: number; 48 | } 49 | | undefined { 50 | return this._objRef?.parameters; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThCircleGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { CircleGeometry, NormalBufferAttributes } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | 14 | @Component({ 15 | selector: 'th-circleGeometry', 16 | template: '', 17 | changeDetection: ChangeDetectionStrategy.OnPush, 18 | providers: [ 19 | { 20 | provide: ThBufferGeometry, 21 | useExisting: forwardRef(() => ThCircleGeometry), 22 | }, 23 | ], 24 | standalone: false 25 | }) 26 | export class ThCircleGeometry< 27 | T extends CircleGeometry = CircleGeometry, 28 | TARGS = [ 29 | radius?: number, 30 | segments?: number, 31 | thetaStart?: number, 32 | thetaLength?: number, 33 | ], 34 | > extends ThBufferGeometry { 35 | public getType(): Type { 36 | return CircleGeometry; 37 | } 38 | 39 | public get type(): (string | 'CircleGeometry') | undefined { 40 | return this._objRef?.type; 41 | } 42 | public get parameters(): 43 | | { 44 | readonly radius: number; 45 | readonly segments: number; 46 | readonly thetaStart: number; 47 | readonly thetaLength: number; 48 | } 49 | | undefined { 50 | return this._objRef?.parameters; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThClearMaskPass.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/ban-types */ 3 | /* eslint-disable @typescript-eslint/naming-convention */ 4 | /* eslint-disable no-underscore-dangle */ 5 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 6 | import { 7 | ChangeDetectionStrategy, 8 | Component, 9 | Type, 10 | forwardRef, 11 | } from '@angular/core'; 12 | import { ClearMaskPass } from 'three/examples/jsm/postprocessing/MaskPass.js'; 13 | import { ThPassBase } from '../ThPassBase'; 14 | import { ThPass } from './ThPass'; 15 | 16 | @Component({ 17 | selector: 'th-clearMaskPass', 18 | template: '', 19 | changeDetection: ChangeDetectionStrategy.OnPush, 20 | providers: [ 21 | { provide: ThPassBase, useExisting: forwardRef(() => ThClearMaskPass) }, 22 | ], 23 | standalone: false 24 | }) 25 | export class ThClearMaskPass< 26 | T extends ClearMaskPass = ClearMaskPass, 27 | TARGS = [], 28 | > extends ThPass { 29 | public getType(): Type { 30 | return ClearMaskPass; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThClearPass.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/ban-types */ 3 | /* eslint-disable @typescript-eslint/naming-convention */ 4 | /* eslint-disable no-underscore-dangle */ 5 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 6 | import { 7 | ChangeDetectionStrategy, 8 | Component, 9 | Input, 10 | Type, 11 | forwardRef, 12 | } from '@angular/core'; 13 | import { ColorRepresentation } from 'three'; 14 | import { ClearPass } from 'three/examples/jsm/postprocessing/ClearPass.js'; 15 | import { ThPassBase } from '../ThPassBase'; 16 | import { ThPass } from './ThPass'; 17 | 18 | @Component({ 19 | selector: 'th-clearPass', 20 | template: '', 21 | changeDetection: ChangeDetectionStrategy.OnPush, 22 | providers: [ 23 | { provide: ThPassBase, useExisting: forwardRef(() => ThClearPass) }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThClearPass< 28 | T extends ClearPass = ClearPass, 29 | TARGS = [clearColor?: ColorRepresentation, clearAlpha?: number], 30 | > extends ThPass { 31 | public getType(): Type { 32 | return ClearPass; 33 | } 34 | 35 | @Input() 36 | public set clearColor(value: ColorRepresentation) { 37 | if (this._objRef) { 38 | this._objRef.clearColor = value; 39 | } 40 | } 41 | 42 | public get clearColor(): ColorRepresentation | undefined { 43 | return this._objRef?.clearColor; 44 | } 45 | @Input() 46 | public set clearAlpha(value: number) { 47 | if (this._objRef) { 48 | this._objRef.clearAlpha = value; 49 | } 50 | } 51 | 52 | public get clearAlpha(): number | undefined { 53 | return this._objRef?.clearAlpha; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThCompressedCubeTexture.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { CompressedCubeTexture } from 'three'; 12 | import { CompressedPixelFormat, TextureDataType } from 'three/src/constants.js'; 13 | import { ThTextureBase } from '../ThTextureBase'; 14 | import { ThCompressedTexture } from './ThCompressedTexture'; 15 | 16 | @Component({ 17 | selector: 'th-compressedCubeTexture', 18 | template: '', 19 | changeDetection: ChangeDetectionStrategy.OnPush, 20 | providers: [ 21 | { 22 | provide: ThTextureBase, 23 | useExisting: forwardRef(() => ThCompressedCubeTexture), 24 | }, 25 | ], 26 | standalone: false 27 | }) 28 | export class ThCompressedCubeTexture< 29 | T extends CompressedCubeTexture = CompressedCubeTexture, 30 | TARGS = [ 31 | images: Array<{ width: number; height: number }>, 32 | format?: CompressedPixelFormat, 33 | type?: TextureDataType, 34 | ], 35 | > extends ThCompressedTexture { 36 | public getType(): Type { 37 | return CompressedCubeTexture; 38 | } 39 | 40 | public get isCompressedCubeTexture(): true | undefined { 41 | return this._objRef?.isCompressedCubeTexture; 42 | } 43 | public get isCubeTexture(): true | undefined { 44 | return this._objRef?.isCubeTexture; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThConvexGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { NormalBufferAttributes, Vector3 } from 'three'; 12 | import { ConvexGeometry } from 'three/examples/jsm/geometries/ConvexGeometry.js'; 13 | import { ThBufferGeometry } from './ThBufferGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-convexGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThConvexGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThConvexGeometry< 28 | T extends ConvexGeometry = ConvexGeometry, 29 | TARGS = /* points? */ Vector3[], 30 | > extends ThBufferGeometry { 31 | public getType(): Type { 32 | return ConvexGeometry; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThDecalGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { Euler, Mesh, NormalBufferAttributes, Vector3 } from 'three'; 12 | import { DecalGeometry } from 'three/examples/jsm/geometries/DecalGeometry.js'; 13 | import { ThBufferGeometry } from './ThBufferGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-decalGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThDecalGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThDecalGeometry< 28 | T extends DecalGeometry = DecalGeometry, 29 | TARGS = [ 30 | mesh?: Mesh, 31 | position?: Vector3, 32 | orientation?: Euler, 33 | size?: Vector3, 34 | ], 35 | > extends ThBufferGeometry { 36 | public getType(): Type { 37 | return DecalGeometry; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThDodecahedronGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { DodecahedronGeometry } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | import { ThPolyhedronGeometry } from './ThPolyhedronGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-dodecahedronGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThDodecahedronGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThDodecahedronGeometry< 28 | T extends DodecahedronGeometry = DodecahedronGeometry, 29 | TARGS = [radius?: number, detail?: number], 30 | > extends ThPolyhedronGeometry { 31 | public getType(): Type { 32 | return DodecahedronGeometry; 33 | } 34 | 35 | public get type(): (string | 'DodecahedronGeometry') | undefined { 36 | return this._objRef?.type; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThEdgesGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { EdgesGeometry, NormalBufferAttributes } from 'three'; 12 | import { BufferGeometry } from 'three/src/core/BufferGeometry.js'; 13 | import { ThBufferGeometry } from './ThBufferGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-edgesGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThEdgesGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThEdgesGeometry< 28 | TBufferGeometry extends BufferGeometry = BufferGeometry, 29 | T extends EdgesGeometry = EdgesGeometry, 30 | TARGS = [geometry?: TBufferGeometry | null, thresholdAngle?: number], 31 | > extends ThBufferGeometry { 32 | public getType(): Type> { 33 | return EdgesGeometry; 34 | } 35 | 36 | public get type(): (string | 'EdgesGeometry') | undefined { 37 | return this._objRef?.type; 38 | } 39 | public get parameters(): 40 | | { 41 | readonly geometry: TBufferGeometry | null; 42 | readonly thresholdAngle: number; 43 | } 44 | | undefined { 45 | return this._objRef?.parameters; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThExtrudeGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { 12 | ExtrudeGeometry, 13 | ExtrudeGeometryOptions, 14 | NormalBufferAttributes, 15 | } from 'three'; 16 | import { Shape } from 'three/src/extras/core/Shape.js'; 17 | import { ThBufferGeometry } from './ThBufferGeometry'; 18 | 19 | @Component({ 20 | selector: 'th-extrudeGeometry', 21 | template: '', 22 | changeDetection: ChangeDetectionStrategy.OnPush, 23 | providers: [ 24 | { 25 | provide: ThBufferGeometry, 26 | useExisting: forwardRef(() => ThExtrudeGeometry), 27 | }, 28 | ], 29 | standalone: false 30 | }) 31 | export class ThExtrudeGeometry< 32 | T extends ExtrudeGeometry = ExtrudeGeometry, 33 | TARGS = [shapes?: Shape | Shape[], options?: ExtrudeGeometryOptions], 34 | > extends ThBufferGeometry { 35 | public getType(): Type { 36 | return ExtrudeGeometry; 37 | } 38 | 39 | public get type(): (string | 'ExtrudeGeometry') | undefined { 40 | return this._objRef?.type; 41 | } 42 | public get parameters(): 43 | | { 44 | readonly shapes: Shape | Shape[]; 45 | readonly options: ExtrudeGeometryOptions; 46 | } 47 | | undefined { 48 | return this._objRef?.parameters; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThGridHelper.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { GridHelper, Object3DEventMap } from 'three'; 12 | import { BufferGeometry } from 'three/src/core/BufferGeometry.js'; 13 | import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial.js'; 14 | import { ColorRepresentation } from 'three/src/math/Color.js'; 15 | import { ThLineSegments } from './ThLineSegments'; 16 | import { ThObject3D } from './ThObject3D'; 17 | 18 | @Component({ 19 | selector: 'th-gridHelper', 20 | template: '', 21 | changeDetection: ChangeDetectionStrategy.OnPush, 22 | providers: [ 23 | { provide: ThObject3D, useExisting: forwardRef(() => ThGridHelper) }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThGridHelper< 28 | T extends GridHelper = GridHelper, 29 | TARGS = [ 30 | size?: number, 31 | divisions?: number, 32 | color1?: ColorRepresentation, 33 | color2?: ColorRepresentation, 34 | ], 35 | > extends ThLineSegments< 36 | BufferGeometry, 37 | LineBasicMaterial, 38 | Object3DEventMap, 39 | T, 40 | TARGS 41 | > { 42 | public getType(): Type { 43 | return GridHelper; 44 | } 45 | 46 | public get type(): (string | 'GridHelper') | undefined { 47 | return this._objRef?.type; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThGroup.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { Group } from 'three'; 12 | import { Object3DEventMap } from 'three/src/core/Object3D.js'; 13 | import { ThObject3D } from './ThObject3D'; 14 | 15 | @Component({ 16 | selector: 'th-group', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [{ provide: ThObject3D, useExisting: forwardRef(() => ThGroup) }], 20 | standalone: false 21 | }) 22 | export class ThGroup< 23 | TEventMap extends Object3DEventMap = Object3DEventMap, 24 | T extends Group = Group, 25 | TARGS = [], 26 | > extends ThObject3D { 27 | public getType(): Type> { 28 | return Group; 29 | } 30 | 31 | public get isGroup(): true | undefined { 32 | return this._objRef?.isGroup; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThIcosahedronGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { IcosahedronGeometry } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | import { ThPolyhedronGeometry } from './ThPolyhedronGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-icosahedronGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThIcosahedronGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThIcosahedronGeometry< 28 | T extends IcosahedronGeometry = IcosahedronGeometry, 29 | TARGS = [radius?: number, detail?: number], 30 | > extends ThPolyhedronGeometry { 31 | public getType(): Type { 32 | return IcosahedronGeometry; 33 | } 34 | 35 | public get type(): (string | 'IcosahedronGeometry') | undefined { 36 | return this._objRef?.type; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThLUTPass.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/ban-types */ 3 | /* eslint-disable @typescript-eslint/naming-convention */ 4 | /* eslint-disable no-underscore-dangle */ 5 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 6 | import { 7 | ChangeDetectionStrategy, 8 | Component, 9 | Input, 10 | Type, 11 | forwardRef, 12 | } from '@angular/core'; 13 | import { Data3DTexture, DataTexture } from 'three'; 14 | import { 15 | LUTPass, 16 | LUTPassParameters, 17 | } from 'three/examples/jsm/postprocessing/LUTPass.js'; 18 | import { ThPassBase } from '../ThPassBase'; 19 | import { ThShaderPass } from './ThShaderPass'; 20 | 21 | @Component({ 22 | selector: 'th-lUTPass', 23 | template: '', 24 | changeDetection: ChangeDetectionStrategy.OnPush, 25 | providers: [ 26 | { provide: ThPassBase, useExisting: forwardRef(() => ThLUTPass) }, 27 | ], 28 | standalone: false 29 | }) 30 | export class ThLUTPass< 31 | T extends LUTPass = LUTPass, 32 | TARGS = /* params */ LUTPassParameters, 33 | > extends ThShaderPass { 34 | public getType(): Type { 35 | return LUTPass; 36 | } 37 | 38 | @Input() 39 | public set lut(value: DataTexture | Data3DTexture) { 40 | if (this._objRef) { 41 | this._objRef.lut = value; 42 | } 43 | } 44 | 45 | public get lut(): (DataTexture | Data3DTexture) | undefined { 46 | return this._objRef?.lut; 47 | } 48 | @Input() 49 | public set intensity(value: number) { 50 | if (this._objRef) { 51 | this._objRef.intensity = value; 52 | } 53 | } 54 | 55 | public get intensity(): number | undefined { 56 | return this._objRef?.intensity; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThLatheGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { LatheGeometry, NormalBufferAttributes } from 'three'; 12 | import { Vector2 } from 'three/src/math/Vector2.js'; 13 | import { ThBufferGeometry } from './ThBufferGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-latheGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThLatheGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThLatheGeometry< 28 | T extends LatheGeometry = LatheGeometry, 29 | TARGS = [ 30 | points?: Vector2[], 31 | segments?: number, 32 | phiStart?: number, 33 | phiLength?: number, 34 | ], 35 | > extends ThBufferGeometry { 36 | public getType(): Type { 37 | return LatheGeometry; 38 | } 39 | 40 | public get type(): (string | 'LatheGeometry') | undefined { 41 | return this._objRef?.type; 42 | } 43 | public get parameters(): 44 | | { 45 | readonly points: Vector2[]; 46 | readonly segments: number; 47 | readonly phiStart: number; 48 | readonly phiLength: number; 49 | } 50 | | undefined { 51 | return this._objRef?.parameters; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThLightProbe.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Input, 9 | Type, 10 | forwardRef, 11 | } from '@angular/core'; 12 | import { LightProbe, LightShadow, SphericalHarmonics3 } from 'three'; 13 | import { Vector3 } from 'three/src/math/Vector3.js'; 14 | import { applyValue } from '../util'; 15 | import { ThLight } from './ThLight'; 16 | import { ThObject3D } from './ThObject3D'; 17 | 18 | @Component({ 19 | selector: 'th-lightProbe', 20 | template: '', 21 | changeDetection: ChangeDetectionStrategy.OnPush, 22 | providers: [ 23 | { provide: ThObject3D, useExisting: forwardRef(() => ThLightProbe) }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThLightProbe< 28 | T extends LightProbe = LightProbe, 29 | TARGS = [sh?: SphericalHarmonics3, intensity?: number], 30 | > extends ThLight { 31 | public getType(): Type { 32 | return LightProbe; 33 | } 34 | 35 | public get isLightProbe(): true | undefined { 36 | return this._objRef?.isLightProbe; 37 | } 38 | @Input() 39 | public set sh(value: SphericalHarmonics3 | [coefficients: Vector3[]]) { 40 | if (this._objRef) { 41 | this._objRef.sh = applyValue(this._objRef.sh, value); 42 | } 43 | } 44 | public get sh(): SphericalHarmonics3 | undefined { 45 | return this._objRef?.sh; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThLineLoop.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { LineLoop } from 'three'; 12 | import { BufferGeometry } from 'three/src/core/BufferGeometry.js'; 13 | import { Object3DEventMap } from 'three/src/core/Object3D.js'; 14 | import { Material } from 'three/src/materials/Material.js'; 15 | import { ThLine } from './ThLine'; 16 | import { ThObject3D } from './ThObject3D'; 17 | 18 | @Component({ 19 | selector: 'th-lineLoop', 20 | template: '', 21 | changeDetection: ChangeDetectionStrategy.OnPush, 22 | providers: [ 23 | { provide: ThObject3D, useExisting: forwardRef(() => ThLineLoop) }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThLineLoop< 28 | TGeometry extends BufferGeometry = BufferGeometry, 29 | TMaterial extends Material | Material[] = Material | Material[], 30 | TEventMap extends Object3DEventMap = Object3DEventMap, 31 | T extends LineLoop = LineLoop< 32 | TGeometry, 33 | TMaterial, 34 | TEventMap 35 | >, 36 | TARGS = [geometry?: TGeometry, material?: TMaterial], 37 | > extends ThLine { 38 | public getType(): Type> { 39 | return LineLoop; 40 | } 41 | 42 | public get isLineLoop(): true | undefined { 43 | return this._objRef?.isLineLoop; 44 | } 45 | public get type(): (string | 'LineLoop') | undefined { 46 | return this._objRef?.type; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThMapControls.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { Camera } from 'three'; 12 | import { MapControls } from 'three/examples/jsm/controls/MapControls.js'; 13 | import { ThControlBase } from '../ThControlBase'; 14 | import { ThOrbitControls } from './ThOrbitControls'; 15 | 16 | @Component({ 17 | selector: 'th-mapControls', 18 | template: '', 19 | changeDetection: ChangeDetectionStrategy.OnPush, 20 | providers: [ 21 | { provide: ThControlBase, useExisting: forwardRef(() => ThMapControls) }, 22 | ], 23 | standalone: false 24 | }) 25 | export class ThMapControls< 26 | T extends MapControls = MapControls, 27 | TARGS = [object: Camera, domElement?: HTMLElement], 28 | > extends ThOrbitControls { 29 | public getType(): Type { 30 | return MapControls; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThOctahedronGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { OctahedronGeometry } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | import { ThPolyhedronGeometry } from './ThPolyhedronGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-octahedronGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThOctahedronGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThOctahedronGeometry< 28 | T extends OctahedronGeometry = OctahedronGeometry, 29 | TARGS = [radius?: number, detail?: number], 30 | > extends ThPolyhedronGeometry { 31 | public getType(): Type { 32 | return OctahedronGeometry; 33 | } 34 | 35 | public get type(): (string | 'OctahedronGeometry') | undefined { 36 | return this._objRef?.type; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThPlaneGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { NormalBufferAttributes, PlaneGeometry } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | 14 | @Component({ 15 | selector: 'th-planeGeometry', 16 | template: '', 17 | changeDetection: ChangeDetectionStrategy.OnPush, 18 | providers: [ 19 | { 20 | provide: ThBufferGeometry, 21 | useExisting: forwardRef(() => ThPlaneGeometry), 22 | }, 23 | ], 24 | standalone: false 25 | }) 26 | export class ThPlaneGeometry< 27 | T extends PlaneGeometry = PlaneGeometry, 28 | TARGS = [ 29 | width?: number, 30 | height?: number, 31 | widthSegments?: number, 32 | heightSegments?: number, 33 | ], 34 | > extends ThBufferGeometry { 35 | public getType(): Type { 36 | return PlaneGeometry; 37 | } 38 | 39 | public get type(): (string | 'PlaneGeometry') | undefined { 40 | return this._objRef?.type; 41 | } 42 | public get parameters(): 43 | | { 44 | readonly width: number; 45 | readonly height: number; 46 | readonly widthSegments: number; 47 | readonly heightSegments: number; 48 | } 49 | | undefined { 50 | return this._objRef?.parameters; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThPolarGridHelper.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { 12 | BufferGeometry, 13 | Material, 14 | Object3DEventMap, 15 | PolarGridHelper, 16 | } from 'three'; 17 | import { ColorRepresentation } from 'three/src/math/Color.js'; 18 | import { ThLineSegments } from './ThLineSegments'; 19 | import { ThObject3D } from './ThObject3D'; 20 | 21 | @Component({ 22 | selector: 'th-polarGridHelper', 23 | template: '', 24 | changeDetection: ChangeDetectionStrategy.OnPush, 25 | providers: [ 26 | { provide: ThObject3D, useExisting: forwardRef(() => ThPolarGridHelper) }, 27 | ], 28 | standalone: false 29 | }) 30 | export class ThPolarGridHelper< 31 | T extends PolarGridHelper = PolarGridHelper, 32 | TARGS = [ 33 | radius?: number, 34 | radials?: number, 35 | circles?: number, 36 | divisions?: number, 37 | color1?: ColorRepresentation, 38 | color2?: ColorRepresentation, 39 | ], 40 | > extends ThLineSegments< 41 | BufferGeometry, 42 | Material | Material[], 43 | Object3DEventMap, 44 | T, 45 | TARGS 46 | > { 47 | public getType(): Type { 48 | return PolarGridHelper; 49 | } 50 | 51 | public get type(): (string | 'PolarGridHelper') | undefined { 52 | return this._objRef?.type; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThPolyhedronGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { NormalBufferAttributes, PolyhedronGeometry } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | 14 | @Component({ 15 | selector: 'th-polyhedronGeometry', 16 | template: '', 17 | changeDetection: ChangeDetectionStrategy.OnPush, 18 | providers: [ 19 | { 20 | provide: ThBufferGeometry, 21 | useExisting: forwardRef(() => ThPolyhedronGeometry), 22 | }, 23 | ], 24 | standalone: false 25 | }) 26 | export class ThPolyhedronGeometry< 27 | T extends PolyhedronGeometry = PolyhedronGeometry, 28 | TARGS = [ 29 | vertices?: number[], 30 | indices?: number[], 31 | radius?: number, 32 | detail?: number, 33 | ], 34 | > extends ThBufferGeometry { 35 | public getType(): Type { 36 | return PolyhedronGeometry; 37 | } 38 | 39 | public get type(): (string | 'PolyhedronGeometry') | undefined { 40 | return this._objRef?.type; 41 | } 42 | public get parameters(): 43 | | { 44 | readonly vertices: number[]; 45 | readonly indices: number[]; 46 | readonly radius: number; 47 | readonly detail: number; 48 | } 49 | | undefined { 50 | return this._objRef?.parameters; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThPositionalAudio.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Input, 9 | Type, 10 | forwardRef, 11 | } from '@angular/core'; 12 | import { PositionalAudio } from 'three'; 13 | import { AudioListener } from 'three/src/audio/AudioListener.js'; 14 | import { ThAudio } from './ThAudio'; 15 | import { ThObject3D } from './ThObject3D'; 16 | 17 | @Component({ 18 | selector: 'th-positionalAudio', 19 | template: '', 20 | changeDetection: ChangeDetectionStrategy.OnPush, 21 | providers: [ 22 | { provide: ThObject3D, useExisting: forwardRef(() => ThPositionalAudio) }, 23 | ], 24 | standalone: false 25 | }) 26 | export class ThPositionalAudio< 27 | T extends PositionalAudio = PositionalAudio, 28 | TARGS = /* listener */ AudioListener, 29 | > extends ThAudio { 30 | public getType(): Type { 31 | return PositionalAudio; 32 | } 33 | 34 | @Input() 35 | public set panner(value: PannerNode) { 36 | if (this._objRef) { 37 | this._objRef.panner = value; 38 | } 39 | } 40 | 41 | public get panner(): PannerNode | undefined { 42 | return this._objRef?.panner; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThRawShaderMaterial.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { RawShaderMaterial } from 'three'; 12 | import { ShaderMaterialParameters } from 'three/src/materials/ShaderMaterial.js'; 13 | import { ThMaterial } from './ThMaterial'; 14 | import { ThShaderMaterial } from './ThShaderMaterial'; 15 | 16 | @Component({ 17 | selector: 'th-rawShaderMaterial', 18 | template: '', 19 | changeDetection: ChangeDetectionStrategy.OnPush, 20 | providers: [ 21 | { provide: ThMaterial, useExisting: forwardRef(() => ThRawShaderMaterial) }, 22 | ], 23 | standalone: false 24 | }) 25 | export class ThRawShaderMaterial< 26 | T extends RawShaderMaterial = RawShaderMaterial, 27 | TARGS = /* parameters? */ ShaderMaterialParameters, 28 | > extends ThShaderMaterial { 29 | public getType(): Type { 30 | return RawShaderMaterial; 31 | } 32 | 33 | public get isRawShaderMaterial(): true | undefined { 34 | return this._objRef?.isRawShaderMaterial; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThRingGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { NormalBufferAttributes, RingGeometry } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | 14 | @Component({ 15 | selector: 'th-ringGeometry', 16 | template: '', 17 | changeDetection: ChangeDetectionStrategy.OnPush, 18 | providers: [ 19 | { 20 | provide: ThBufferGeometry, 21 | useExisting: forwardRef(() => ThRingGeometry), 22 | }, 23 | ], 24 | standalone: false 25 | }) 26 | export class ThRingGeometry< 27 | T extends RingGeometry = RingGeometry, 28 | TARGS = [ 29 | innerRadius?: number, 30 | outerRadius?: number, 31 | thetaSegments?: number, 32 | phiSegments?: number, 33 | thetaStart?: number, 34 | thetaLength?: number, 35 | ], 36 | > extends ThBufferGeometry { 37 | public getType(): Type { 38 | return RingGeometry; 39 | } 40 | 41 | public get type(): (string | 'RingGeometry') | undefined { 42 | return this._objRef?.type; 43 | } 44 | public get parameters(): 45 | | { 46 | readonly innerRadius: number; 47 | readonly outerRadius: number; 48 | readonly thetaSegments: number; 49 | readonly phiSegments: number; 50 | readonly thetaStart: number; 51 | readonly thetaLength: number; 52 | } 53 | | undefined { 54 | return this._objRef?.parameters; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThRoundedBoxGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js'; 12 | import { ThBoxGeometry } from './ThBoxGeometry'; 13 | import { ThBufferGeometry } from './ThBufferGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-roundedBoxGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThRoundedBoxGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThRoundedBoxGeometry< 28 | T extends RoundedBoxGeometry = RoundedBoxGeometry, 29 | TARGS = [ 30 | width?: number, 31 | height?: number, 32 | depth?: number, 33 | segments?: number, 34 | radius?: number, 35 | ], 36 | > extends ThBoxGeometry { 37 | public getType(): Type { 38 | return RoundedBoxGeometry; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThShapeGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { NormalBufferAttributes, ShapeGeometry } from 'three'; 12 | import { Shape } from 'three/src/extras/core/Shape.js'; 13 | import { ThBufferGeometry } from './ThBufferGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-shapeGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThShapeGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThShapeGeometry< 28 | T extends ShapeGeometry = ShapeGeometry, 29 | TARGS = [shapes?: Shape | Shape[], curveSegments?: number], 30 | > extends ThBufferGeometry { 31 | public getType(): Type { 32 | return ShapeGeometry; 33 | } 34 | 35 | public get type(): (string | 'ShapeGeometry') | undefined { 36 | return this._objRef?.type; 37 | } 38 | public get parameters(): 39 | | { 40 | readonly shapes: Shape | Shape[]; 41 | readonly curveSegments: number; 42 | } 43 | | undefined { 44 | return this._objRef?.parameters; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThTAARenderPass.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/ban-types */ 3 | /* eslint-disable @typescript-eslint/naming-convention */ 4 | /* eslint-disable no-underscore-dangle */ 5 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 6 | import { 7 | ChangeDetectionStrategy, 8 | Component, 9 | Input, 10 | Type, 11 | forwardRef, 12 | } from '@angular/core'; 13 | import { Camera, ColorRepresentation, Scene } from 'three'; 14 | import { TAARenderPass } from 'three/examples/jsm/postprocessing/TAARenderPass.js'; 15 | import { ThPassBase } from '../ThPassBase'; 16 | import { ThSSAARenderPass } from './ThSSAARenderPass'; 17 | 18 | @Component({ 19 | selector: 'th-tAARenderPass', 20 | template: '', 21 | changeDetection: ChangeDetectionStrategy.OnPush, 22 | providers: [ 23 | { provide: ThPassBase, useExisting: forwardRef(() => ThTAARenderPass) }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThTAARenderPass< 28 | T extends TAARenderPass = TAARenderPass, 29 | TARGS = [ 30 | scene: Scene, 31 | camera: Camera, 32 | clearColor?: ColorRepresentation, 33 | clearAlpha?: number, 34 | ], 35 | > extends ThSSAARenderPass { 36 | public getType(): Type { 37 | return TAARenderPass; 38 | } 39 | 40 | @Input() 41 | public set accumulate(value: boolean) { 42 | if (this._objRef) { 43 | this._objRef.accumulate = value; 44 | } 45 | } 46 | 47 | public get accumulate(): boolean | undefined { 48 | return this._objRef?.accumulate; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThTeapotGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { NormalBufferAttributes } from 'three'; 12 | import { TeapotGeometry } from 'three/examples/jsm/geometries/TeapotGeometry.js'; 13 | import { ThBufferGeometry } from './ThBufferGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-teapotGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThTeapotGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThTeapotGeometry< 28 | T extends TeapotGeometry = TeapotGeometry, 29 | TARGS = [ 30 | size?: number, 31 | segments?: number, 32 | bottom?: boolean, 33 | lid?: boolean, 34 | body?: boolean, 35 | fitLid?: boolean, 36 | blinn?: boolean, 37 | ], 38 | > extends ThBufferGeometry { 39 | public getType(): Type { 40 | return TeapotGeometry; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThTetrahedronGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { TetrahedronGeometry } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | import { ThPolyhedronGeometry } from './ThPolyhedronGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-tetrahedronGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThTetrahedronGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThTetrahedronGeometry< 28 | T extends TetrahedronGeometry = TetrahedronGeometry, 29 | TARGS = [radius?: number, detail?: number], 30 | > extends ThPolyhedronGeometry { 31 | public getType(): Type { 32 | return TetrahedronGeometry; 33 | } 34 | 35 | public get type(): (string | 'TetrahedronGeometry') | undefined { 36 | return this._objRef?.type; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThTextGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { Shape } from 'three'; 12 | import { 13 | TextGeometry, 14 | TextGeometryParameters, 15 | } from 'three/examples/jsm/geometries/TextGeometry.js'; 16 | import { ThBufferGeometry } from './ThBufferGeometry'; 17 | import { ThExtrudeGeometry } from './ThExtrudeGeometry'; 18 | 19 | @Component({ 20 | selector: 'th-textGeometry', 21 | template: '', 22 | changeDetection: ChangeDetectionStrategy.OnPush, 23 | providers: [ 24 | { 25 | provide: ThBufferGeometry, 26 | useExisting: forwardRef(() => ThTextGeometry), 27 | }, 28 | ], 29 | standalone: false 30 | }) 31 | export class ThTextGeometry< 32 | T extends TextGeometry = TextGeometry, 33 | TARGS = [text: string, parameters?: TextGeometryParameters], 34 | > extends ThExtrudeGeometry { 35 | public getType(): Type { 36 | return TextGeometry; 37 | } 38 | 39 | public get type(): (string | 'TextGeometry') | undefined { 40 | return this._objRef?.type; 41 | } 42 | public get parameters(): 43 | | { 44 | readonly shapes: Shape | Shape[]; 45 | readonly options: TextGeometryParameters; 46 | } 47 | | undefined { 48 | return this._objRef?.parameters; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThTorusGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { NormalBufferAttributes, TorusGeometry } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | 14 | @Component({ 15 | selector: 'th-torusGeometry', 16 | template: '', 17 | changeDetection: ChangeDetectionStrategy.OnPush, 18 | providers: [ 19 | { 20 | provide: ThBufferGeometry, 21 | useExisting: forwardRef(() => ThTorusGeometry), 22 | }, 23 | ], 24 | standalone: false 25 | }) 26 | export class ThTorusGeometry< 27 | T extends TorusGeometry = TorusGeometry, 28 | TARGS = [ 29 | radius?: number, 30 | tube?: number, 31 | radialSegments?: number, 32 | tubularSegments?: number, 33 | arc?: number, 34 | ], 35 | > extends ThBufferGeometry { 36 | public getType(): Type { 37 | return TorusGeometry; 38 | } 39 | 40 | public get type(): (string | 'TorusGeometry') | undefined { 41 | return this._objRef?.type; 42 | } 43 | public get parameters(): 44 | | { 45 | readonly radius: number; 46 | readonly tube: number; 47 | readonly radialSegments: number; 48 | readonly tubularSegments: number; 49 | readonly arc: number; 50 | } 51 | | undefined { 52 | return this._objRef?.parameters; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThTorusKnotGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { NormalBufferAttributes, TorusKnotGeometry } from 'three'; 12 | import { ThBufferGeometry } from './ThBufferGeometry'; 13 | 14 | @Component({ 15 | selector: 'th-torusKnotGeometry', 16 | template: '', 17 | changeDetection: ChangeDetectionStrategy.OnPush, 18 | providers: [ 19 | { 20 | provide: ThBufferGeometry, 21 | useExisting: forwardRef(() => ThTorusKnotGeometry), 22 | }, 23 | ], 24 | standalone: false 25 | }) 26 | export class ThTorusKnotGeometry< 27 | T extends TorusKnotGeometry = TorusKnotGeometry, 28 | TARGS = [ 29 | radius?: number, 30 | tube?: number, 31 | tubularSegments?: number, 32 | radialSegments?: number, 33 | p?: number, 34 | q?: number, 35 | ], 36 | > extends ThBufferGeometry { 37 | public getType(): Type { 38 | return TorusKnotGeometry; 39 | } 40 | 41 | public get type(): (string | 'TorusKnotGeometry') | undefined { 42 | return this._objRef?.type; 43 | } 44 | public get parameters(): 45 | | { 46 | readonly radius: number; 47 | readonly tube: number; 48 | readonly tubularSegments: number; 49 | readonly radialSegments: number; 50 | readonly p: number; 51 | readonly q: number; 52 | } 53 | | undefined { 54 | return this._objRef?.parameters; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/ThWireframeGeometry.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-types */ 2 | /* eslint-disable @typescript-eslint/naming-convention */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 5 | import { 6 | ChangeDetectionStrategy, 7 | Component, 8 | Type, 9 | forwardRef, 10 | } from '@angular/core'; 11 | import { NormalBufferAttributes, WireframeGeometry } from 'three'; 12 | import { BufferGeometry } from 'three/src/core/BufferGeometry.js'; 13 | import { ThBufferGeometry } from './ThBufferGeometry'; 14 | 15 | @Component({ 16 | selector: 'th-wireframeGeometry', 17 | template: '', 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | providers: [ 20 | { 21 | provide: ThBufferGeometry, 22 | useExisting: forwardRef(() => ThWireframeGeometry), 23 | }, 24 | ], 25 | standalone: false 26 | }) 27 | export class ThWireframeGeometry< 28 | TBufferGeometry extends BufferGeometry = BufferGeometry, 29 | T extends 30 | WireframeGeometry = WireframeGeometry, 31 | TARGS = /* geometry? */ TBufferGeometry, 32 | > extends ThBufferGeometry { 33 | public getType(): Type> { 34 | return WireframeGeometry; 35 | } 36 | 37 | public get type(): (string | 'WireframeGeometry') | undefined { 38 | return this._objRef?.type; 39 | } 40 | public get parameters(): 41 | | { 42 | readonly geometry: TBufferGeometry; 43 | } 44 | | undefined { 45 | return this._objRef?.parameters; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/overrides/ThCSS2DObject.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/naming-convention */ 2 | /* eslint-disable no-underscore-dangle */ 3 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 4 | import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, inject, Type } from '@angular/core'; 5 | import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'; 6 | import { ThCSS2DObjectGen } from '../ThCSS2DObjectGen'; 7 | import { ThObject3D } from '../ThObject3D'; 8 | 9 | @Component({ 10 | selector: 'th-cSS2DObject', 11 | template: '', 12 | styles: [ 13 | ` 14 | :host { 15 | display: inline-block; 16 | } 17 | `, 18 | ], 19 | changeDetection: ChangeDetectionStrategy.OnPush, 20 | providers: [{ provide: ThObject3D, useExisting: forwardRef(() => ThCSS2DObject) }], 21 | standalone: false 22 | }) 23 | export class ThCSS2DObject< 24 | T extends CSS2DObject = CSS2DObject, 25 | TARGS = /* element */ HTMLElement, 26 | > extends ThCSS2DObjectGen { 27 | elementRef = inject(ElementRef); 28 | 29 | public getType(): Type { 30 | return CSS2DObject; 31 | } 32 | 33 | public override createThreeInstance(args?: unknown) { 34 | return super.createThreeInstance(args ?? this.elementRef?.nativeElement); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generated/overrides/ThCSS3DObject.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/naming-convention */ 2 | /* eslint-disable no-underscore-dangle */ 3 | /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */ 4 | import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, inject, Type } from '@angular/core'; 5 | import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'; 6 | import { ThObject3D } from '../ThObject3D'; 7 | import { ThCSS3DObjectGen } from '../ThCSS3DObjectGen'; 8 | 9 | @Component({ 10 | selector: 'th-cSS3DObject', 11 | template: '', 12 | changeDetection: ChangeDetectionStrategy.OnPush, 13 | styles: [ 14 | ` 15 | :host { 16 | display: inline-block; 17 | } 18 | `, 19 | ], 20 | providers: [{ provide: ThObject3D, useExisting: forwardRef(() => ThCSS3DObject) }], 21 | standalone: false 22 | }) 23 | export class ThCSS3DObject< 24 | T extends CSS3DObject = CSS3DObject, 25 | TARGS = /* element */ HTMLElement, 26 | > extends ThCSS3DObjectGen { 27 | elementRef = inject(ElementRef); 28 | 29 | public getType(): Type { 30 | return CSS3DObject; 31 | } 32 | 33 | public override createThreeInstance(args?: unknown) { 34 | return super.createThreeInstance(args ?? this.elementRef?.nativeElement); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generator/NgxThreeBarrelGen.ts: -------------------------------------------------------------------------------- 1 | import { NgxThreeClass } from './NgxThreeClass'; 2 | import { NgxThreeOverrideStub } from './NgxThreeOverrideStub'; 3 | 4 | export class NgxThreeBarrelGen { 5 | public content = ''; 6 | public generate(classes: NgxThreeClass[]) { 7 | const exports: string[] = []; 8 | classes.map((c) => { 9 | exports.push(`export * from './${c.className}';`); 10 | if (c.overrideStub) { 11 | exports.push(`export * from './${NgxThreeOverrideStub.OVERRIDE_SUB_PATH}${c.overrideStub.className}';`); 12 | } 13 | }); 14 | this.content = ` 15 | /* 16 | Generated, modifications will get overwritten 17 | */ 18 | 19 | ${exports.join('')} 20 | `; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generator/NgxThreeGeometry.ts: -------------------------------------------------------------------------------- 1 | import { NgxThreeClass } from './NgxThreeClass'; 2 | 3 | /** 4 | * A wrapper class generator for three.js materials 5 | */ 6 | export class NgxThreeGeometry extends NgxThreeClass { 7 | public generate() { 8 | this.imports.add("import { ThObject3D } from './ThObject3D';"); 9 | if (this.className !== 'ThBufferGeometry') { 10 | this.imports.add("import { ThBufferGeometry } from './ThBufferGeometry';"); 11 | } 12 | super.generate(); 13 | } 14 | 15 | protected generateConstructor() { 16 | if (this.className === 'Th' + this.getBaseClassName()) { 17 | return ` 18 | constructor(@SkipSelf() hostObject: ThObject3D) { 19 | super(hostObject); 20 | } 21 | `; 22 | } 23 | 24 | return ''; 25 | } 26 | 27 | protected generateProvidersArray() { 28 | if (this.className === 'ThBufferGeometry') { 29 | return '[]'; 30 | } 31 | return `[{provide: ThBufferGeometry, useExisting: forwardRef(() => ${this.className})}]`; 32 | } 33 | 34 | public getBaseClassName(): string { 35 | return 'BufferGeometry'; 36 | } 37 | 38 | public getWrapperBaseClassName(): string { 39 | return 'ThGeometryBase'; 40 | } 41 | } 42 | 43 | export class NgxThreeBufferGeometry extends NgxThreeGeometry { 44 | public getBaseClassName(): string { 45 | return 'BufferGeometry'; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generator/NgxThreeMaterial.ts: -------------------------------------------------------------------------------- 1 | import { NgxThreeClass } from './NgxThreeClass'; 2 | 3 | /** 4 | * A wrapper class generator for three.js materials 5 | */ 6 | export class NgxThreeMaterial extends NgxThreeClass { 7 | public generate() { 8 | this.imports.add("import { ThObject3D } from './ThObject3D';"); 9 | super.generate(); 10 | } 11 | 12 | protected generateConstructor() { 13 | if (this.className === 'ThMaterial') { 14 | return ` 15 | constructor(@SkipSelf() hostObject: ThObject3D) { 16 | super(hostObject); 17 | } 18 | `; 19 | } 20 | 21 | return ''; 22 | } 23 | 24 | protected generateProvidersArray() { 25 | if (this.wrappedClassName === this.getBaseClassName()) { 26 | return '[]'; 27 | } 28 | return `[{provide: ThMaterial, useExisting: forwardRef(() => ${this.className})}]`; 29 | } 30 | 31 | public getBaseClassName(): string { 32 | return 'Material'; 33 | } 34 | 35 | public getWrapperBaseClassName(): string { 36 | return 'ThMaterialBase'; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generator/NgxThreeModuleGen.ts: -------------------------------------------------------------------------------- 1 | import { NgxThreeClass } from './NgxThreeClass'; 2 | import { NgxThreeOverrideStub } from './NgxThreeOverrideStub'; 3 | 4 | export class NgxThreeModuleGen { 5 | public content = ''; 6 | public generate(classes: NgxThreeClass[]) { 7 | let strClasses = ''; 8 | const imports: string[] = []; 9 | classes.forEach((c) => { 10 | if (c.isAbstract) { 11 | return; 12 | } 13 | strClasses += c.className + ','; 14 | imports.push(`import { ${c.className} } from './${c.className}';`); 15 | if (c.overrideStub) { 16 | strClasses += c.overrideStub.className + ','; 17 | imports.push( 18 | `import { ${c.overrideStub.className} } from './${NgxThreeOverrideStub.OVERRIDE_SUB_PATH}${c.overrideStub.className}';` 19 | ); 20 | } 21 | }); 22 | 23 | this.content = ` 24 | ${imports.join('')} 25 | import { NgModule } from '@angular/core'; 26 | 27 | @NgModule({ 28 | declarations: [${strClasses}], 29 | exports: [${strClasses}], 30 | }) 31 | export class NgxThreeGeneratedModule {} 32 | `; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generator/NgxThreeTexture.ts: -------------------------------------------------------------------------------- 1 | import * as ts from 'typescript'; 2 | import { ParameterDeclaration } from 'typescript'; 3 | import { NgxThreeClass } from './NgxThreeClass'; 4 | 5 | /** 6 | * A wrapper class generator for three.js materials 7 | */ 8 | export class NgxThreeTexture extends NgxThreeClass { 9 | public generate() { 10 | this.imports.add("import { ThTextureBase } from '../ThTextureBase';"); 11 | super.generate(); 12 | } 13 | 14 | protected generateConstructor() { 15 | return ''; 16 | } 17 | 18 | protected getConstructorArgumentTypes(): string[] { 19 | const symbol = (this.classDecl as unknown as ts.Type).symbol; 20 | if (!symbol.valueDeclaration) { 21 | return []; 22 | } 23 | const constructorType = this.typeChecker.getTypeOfSymbolAtLocation(symbol, symbol.valueDeclaration); 24 | const constructSignatures = constructorType.getConstructSignatures(); 25 | 26 | if ( 27 | constructSignatures.length === 0 || 28 | (constructSignatures.length === 1 && constructSignatures[0].parameters.length === 0) 29 | ) { 30 | return []; 31 | } 32 | 33 | return constructSignatures[0].parameters.map((param) => 34 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion 35 | (param.declarations![0] as ParameterDeclaration).type!.getText() 36 | ); 37 | } 38 | 39 | protected generateProvidersArray() { 40 | return `[{provide: ThTextureBase, useExisting: forwardRef(() => ${this.className})}]`; 41 | } 42 | 43 | public getBaseClassName(): string { 44 | return ''; 45 | } 46 | 47 | public getWrapperBaseClassName(): string { 48 | return 'ThTextureBase'; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generator/control_types.ts: -------------------------------------------------------------------------------- 1 | // export * from 'three/examples/jsm/controls/ArcballControls'; 2 | export * from 'three/examples/jsm/controls/DragControls'; 3 | export * from 'three/examples/jsm/controls/FirstPersonControls'; 4 | export * from 'three/examples/jsm/controls/FlyControls'; 5 | export * from 'three/examples/jsm/controls/OrbitControls'; 6 | export * from 'three/examples/jsm/controls/MapControls'; 7 | export * from 'three/examples/jsm/controls/PointerLockControls'; 8 | export * from 'three/examples/jsm/controls/TrackballControls'; 9 | export { TransformControls } from 'three/examples/jsm/controls/TransformControls'; 10 | export { ArcballControls } from 'three/examples/jsm/controls/ArcballControls'; 11 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generator/geometry_extra_types.ts: -------------------------------------------------------------------------------- 1 | export * from 'three/examples/jsm/geometries/BoxLineGeometry'; 2 | export * from 'three/examples/jsm/geometries/ConvexGeometry'; 3 | export * from 'three/examples/jsm/geometries/DecalGeometry'; 4 | export * from 'three/examples/jsm/geometries/ParametricGeometries'; 5 | export * from 'three/examples/jsm/geometries/ParametricGeometry'; 6 | export * from 'three/examples/jsm/geometries/RoundedBoxGeometry'; 7 | export * from 'three/examples/jsm/geometries/TeapotGeometry'; 8 | export * from 'three/examples/jsm/geometries/TextGeometry'; 9 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generator/object_extra_types.ts: -------------------------------------------------------------------------------- 1 | export { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer'; 2 | export { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'; 3 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generator/overrides.ts: -------------------------------------------------------------------------------- 1 | export const GEN_OVERRIDES = ['RenderPass', 'EffectComposer', 'TransformControls', 'CSS2DObject', 'CSS3DObject']; 2 | 3 | export function isOverriddenClass(className: string) { 4 | return GEN_OVERRIDES.indexOf(className) >= 0; 5 | } 6 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/generator/utils.ts: -------------------------------------------------------------------------------- 1 | export const pascalToCamelCase = (s: string) => `${s[0].toLowerCase()}${s.slice(1)}`; 2 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/ThCubeTextureLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { CubeTexture, CubeTextureLoader, Texture } from 'three'; 3 | import { ThTexture } from '../generated/ThTexture'; 4 | import { 5 | ThCallbackLoaderService, 6 | ThCallbackLoaderBaseDirective, 7 | ThCallbackLoaderBasePipe, 8 | } from './ThCallbackLoaderBase'; 9 | 10 | @Injectable({ 11 | providedIn: 'root', 12 | }) 13 | export class CubeTextureLoaderService extends ThCallbackLoaderService { 14 | public clazz = CubeTextureLoader; 15 | } 16 | 17 | @Pipe({ 18 | name: 'loadCubeTexture', 19 | pure: true, 20 | standalone: false 21 | }) 22 | export class ThCubeTextureLoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 23 | constructor(protected service: CubeTextureLoaderService) { 24 | super(); 25 | } 26 | } 27 | 28 | @Directive({ 29 | selector: '[loadCubeTexture]', 30 | standalone: false 31 | }) 32 | export class ThCubeTextureLoaderDirective extends ThCallbackLoaderBaseDirective { 33 | constructor( 34 | @Host() protected host: ThTexture, 35 | protected zone: NgZone, 36 | protected service: CubeTextureLoaderService, 37 | ) { 38 | super(host, zone); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/ThFBXLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | 3 | import { ThObject3D } from '../generated/ThObject3D'; 4 | import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'; 5 | import { ThAsyncLoaderBaseDirective, ThAsyncLoaderBasePipe, ThAsyncLoaderService } from './ThAsyncLoaderBase'; 6 | import { Group } from 'three'; 7 | 8 | @Injectable({ 9 | providedIn: 'root', 10 | }) 11 | export class FBXLoaderService extends ThAsyncLoaderService { 12 | public clazz = FBXLoader; 13 | } 14 | 15 | @Pipe({ 16 | name: 'loadFBX', 17 | pure: true, 18 | standalone: false 19 | }) 20 | export class ThFBXLoaderPipe extends ThAsyncLoaderBasePipe implements PipeTransform { 21 | constructor(protected service: FBXLoaderService) { 22 | super(); 23 | } 24 | } 25 | 26 | @Directive({ 27 | selector: '[loadFBX]', 28 | standalone: false 29 | }) 30 | export class ThFBXLoaderDirective extends ThAsyncLoaderBaseDirective { 31 | constructor( 32 | @Host() protected host: ThObject3D, 33 | protected zone: NgZone, 34 | protected service: FBXLoaderService, 35 | ) { 36 | super(host, zone); 37 | } 38 | 39 | protected getRefFromResponse(response: Group) { 40 | return response; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/ThGLTFLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; 3 | import { ThObject3D } from '../generated/ThObject3D'; 4 | import { DRACOLoaderService } from './compressed-texture/ThDRACOLoader'; 5 | import { ThAsyncLoaderBaseDirective, ThAsyncLoaderBasePipe, ThAsyncLoaderService } from './ThAsyncLoaderBase'; 6 | 7 | @Injectable({ 8 | providedIn: 'root', 9 | }) 10 | export class GLTFLoaderService extends ThAsyncLoaderService { 11 | public clazz = GLTFLoader; 12 | 13 | constructor(protected dracoLoaderService: DRACOLoaderService) { 14 | super(); 15 | } 16 | 17 | public createLoaderInstance(): GLTFLoader { 18 | const loader = super.createLoaderInstance() as GLTFLoader; 19 | loader.setDRACOLoader(this.dracoLoaderService.createLoaderInstance()); 20 | return loader; 21 | } 22 | } 23 | 24 | @Pipe({ 25 | name: 'loadGLTF', 26 | pure: true, 27 | standalone: false 28 | }) 29 | export class ThGLTFLoaderPipe extends ThAsyncLoaderBasePipe implements PipeTransform { 30 | constructor(protected service: GLTFLoaderService) { 31 | super(); 32 | } 33 | } 34 | 35 | @Directive({ 36 | selector: '[loadGLTF]', 37 | standalone: false 38 | }) 39 | export class ThGLTFLoaderDirective extends ThAsyncLoaderBaseDirective { 40 | constructor( 41 | @Host() protected host: ThObject3D, 42 | protected zone: NgZone, 43 | protected service: GLTFLoaderService, 44 | ) { 45 | super(host, zone); 46 | } 47 | 48 | protected getRefFromResponse(response: GLTF) { 49 | return response.scene; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/ThLoaderBase.ts: -------------------------------------------------------------------------------- 1 | import { Type } from '@angular/core'; 2 | import { Loader } from 'three'; 3 | 4 | export abstract class ThLoader { 5 | public abstract readonly clazz: Type>; 6 | 7 | protected crossOrigin?: string; 8 | protected withCredentials?: boolean; 9 | 10 | public setCrossOrigin(cors: string) { 11 | this.crossOrigin = cors; 12 | } 13 | 14 | public setWithCredentials(credentials: boolean) { 15 | this.withCredentials = credentials; 16 | } 17 | 18 | public createLoaderInstance(): Loader { 19 | const loader = new this.clazz(); 20 | if (this.crossOrigin) { 21 | loader.setCrossOrigin(this.crossOrigin); 22 | } 23 | if (this.withCredentials !== undefined) { 24 | loader.setWithCredentials(this.withCredentials); 25 | } 26 | return loader; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/ThOBJLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | 3 | import { ThObject3D } from '../generated/ThObject3D'; 4 | import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'; 5 | import { ThAsyncLoaderBaseDirective, ThAsyncLoaderBasePipe, ThAsyncLoaderService } from './ThAsyncLoaderBase'; 6 | import { Group } from 'three'; 7 | 8 | @Injectable({ 9 | providedIn: 'root', 10 | }) 11 | export class OBJLoaderService extends ThAsyncLoaderService { 12 | public clazz = OBJLoader; 13 | } 14 | 15 | @Pipe({ 16 | name: 'loadObj', 17 | pure: true, 18 | standalone: false 19 | }) 20 | export class ThObjLoaderPipe extends ThAsyncLoaderBasePipe implements PipeTransform { 21 | constructor(protected service: OBJLoaderService) { 22 | super(); 23 | } 24 | } 25 | 26 | @Directive({ 27 | selector: '[loadObj]', 28 | standalone: false 29 | }) 30 | export class ThObjLoaderDirective extends ThAsyncLoaderBaseDirective { 31 | constructor( 32 | @Host() protected host: ThObject3D, 33 | protected zone: NgZone, 34 | protected service: OBJLoaderService, 35 | ) { 36 | super(host, zone); 37 | } 38 | 39 | protected getRefFromResponse(response: Group) { 40 | return response; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/ThTextureLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { Texture, TextureLoader } from 'three'; 3 | import { ThTexture } from '../generated/ThTexture'; 4 | import { 5 | ThCallbackLoaderService, 6 | ThCallbackLoaderBaseDirective, 7 | ThCallbackLoaderBasePipe, 8 | } from './ThCallbackLoaderBase'; 9 | 10 | @Injectable({ 11 | providedIn: 'root', 12 | }) 13 | export class TextureLoaderService extends ThCallbackLoaderService { 14 | public clazz = TextureLoader; 15 | } 16 | 17 | @Pipe({ 18 | name: 'loadTexture', 19 | pure: true, 20 | standalone: false 21 | }) 22 | export class ThTextureLoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 23 | constructor(protected service: TextureLoaderService) { 24 | super(); 25 | } 26 | } 27 | 28 | @Directive({ 29 | selector: '[loadTexture]', 30 | standalone: false 31 | }) 32 | export class ThTextureLoaderDirective extends ThCallbackLoaderBaseDirective { 33 | constructor( 34 | @Host() protected host: ThTexture, 35 | protected zone: NgZone, 36 | protected service: TextureLoaderService, 37 | ) { 38 | super(host, zone); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/compressed-texture/ThDDSLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { DDSLoader } from 'three/examples/jsm/loaders/DDSLoader.js'; 3 | import { ThCompressedTexture } from '../../generated/ThCompressedTexture'; 4 | import { 5 | ThCallbackLoaderService, 6 | ThCallbackLoaderBaseDirective, 7 | ThCallbackLoaderBasePipe, 8 | } from '../ThCallbackLoaderBase'; 9 | import { CompressedTexture } from 'three'; 10 | 11 | @Injectable({ 12 | providedIn: 'root', 13 | }) 14 | export class DDSLoaderService extends ThCallbackLoaderService { 15 | public clazz = DDSLoader; 16 | } 17 | 18 | @Pipe({ 19 | name: 'loadDDSTexture', 20 | pure: true, 21 | standalone: false 22 | }) 23 | export class ThDDSLoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 24 | constructor(protected service: DDSLoaderService) { 25 | super(); 26 | } 27 | } 28 | 29 | @Directive({ 30 | selector: '[loadDDSTexture]', 31 | standalone: false 32 | }) 33 | export class ThDDSLoaderDirective extends ThCallbackLoaderBaseDirective { 34 | constructor( 35 | @Host() protected host: ThCompressedTexture, 36 | protected zone: NgZone, 37 | protected service: DDSLoaderService, 38 | ) { 39 | super(host, zone); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/compressed-texture/ThDRACOLoader.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'; 3 | import { ThCallbackLoaderService } from '../ThCallbackLoaderBase'; 4 | import { BufferGeometry } from 'three'; 5 | 6 | export interface DRACODecoderConfig { 7 | type: 'js' | 'wasm'; 8 | } 9 | 10 | @Injectable({ 11 | providedIn: 'root', 12 | }) 13 | export class DRACOLoaderService extends ThCallbackLoaderService { 14 | public readonly clazz = DRACOLoader; 15 | protected decoderPath = ''; 16 | protected decoderConfig?: DRACODecoderConfig; 17 | protected workerLimit?: number; 18 | protected reuseInstance = true; 19 | 20 | protected instance?: DRACOLoader; 21 | 22 | public setDecoderPath(path: string) { 23 | this.decoderPath = path; 24 | } 25 | 26 | public setDecoderConfig(config: DRACODecoderConfig) { 27 | this.decoderConfig = config; 28 | } 29 | 30 | public setWorkerLimit(limit: number) { 31 | this.workerLimit = limit; 32 | } 33 | 34 | public setReuseInstance(reuse: boolean) { 35 | this.reuseInstance = reuse; 36 | } 37 | 38 | public createLoaderInstance(): DRACOLoader { 39 | if (this.reuseInstance && this.instance) { 40 | return this.instance; 41 | } 42 | 43 | const loader = super.createLoaderInstance() as DRACOLoader; 44 | loader.setDecoderPath(this.decoderPath); 45 | 46 | if (this.decoderConfig) { 47 | loader.setDecoderConfig(this.decoderConfig); 48 | } 49 | 50 | if (this.workerLimit) { 51 | loader.setWorkerLimit(this.workerLimit); 52 | } 53 | 54 | if (this.reuseInstance) { 55 | this.instance = loader; 56 | } 57 | 58 | return loader; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/compressed-texture/ThKTX2Loader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js'; 3 | import { ThTexture } from '../../generated/ThTexture'; 4 | import { 5 | ThCallbackLoaderService, 6 | ThCallbackLoaderBaseDirective, 7 | ThCallbackLoaderBasePipe, 8 | } from '../ThCallbackLoaderBase'; 9 | import { CompressedTexture } from 'three'; 10 | 11 | @Injectable({ 12 | providedIn: 'root', 13 | }) 14 | export class KTX2LoaderService extends ThCallbackLoaderService { 15 | public readonly clazz = KTX2Loader; 16 | 17 | protected transcoderPath = ''; 18 | 19 | public setDecoderPath(path: string) { 20 | this.transcoderPath = path; 21 | } 22 | 23 | public createLoaderInstance(): KTX2Loader { 24 | const loader = super.createLoaderInstance() as KTX2Loader; 25 | loader.setTranscoderPath(this.transcoderPath); 26 | return loader; 27 | } 28 | } 29 | 30 | @Pipe({ 31 | name: 'loadKTX2Texture', 32 | pure: true, 33 | standalone: false 34 | }) 35 | export class ThKTX2LoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 36 | constructor(protected service: KTX2LoaderService) { 37 | super(); 38 | } 39 | } 40 | 41 | @Directive({ 42 | selector: '[loadKTX2Texture]', 43 | standalone: false 44 | }) 45 | export class ThKTX2LoaderDirective extends ThCallbackLoaderBaseDirective { 46 | constructor( 47 | @Host() protected host: ThTexture, 48 | protected zone: NgZone, 49 | protected service: KTX2LoaderService, 50 | ) { 51 | super(host, zone); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/compressed-texture/ThKTXLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { KTXLoader } from 'three/examples/jsm/loaders/KTXLoader.js'; 3 | import { ThCompressedTexture } from '../../generated/ThCompressedTexture'; 4 | import { 5 | ThCallbackLoaderService, 6 | ThCallbackLoaderBaseDirective, 7 | ThCallbackLoaderBasePipe, 8 | } from '../ThCallbackLoaderBase'; 9 | import { CompressedTexture } from 'three'; 10 | 11 | @Injectable({ 12 | providedIn: 'root', 13 | }) 14 | export class KTXLoaderService extends ThCallbackLoaderService { 15 | public clazz = KTXLoader; 16 | } 17 | 18 | @Pipe({ 19 | name: 'loadKTXTexture', 20 | pure: true, 21 | standalone: false 22 | }) 23 | export class ThKTXLoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 24 | constructor(protected service: KTXLoaderService) { 25 | super(); 26 | } 27 | } 28 | 29 | @Directive({ 30 | selector: '[loadKTXTexture]', 31 | standalone: false 32 | }) 33 | export class ThKTXLoaderDirective extends ThCallbackLoaderBaseDirective { 34 | constructor( 35 | @Host() protected host: ThCompressedTexture, 36 | protected zone: NgZone, 37 | protected service: KTXLoaderService, 38 | ) { 39 | super(host, zone); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/compressed-texture/ThPVRLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { PVRLoader } from 'three/examples/jsm/loaders/PVRLoader.js'; 3 | import { ThCompressedTexture } from '../../generated/ThCompressedTexture'; 4 | import { 5 | ThCallbackLoaderService, 6 | ThCallbackLoaderBaseDirective, 7 | ThCallbackLoaderBasePipe, 8 | } from '../ThCallbackLoaderBase'; 9 | import { CompressedTexture } from 'three'; 10 | 11 | @Injectable({ 12 | providedIn: 'root', 13 | }) 14 | export class PVRLoaderService extends ThCallbackLoaderService { 15 | public clazz = PVRLoader; 16 | } 17 | 18 | @Pipe({ 19 | name: 'loadPVRTexture', 20 | pure: true, 21 | standalone: false 22 | }) 23 | export class ThPVRLoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 24 | constructor(protected service: PVRLoaderService) { 25 | super(); 26 | } 27 | } 28 | 29 | @Directive({ 30 | selector: '[loadPVRTexture]', 31 | standalone: false 32 | }) 33 | export class ThPVRLoaderDirective extends ThCallbackLoaderBaseDirective { 34 | constructor( 35 | @Host() protected host: ThCompressedTexture, 36 | protected zone: NgZone, 37 | protected service: PVRLoaderService, 38 | ) { 39 | super(host, zone); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/data-texture/ThEXRLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'; 3 | import { ThDataTexture } from '../../generated/ThDataTexture'; 4 | import { 5 | ThCallbackLoaderBaseDirective, 6 | ThCallbackLoaderBasePipe, 7 | ThCallbackLoaderService, 8 | } from '../ThCallbackLoaderBase'; 9 | import { DataTexture } from 'three'; 10 | 11 | @Injectable({ 12 | providedIn: 'root', 13 | }) 14 | export class EXRLoaderService extends ThCallbackLoaderService { 15 | public clazz = EXRLoader; 16 | } 17 | 18 | @Pipe({ 19 | name: 'loadEXRTexture', 20 | pure: true, 21 | standalone: false 22 | }) 23 | export class ThEXRLoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 24 | constructor(protected service: EXRLoaderService) { 25 | super(); 26 | } 27 | } 28 | 29 | @Directive({ 30 | selector: '[loadEXRTexture]', 31 | standalone: false 32 | }) 33 | export class ThEXRLoaderDirective extends ThCallbackLoaderBaseDirective { 34 | constructor( 35 | @Host() protected host: ThDataTexture, 36 | protected zone: NgZone, 37 | protected service: EXRLoaderService, 38 | ) { 39 | super(host, zone); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/data-texture/ThRGBELoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'; 3 | import { ThDataTexture } from '../../generated/ThDataTexture'; 4 | import { 5 | ThCallbackLoaderService, 6 | ThCallbackLoaderBaseDirective, 7 | ThCallbackLoaderBasePipe, 8 | } from '../ThCallbackLoaderBase'; 9 | import { DataTexture } from 'three'; 10 | 11 | @Injectable({ 12 | providedIn: 'root', 13 | }) 14 | export class RGBELoaderService extends ThCallbackLoaderService { 15 | public clazz = RGBELoader; 16 | } 17 | 18 | @Pipe({ 19 | name: 'loadRGBETexture', 20 | pure: true, 21 | standalone: false 22 | }) 23 | export class ThRGBELoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 24 | constructor(protected service: RGBELoaderService) { 25 | super(); 26 | } 27 | } 28 | 29 | @Directive({ 30 | selector: '[loadRGBETexture]', 31 | standalone: false 32 | }) 33 | export class ThRGBELoaderDirective extends ThCallbackLoaderBaseDirective { 34 | constructor( 35 | @Host() protected host: ThDataTexture, 36 | protected zone: NgZone, 37 | protected service: RGBELoaderService, 38 | ) { 39 | super(host, zone); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/data-texture/ThRGBMLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { RGBMLoader } from 'three/examples/jsm/loaders/RGBMLoader.js'; 3 | import { ThDataTexture } from '../../generated/ThDataTexture'; 4 | import { 5 | ThCallbackLoaderService, 6 | ThCallbackLoaderBaseDirective, 7 | ThCallbackLoaderBasePipe, 8 | } from '../ThCallbackLoaderBase'; 9 | import { DataTexture } from 'three'; 10 | 11 | @Injectable({ 12 | providedIn: 'root', 13 | }) 14 | export class RGBMLoaderService extends ThCallbackLoaderService { 15 | public clazz = RGBMLoader; 16 | } 17 | 18 | @Pipe({ 19 | name: 'loadRGBMTexture', 20 | pure: true, 21 | standalone: false 22 | }) 23 | export class ThRGBMLoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 24 | constructor(protected service: RGBMLoaderService) { 25 | super(); 26 | } 27 | } 28 | 29 | @Directive({ 30 | selector: '[loadRGBMTexture]', 31 | standalone: false 32 | }) 33 | export class ThRGBMLoaderDirective extends ThCallbackLoaderBaseDirective { 34 | constructor( 35 | @Host() protected host: ThDataTexture, 36 | protected zone: NgZone, 37 | protected service: RGBMLoaderService, 38 | ) { 39 | super(host, zone); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/data-texture/ThTGALoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { ThDataTexture } from '../../generated/ThDataTexture'; 3 | import { TGALoader } from 'three/examples/jsm/loaders/TGALoader.js'; 4 | import { 5 | ThCallbackLoaderService, 6 | ThCallbackLoaderBaseDirective, 7 | ThCallbackLoaderBasePipe, 8 | } from '../ThCallbackLoaderBase'; 9 | import { DataTexture } from 'three'; 10 | 11 | @Injectable({ 12 | providedIn: 'root', 13 | }) 14 | export class TGALoaderService extends ThCallbackLoaderService { 15 | public clazz = TGALoader; 16 | } 17 | 18 | @Pipe({ 19 | name: 'loadTGATexture', 20 | pure: true, 21 | standalone: false 22 | }) 23 | export class ThTGALoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 24 | constructor(protected service: TGALoaderService) { 25 | super(); 26 | } 27 | } 28 | 29 | @Directive({ 30 | selector: '[loadTGATexture]', 31 | standalone: false 32 | }) 33 | export class ThTGALoaderDirective extends ThCallbackLoaderBaseDirective { 34 | constructor( 35 | @Host() protected host: ThDataTexture, 36 | protected zone: NgZone, 37 | protected service: TGALoaderService, 38 | ) { 39 | super(host, zone); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/loaders/data-texture/ThUltraHDRLoader.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Host, Injectable, NgZone, Pipe, PipeTransform } from '@angular/core'; 2 | import { ThDataTexture } from '../../generated/ThDataTexture'; 3 | import { UltraHDRLoader } from 'three/examples/jsm/loaders/UltraHDRLoader.js'; 4 | import { 5 | ThCallbackLoaderBaseDirective, 6 | ThCallbackLoaderBasePipe, 7 | ThCallbackLoaderService, 8 | } from '../ThCallbackLoaderBase'; 9 | import { DataTexture } from 'three'; 10 | 11 | @Injectable({ 12 | providedIn: 'root', 13 | }) 14 | export class UltraHDRLoaderService extends ThCallbackLoaderService { 15 | public clazz = UltraHDRLoader; 16 | } 17 | 18 | @Pipe({ 19 | name: 'loadUltraHDRTexture', 20 | pure: true, 21 | standalone: false 22 | }) 23 | export class ThUltraHDRLoaderPipe extends ThCallbackLoaderBasePipe implements PipeTransform { 24 | constructor(protected service: UltraHDRLoaderService) { 25 | super(); 26 | } 27 | } 28 | 29 | @Directive({ 30 | selector: '[loadUltraHDRTexture]', 31 | standalone: false 32 | }) 33 | export class ThUltraHDRLoaderDirective extends ThCallbackLoaderBaseDirective { 34 | constructor( 35 | @Host() protected host: ThDataTexture, 36 | protected zone: NgZone, 37 | protected service: UltraHDRLoaderService, 38 | ) { 39 | super(host, zone); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/bind.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { BindPipe } from './bind.pipe'; 2 | 3 | class Test { 4 | public member = 23; 5 | public method() { 6 | return this.member; 7 | } 8 | } 9 | 10 | describe('Pipe: Bind', () => { 11 | it('create an instance', () => { 12 | const pipe = new BindPipe(); 13 | expect(pipe).toBeTruthy(); 14 | }); 15 | 16 | it('should bind a method', () => { 17 | const instance = new Test(); 18 | const pipe = new BindPipe(); 19 | 20 | const fn = instance.method; 21 | 22 | // calling fn results in wrong this scope 23 | expect(() => fn()).toThrow(); 24 | 25 | const boundFn = pipe.transform(instance.method, instance); 26 | expect(boundFn()).toBe(instance.member); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/bind.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'bind', 5 | standalone: false 6 | }) 7 | export class BindPipe implements PipeTransform { 8 | transform(methodToBind: (...anyArgs: unknown[]) => unknown, instance: unknown) { 9 | return methodToBind.bind(instance); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/clone.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { ThWrapperBase } from '../ThWrapperBase'; 2 | import { Object3D, Vector2 } from 'three'; 3 | import { ClonePipe } from './clone.pipe'; 4 | 5 | describe('ClonePipe', () => { 6 | it('should create an instance', () => { 7 | const pipe = new ClonePipe(); 8 | expect(pipe).toBeTruthy(); 9 | }); 10 | 11 | it('should clone an instance of a cloneable three.js object', () => { 12 | const pipe = new ClonePipe(); 13 | const vector = new Vector2(1, 2); 14 | const clone = pipe.transform(vector); 15 | 16 | expect(clone).toEqual(vector); 17 | }); 18 | 19 | it('should return undefined on undefined | null inputs', () => { 20 | const pipe = new ClonePipe(); 21 | let clone = pipe.transform(); 22 | expect(clone).toBeUndefined(); 23 | clone = pipe.transform(null); 24 | expect(clone).toBeUndefined(); 25 | }); 26 | 27 | it('should clone the objRef of an instance of ThWrapper', () => { 28 | const pipe = new ClonePipe(); 29 | const obj = new Object3D(); 30 | obj.name = 'TestName'; 31 | const wrapper = new ThWrapperBase(); 32 | wrapper.objRef = obj; 33 | 34 | const clone = pipe.transform(wrapper); 35 | 36 | expect(clone).toBeInstanceOf(Object3D); 37 | expect(clone?.name).toEqual(obj.name); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/clone.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { ThWrapperBase } from '../ThWrapperBase'; 3 | 4 | /** 5 | * create a clone of any "cloneable" three.js class (or from it's ngx-three warpper) 6 | */ 7 | @Pipe({ 8 | name: 'clone', 9 | standalone: false 10 | }) 11 | export class ClonePipe implements PipeTransform { 12 | transform(value?: ThWrapperBase | T | null): T | undefined { 13 | if (!value) { 14 | return; 15 | } 16 | 17 | if (value instanceof ThWrapperBase) { 18 | return value.objRef?.clone(); 19 | } else { 20 | return value.clone(); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/color.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { Color } from 'three'; 2 | import { ColorPipe } from './color.pipe'; 3 | 4 | const refColor = new Color('#aabbcc'); 5 | 6 | describe('ColorPipe', () => { 7 | it('should create an instance', () => { 8 | const pipe = new ColorPipe(); 9 | expect(pipe).toBeTruthy(); 10 | }); 11 | 12 | it('should transform a string to Color', () => { 13 | const pipe = new ColorPipe(); 14 | const color = pipe.transform('#aabbcc'); 15 | expect(color).toEqual(refColor); 16 | }); 17 | 18 | it('should transform a value to Color', () => { 19 | const pipe = new ColorPipe(); 20 | const color = pipe.transform(0xaabbcc); 21 | expect(color).toEqual(refColor); 22 | }); 23 | 24 | it('should transform an array to Color', () => { 25 | const pipe = new ColorPipe(); 26 | const color = pipe.transform([refColor.r, refColor.g, refColor.b]); 27 | expect(color).toEqual(refColor); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/color.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { Color, ColorRepresentation } from 'three'; 3 | 4 | /** 5 | * constructs a color of it's constructor parameters 6 | */ 7 | @Pipe({ 8 | name: 'color', 9 | pure: true, 10 | standalone: false 11 | }) 12 | export class ColorPipe implements PipeTransform { 13 | /* ContructorProperties does not support multiple constructors --> */ 14 | transform(args: ColorRepresentation | [r: number, g: number, b: number]): Color { 15 | if (Array.isArray(args)) { 16 | return new Color(...args); 17 | } else { 18 | return new Color(args); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/fog.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { Color } from 'three'; 2 | import { FogPipe } from './fog.pipe'; 3 | 4 | describe('FogPipe', () => { 5 | it('create a fog pipe', () => { 6 | const pipe = new FogPipe(); 7 | expect(pipe).toBeTruthy(); 8 | }); 9 | 10 | it('should transform to a fog', () => { 11 | const colorValue = 0xffbbff; 12 | const pipe = new FogPipe(); 13 | const fog = pipe.transform([colorValue, 0.1, 1000]); 14 | expect(fog.color).toEqual(new Color(colorValue)); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/fog.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { Fog } from 'three'; 3 | 4 | @Pipe({ 5 | name: 'fog', 6 | pure: true, 7 | standalone: false 8 | }) 9 | export class FogPipe implements PipeTransform { 10 | transform(args: ConstructorParameters): Fog { 11 | return new Fog(...args); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/plane.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { Vector3 } from 'three'; 4 | import { PlanePipe } from './plane.pipe'; 5 | 6 | describe('Pipe: Planee', () => { 7 | it('create an instance', () => { 8 | const pipe = new PlanePipe(); 9 | expect(pipe).toBeTruthy(); 10 | }); 11 | 12 | it('should create a plane', () => { 13 | const pipe = new PlanePipe(); 14 | 15 | const plane = pipe.transform([0, 1, 0], 3); 16 | 17 | expect(plane.constant).toBe(3); 18 | expect(plane.normal).toEqual(new Vector3(0, 1, 0)); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/plane.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { Plane, Vector3 } from 'three'; 3 | 4 | /** 5 | * creates a plane from a normal vector3 and a constant: 6 | * https://threejs.org/docs/#api/en/math/Plane 7 | */ 8 | @Pipe({ 9 | name: 'plane', 10 | standalone: false 11 | }) 12 | export class PlanePipe implements PipeTransform { 13 | transform(normal: [number, number?, number?], constant?: number) { 14 | return new Plane(new Vector3(...normal), constant); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/vector.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { Vector2Pipe, Vector3Pipe, Vector4Pipe } from './vector.pipe'; 2 | 3 | describe('VectorPipe', () => { 4 | it('create a vector2 pipe', () => { 5 | const pipe = new Vector2Pipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | 9 | it('create a vector3 pipe', () => { 10 | const pipe = new Vector3Pipe(); 11 | expect(pipe).toBeTruthy(); 12 | }); 13 | 14 | it('create a vector4 pipe', () => { 15 | const pipe = new Vector4Pipe(); 16 | expect(pipe).toBeTruthy(); 17 | }); 18 | 19 | it('should transform a vector2 pipe', () => { 20 | const pipe = new Vector2Pipe(); 21 | const vector = pipe.transform([1, 2]); 22 | expect(vector.x).toBe(1); 23 | expect(vector.y).toBe(2); 24 | }); 25 | 26 | it('should transform a vector3 pipe', () => { 27 | const pipe = new Vector3Pipe(); 28 | const vector = pipe.transform([1, 2, 3]); 29 | expect(vector.x).toBe(1); 30 | expect(vector.y).toBe(2); 31 | expect(vector.z).toBe(3); 32 | }); 33 | 34 | it('should transform a vector4 pipe', () => { 35 | const pipe = new Vector4Pipe(); 36 | const vector = pipe.transform([1, 2, 3, 4]); 37 | expect(vector.x).toBe(1); 38 | expect(vector.y).toBe(2); 39 | expect(vector.z).toBe(3); 40 | expect(vector.w).toBe(4); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/pipes/vector.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { Vector2, Vector3, Vector4 } from 'three'; 3 | 4 | /** 5 | * transform arrays to vectors 6 | */ 7 | @Pipe({ 8 | name: 'vector2', 9 | pure: true, 10 | standalone: false 11 | }) 12 | export class Vector2Pipe implements PipeTransform { 13 | transform(args: ConstructorParameters): Vector2 { 14 | return new Vector2(...args); 15 | } 16 | } 17 | 18 | @Pipe({ 19 | name: 'vector3', 20 | pure: true, 21 | standalone: false 22 | }) 23 | export class Vector3Pipe implements PipeTransform { 24 | transform(args: ConstructorParameters): Vector3 { 25 | return new Vector3(...args); 26 | } 27 | } 28 | 29 | @Pipe({ 30 | name: 'vector4', 31 | pure: true, 32 | standalone: false 33 | }) 34 | export class Vector4Pipe implements PipeTransform { 35 | transform(args: ConstructorParameters): Vector4 { 36 | return new Vector4(...args); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/renderer/th-render.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input, Output } from '@angular/core'; 2 | import { ThEngineService } from '../ThEngine.service'; 3 | import { ThAnimationLoopService } from './th-animation-loop.service'; 4 | 5 | @Directive({ 6 | selector: '[beforeRender], [onResize], [renderOnDemand]', 7 | standalone: false 8 | }) 9 | export class ThRenderDirective { 10 | constructor(private engineService: ThEngineService, private animationLoopService: ThAnimationLoopService) {} 11 | 12 | @Output() 13 | public get beforeRender() { 14 | return this.engineService.beforeRender$; 15 | } 16 | 17 | @Output() 18 | public get onResize() { 19 | return this.engineService.resize$; 20 | } 21 | 22 | @Input() 23 | public set renderOnDemand(onDemand: boolean) { 24 | if (onDemand) { 25 | this.animationLoopService.stop(); 26 | } else { 27 | this.animationLoopService.start(); 28 | } 29 | } 30 | 31 | public get renderOnDemand() { 32 | return !this.animationLoopService.isActive(); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/stats/stats.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { StatsDirective } from './stats.directive'; 2 | 3 | describe('StatsDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new StatsDirective(null as any, null as any); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/ngx-three/src/lib/stats/stats.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input, OnDestroy, OnInit } from '@angular/core'; 2 | import { ThEngineService } from '../ThEngine.service'; 3 | import Stats from 'three/examples/jsm/libs/stats.module.js'; 4 | import { Subscription } from 'rxjs'; 5 | import { ThCanvas } from '../ThCanvas'; 6 | 7 | @Directive({ 8 | selector: '[thStats]', 9 | standalone: false 10 | }) 11 | export class StatsDirective implements OnInit, OnDestroy { 12 | private stats: Stats; 13 | private renderSubscription?: Subscription; 14 | constructor( 15 | private engineService: ThEngineService, 16 | private canvas: ThCanvas, 17 | ) { 18 | this.stats = new Stats(); 19 | } 20 | ngOnDestroy(): void { 21 | if (this.renderSubscription) { 22 | this.renderSubscription.unsubscribe(); 23 | } 24 | } 25 | ngOnInit(): void { 26 | if (!this.canvas.elementRef) { 27 | throw new Error('No canvas present'); 28 | } 29 | 30 | const parentElement = this.canvas.elementRef.nativeElement; 31 | if (parentElement) { 32 | parentElement.style.position = 'relative'; 33 | this.stats.dom.style.position = 'absolute'; 34 | this.stats.showPanel(0); 35 | parentElement.appendChild(this.stats.dom); 36 | this.renderSubscription = this.engineService.beforeRender$.subscribe(() => { 37 | this.stats.update(); 38 | }); 39 | } 40 | } 41 | 42 | @Input() 43 | public set thStats(enabled: boolean) { 44 | if (!enabled) { 45 | this.stats.dom.style.visibility = 'hidden'; 46 | } else { 47 | this.stats.dom.style.visibility = 'visible'; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /projects/ngx-three/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 | import { getTestBed } from '@angular/core/testing'; 6 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 7 | 8 | // First, initialize the Angular testing environment. 9 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 10 | teardown: { destroyAfterEach: false } 11 | }); 12 | -------------------------------------------------------------------------------- /projects/ngx-three/tsconfig.generate.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "sourceMap": true, 12 | "declaration": false, 13 | "downlevelIteration": true, 14 | "experimentalDecorators": true, 15 | "moduleResolution": "node", 16 | "importHelpers": true, 17 | "target": "es2020", 18 | "module": "commonJs", 19 | "lib": ["es2020", "dom"] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/ngx-three/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "allowSyntheticDefaultImports": true, 10 | "types": [], 11 | "lib": [ 12 | "dom", 13 | "es2020" 14 | ] 15 | }, 16 | "angularCompilerOptions": { 17 | "skipTemplateCodegen": true, 18 | "strictMetadataEmit": true, 19 | "enableResourceInlining": true 20 | }, 21 | "exclude": [ 22 | "src/test.ts", 23 | "**/*.spec.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /projects/ngx-three/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/ngx-three/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "skipLibCheck": true, 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "esModuleInterop": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "sourceMap": true, 13 | "declaration": false, 14 | "experimentalDecorators": true, 15 | "moduleResolution": "node", 16 | "importHelpers": true, 17 | "target": "ES2022", 18 | "module": "es2020", 19 | "lib": [ 20 | "es2020", 21 | "dom" 22 | ], 23 | "paths": { 24 | "ngx-three": [ 25 | "projects/ngx-three/src/public-api.ts" 26 | ], 27 | "three/webgpu": ["./node_modules/@types/three/build/three.webgpu.d.ts"] 28 | }, 29 | "useDefineForClassFields": false 30 | }, 31 | "angularCompilerOptions": { 32 | "strictInjectionParameters": true, 33 | "strictInputAccessModifiers": true, 34 | "strictTemplates": true 35 | } 36 | } 37 | --------------------------------------------------------------------------------