fix(plugin): update gltf and init generator

Author: nartc

apps/examples/src/app/soba/backdrop-cable/astronaut.ts

@@ -84,11 +84,6 @@ export class Astronaut {
 		});
 
 		const objectEvents = inject(NgtObjectEvents, { host: true });
-		effect(() => {
-			const model = this.modelRef()?.nativeElement;
-			if (!model) return;
-
-			objectEvents.ngtObjectEvents.set(model);
-		});
+		objectEvents.ngtObjectEvents.set(this.modelRef);
 	}
 }

apps/examples/src/app/soba/backdrop-cable/scene.ts

@@ -32,7 +32,7 @@ import { Spaceship } from './spaceship';
 
 		<ngts-float [options]="{ scale: 0.75, position: [0, 0.65, 0], rotation: [0, 0.6, 0] }">
 			<ngts-pivot-controls [options]="{ anchor: [0, 0.7, 0], depthTest: true, scale: 0.5, lineWidth: 2 }">
-				<app-spaceship />
+				<app-spaceship (click)="onClick()" />
 			</ngts-pivot-controls>
 		</ngts-float>
 
@@ -82,4 +82,8 @@ export class SceneGraph {
 
 	private spaceship = viewChild.required(Spaceship);
 	protected spaceshipModelRef = computed(() => this.spaceship().modelRef());
+
+	onClick() {
+		console.log('Spaceship clicked!');
+	}
 }

apps/examples/src/app/soba/backdrop-cable/spaceship.ts

@@ -106,11 +106,6 @@ export class Spaceship {
 		});
 
 		const objectEvents = inject(NgtObjectEvents, { host: true });
-		effect(() => {
-			const model = this.modelRef()?.nativeElement;
-			if (!model) return;
-
-			objectEvents.ngtObjectEvents.set(model);
-		});
+		objectEvents.ngtObjectEvents.set(this.modelRef);
 	}
 }

libs/plugin/src/generators/gltf/files/__fileName__.ts__tmpl__

@@ -7,8 +7,8 @@
 
 import type * as THREE from 'three';
 import { Group<%= threeImports %> } from 'three';
-import { extend, type NgtThreeElements, NgtObjectEvents<% if (args) { %>, NgtArgs<% } %>  } from 'angular-three';
-import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, input, viewChild, ElementRef, inject, effect<% if (animations.length) { %>, model<% } %> } from '@angular/core';
+import { extend, type NgtThreeElements, NgtElementEvents, NgtObjectEvents<% if (args) { %>, NgtArgs<% } %>  } from 'angular-three';
+import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, input, viewChild, ElementRef, inject<% if (animations.length) { %>, effect, model<% } %> } from '@angular/core';
 import { gltfResource } from 'angular-three-soba/loaders';
 import type { GLTF } from 'three-stdlib';<% if (animations.length) { %>
 import { animations, type NgtsAnimationClips, type NgtsAnimationApi } from 'angular-three-soba/misc';<% } %><% if (perspective) { %>
@@ -58,6 +58,10 @@ export type <%= gltfResultTypeName %> = GLTF & {
       directive: NgtObjectEvents,
       outputs: ['click', 'dblclick', 'contextmenu', 'pointerup', 'pointerdown', 'pointerover', 'pointerout', 'pointerenter', 'pointerleave', 'pointermove', 'pointermissed', 'pointercancel', 'wheel'],
     },
+    {
+      directive: NgtElementEvents,
+      outputs: ['attached', 'updated', 'created', 'disposed']
+    }
   ],<% if (angularImports.length) { %>
   imports: [<% angularImports.join(', ') %>]<% } %>
 })
@@ -83,11 +87,9 @@ export class <%= className %> {
     <% } %>
 
     const objectEvents = inject(NgtObjectEvents, { host: true });
-    effect(() => {
-        const model = this.modelRef()?.nativeElement;
-        if (!model) return;
+    const elementEvents = inject(NgtElementEvents, { host: true });
 
-        objectEvents.ngtObjectEvents.set(model);
-    });
+    objectEvents.ngtObjectEvents.set(this.modelRef);
+    elementEvents.ngtElementEvents.set(this.modelRef);
   }
 }

libs/plugin/src/generators/init/files/scene-graph.ts__tmpl__

@@ -1,5 +1,5 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component, viewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';
-import { extend, injectBeforeRender } from 'angular-three';
+import { extend, beforeRender } from 'angular-three';
 import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
 
 @Component({
@@ -19,7 +19,7 @@ export class SceneGraph {
   constructor() {
     extend({ Mesh, BoxGeometry, MeshBasicMaterial });
 
-    injectBeforeRender(({ delta }) => {
+    beforeRender(({ delta }) => {
       const mesh = this.meshRef().nativeElement;
       mesh.rotation.x += delta;
       mesh.rotation.y += delta;

libs/plugin/src/versions.ts

@@ -1,7 +1,7 @@
 export const ANGULAR_THREE_VERSION = 'next';
-export const THREE_VERSION = '^0.173.0';
-export const THREE_TYPE_VERSION = '^0.173.0';
-export const NGXTENSION_VERSION = '^4.0.0';
+export const THREE_VERSION = '^0.178.0';
+export const THREE_TYPE_VERSION = '^0.178.0';
+export const NGXTENSION_VERSION = '^5.0.0';
 
 export const PEER_DEPENDENCIES: Record<string, Record<string, string>> = {
 	'angular-three-soba': {