Merge pull request #64 from demike/feat/three-upgrade2

feat/three upgrade2

Author: demike

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-three",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -35,7 +35,7 @@
     "normalize.css": "^8.0.1",
     "rxjs": "~7.8.1",
     "simplex-noise": "^4.0.1",
-    "three": "~0.165.0",
+    "three": "~0.171.0",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.10"
   },
@@ -50,7 +50,7 @@
     "@angular/compiler-cli": "^18.2.11",
     "@types/jasmine": "^4.3.5",
     "@types/node": "^20.5.3",
-    "@types/three": "^0.165.0",
+    "@types/three": "^0.171.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "acorn": ">=8",
@@ -73,4 +73,4 @@
     "typescript": "^5.4.5",
     "utility-types": "^3.10.0"
   }
-}
+}

package.json

@@ -7,7 +7,7 @@ import { ASSET_PATH } from '../assets';
 @Component({
   selector: 'app-robot',
   templateUrl: './robot.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RobotComponent {
   public readonly assetPath = ASSET_PATH + 'RobotExpressive.glb';

projects/ngx-three-demo/src/app/animation-example/robot.component.ts

@@ -20,7 +20,7 @@
   "peerDependencies": {
     "@angular/common": "^18.2.11",
     "@angular/core": "^18.2.11",
-    "three": "~0.165.0"
+    "three": "~0.171.0"
   },
   "dependencies": {
     "tslib": "^2.6.2"

projects/ngx-three/package.json

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, inject, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, Input, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { EventDispatcher } from 'three';
+import { Controls, EventDispatcher, Object3D } from 'three';
 import { ThObject3D } from './generated/ThObject3D';
 import { ThAnimationLoopService } from './renderer/th-animation-loop.service';
 import { ThCanvas } from './ThCanvas';
@@ -11,11 +11,50 @@ import { ThWrapperBase } from './ThWrapperBase';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
-export class ThControlBase<T, ARGS> extends ThWrapperBase<T, ARGS> implements OnDestroy {
+export class ThControlBase<
+    TEventMap extends object = object,
+    T extends Controls<TEventMap> = Controls<TEventMap>,
+    TARGS = [],
+  >
+  extends ThWrapperBase<T, TARGS>
+  implements OnDestroy
+{
   protected origDispatchEventMethod?: EventDispatcher['dispatchEvent'];
   protected beforeRenderSubscription?: Subscription;
   protected renderLoop = inject(ThAnimationLoopService);
 
+  @Input()
+  public set domElement(value: HTMLElement) {
+    if (this._objRef) {
+      this._objRef.domElement = value;
+    }
+  }
+
+  public get domElement(): HTMLElement | null | undefined {
+    return this._objRef?.domElement;
+  }
+
+  @Input()
+  public set object(value: Object3D) {
+    if (this._objRef) {
+      this._objRef.object = value;
+    }
+  }
+
+  public get object(): Object3D | undefined {
+    return this._objRef?.object;
+  }
+  @Input()
+  public set enabled(value: boolean) {
+    if (this._objRef) {
+      this._objRef.enabled = value;
+    }
+  }
+
+  public get enabled(): boolean | undefined {
+    return this._objRef?.enabled;
+  }
+
   constructor(
     protected _camera: ThObject3D<any>,
     protected canvas?: ThCanvas,

projects/ngx-three/src/lib/ThControlBase.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/naming-convention */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */

projects/ngx-three/src/lib/generated/ThAfterimagePass.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/naming-convention */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */
@@ -7,7 +8,8 @@ import {
   Type,
   forwardRef,
 } from '@angular/core';
-import { AmbientLight, ColorRepresentation } from 'three';
+import { AmbientLight } from 'three';
+import { ColorRepresentation } from 'three/src/math/Color.js';
 import { ThLight } from './ThLight';
 import { ThObject3D } from './ThObject3D';