docs: clean up more demos

Author: nartc

apps/demo/src/app/animation-keyframes/animation-keyframes.component.ts

@@ -1,6 +1,6 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
 import { injectBeforeRender, injectNgtLoader, NgtArgs, NgtCanvas, NgtPush, NgtStore } from 'angular-three';
-import { map, tap } from 'rxjs';
+import { map } from 'rxjs';
 import * as THREE from 'three';
 import { DRACOLoader, GLTFLoader, RoomEnvironment } from 'three-stdlib';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
@@ -12,7 +12,7 @@ import { DemoOrbitControls } from '../ui-orbit-controls/orbit-controls.component
         <ngt-color *args="['#bfe3dd']" attach="background" />
         <ngt-value [rawValue]="texture" attach="environment" />
 
-        <ngt-primitive *args="[model$ | ngtPush : null]" [position]="[1, 1, 0]" [scale]="0.01" />
+        <ngt-primitive *args="[model$ | ngtPush]" [position]="[1, 1, 0]" [scale]="0.01" />
 
         <demo-orbit-controls [target]="[0, 0.5, 0]" [enablePan]="false" />
     `,
@@ -37,12 +37,12 @@ export class Scene {
             (loader as GLTFLoader).setDRACOLoader(dracoLoader);
         }
     ).pipe(
-        tap((model) => {
+        map((model) => {
             const scene = model.scene;
             this.mixer = new THREE.AnimationMixer(scene);
             this.mixer.clipAction(model.animations[0]).play();
-        }),
-        map((model) => model.scene)
+            return scene;
+        })
     );
 
     constructor() {

apps/demo/src/app/animation-skinning-ik/animation-skinning-ik.component.ts

@@ -1,6 +1,15 @@
 import { NgIf } from '@angular/common';
 import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, OnDestroy, ViewChild } from '@angular/core';
-import { extend, injectBeforeRender, injectNgtLoader, NgtArgs, NgtCanvas, NgtPush, NgtStore } from 'angular-three';
+import {
+    extend,
+    injectBeforeRender,
+    injectNgtLoader,
+    NgtArgs,
+    NgtCanvas,
+    NgtPush,
+    NgtRenderState,
+    NgtStore,
+} from 'angular-three';
 import { map } from 'rxjs';
 import * as THREE from 'three';
 import { CCDIKHelper, CCDIKSolver, DRACOLoader, GLTFLoader, IKS, OrbitControls, TransformControls } from 'three-stdlib';
@@ -94,30 +103,7 @@ export class Scene implements OnDestroy {
         this.gui.add(this.config, 'turnHead').name('turn head');
         this.gui.add(this.config, 'ikSolver').name('IK Auto update');
 
-        injectBeforeRender(({ gl, scene }) => {
-            const head = this.ooi['head'];
-            const sphere = this.ooi.sphere;
-
-            if (sphere && this.cubeCamera) {
-                sphere.visible = false;
-                sphere.getWorldPosition(this.cubeCamera.nativeElement.position);
-                this.cubeCamera.nativeElement.update(gl, scene);
-                sphere.visible = true;
-            }
-
-            if (sphere && this.config.followSphere) {
-                sphere.getWorldPosition(v0);
-                this.orbitControls?.target.lerp(v0, 0.1);
-            }
-
-            if (head && sphere && this.config.turnHead) {
-                sphere.getWorldPosition(v0);
-                head.lookAt(v0);
-                head.rotation.set(head.rotation.x, head.rotation.y + Math.PI, head.rotation.z);
-            }
-
-            if (this.config.ikSolver && this.solver) this.solver.update();
-        });
+        injectBeforeRender(this.onBeforeRender.bind(this));
     }
 
     onAfterModelAttach() {
@@ -144,6 +130,31 @@ export class Scene implements OnDestroy {
         this.gui.open();
     }
 
+    private onBeforeRender({ gl, scene }: NgtRenderState) {
+        const head = this.ooi['head'];
+        const sphere = this.ooi.sphere;
+
+        if (sphere && this.cubeCamera) {
+            sphere.visible = false;
+            sphere.getWorldPosition(this.cubeCamera.nativeElement.position);
+            this.cubeCamera.nativeElement.update(gl, scene);
+            sphere.visible = true;
+        }
+
+        if (sphere && this.config.followSphere) {
+            sphere.getWorldPosition(v0);
+            this.orbitControls?.target.lerp(v0, 0.1);
+        }
+
+        if (head && sphere && this.config.turnHead) {
+            sphere.getWorldPosition(v0);
+            head.lookAt(v0);
+            head.rotation.set(head.rotation.x, head.rotation.y + Math.PI, head.rotation.z);
+        }
+
+        if (this.config.ikSolver && this.solver) this.solver.update();
+    }
+
     ngOnDestroy() {
         this.gui.domElement.remove();
     }

apps/demo/src/app/camera/camera.component.ts

@@ -181,7 +181,7 @@ export class Scene implements AfterViewInit, OnInit {
             </a>
             - cameras
             <br />
-            <b class="text-green-300">O</b> orthographic <b class="text-green-300">P</b> perspective
+            <b class="text-green-400">O</b> orthographic <b class="text-green-400">P</b> perspective
         </div>
     `,
     imports: [NgtCanvas],

apps/documentation/docs/getting-started/introduction.mdx

@@ -51,7 +51,7 @@ import { NgtCanvas } from 'angular-three';
 @Component({
     selector: 'my-app',
     standalone: true,
-    template: `<ngt-canvas [scene]="Scene" />`,
+    template: `<ngt-canvas [sceneGraph]="Scene" />`,
     imports: [NgtCanvas],
 })
 export class AppComponent {