chore: clean up

Author: Chau Tran

apps/.gitkeep

@@ -1,3 +1,4 @@
+import { RouteMeta } from '@analogjs/router';
 import { CUSTOM_ELEMENTS_SCHEMA, Component, computed, inject } from '@angular/core';
 import { NgtArgs, NgtCanvas, NgtStore } from 'angular-three';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
@@ -7,6 +8,10 @@ import { NgtsStats } from 'angular-three-soba/performance';
 import * as THREE from 'three';
 import { RoomEnvironment } from 'three-stdlib';
 
+export const routeMeta: RouteMeta = {
+    title: 'THREE.js Animation keyframes',
+};
+
 @Component({
     standalone: true,
     templateUrl: 'scene.html',

apps/sandbox/src/app/pages/animation-keyframes/index.page.ts

@@ -1,3 +1,4 @@
+import { RouteMeta } from '@analogjs/router';
 import {
     AfterViewInit,
     CUSTOM_ELEMENTS_SCHEMA,
@@ -12,6 +13,10 @@ import {
 import { NgtArgs, NgtCanvas, NgtRenderState, NgtState, NgtStore, injectBeforeRender } from 'angular-three';
 import * as THREE from 'three';
 
+export const routeMeta: RouteMeta = {
+    title: 'THREE.js Camera',
+};
+
 @Component({
     standalone: true,
     templateUrl: 'scene.html',

apps/sandbox/src/app/pages/camera/index.page.ts

@@ -0,0 +1 @@
+<ngt-canvas [sceneGraph]="scene" [shadows]="true" [camera]="{ position: [0, 0, 20], fov: 35, near: 1, far: 40 }" />

apps/sandbox/src/app/pages/clump/index.html

@@ -0,0 +1,82 @@
+import { RouteMeta } from '@analogjs/router';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Directive } from '@angular/core';
+import { NgtArgs, NgtCanvas, injectBeforeRender } from 'angular-three';
+import { NgtcPhysics } from 'angular-three-cannon';
+import { injectSphere } from 'angular-three-cannon/services';
+import { NgtpEffectComposer } from 'angular-three-postprocessing';
+import { NgtpBloom } from 'angular-three-postprocessing/effects';
+import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
+import { NgtsEnvironment, NgtsSky } from 'angular-three-soba/staging';
+import * as THREE from 'three';
+
+export const routeMeta: RouteMeta = {
+    title: 'Object Clump w/ Physics',
+};
+
+@Directive({ selector: 'clump-pointer', standalone: true })
+class Pointer {
+    readonly pointerBody = injectSphere(() => ({ type: 'Kinematic', args: [3], position: [0, 0, 0] }));
+
+    constructor() {
+        injectBeforeRender(({ pointer, viewport }) => {
+            this.pointerBody.api().position.set((pointer.x * viewport.width) / 2, (pointer.y * viewport.height) / 2, 0);
+        });
+    }
+}
+
+const mat = new THREE.Matrix4();
+const vec = new THREE.Vector3();
+
+@Component({
+    selector: 'object-clump',
+    standalone: true,
+    templateUrl: 'object-clump.html',
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class ObjectClump {
+    readonly count = 40;
+    readonly texture = injectNgtsTextureLoader(() => 'cross.jpg');
+
+    readonly sphereBody = injectSphere<THREE.InstancedMesh>(() => ({
+        args: [1],
+        mass: 1,
+        angularDamping: 0.1,
+        linearDamping: 0.65,
+        position: [
+            THREE.MathUtils.randFloatSpread(20),
+            THREE.MathUtils.randFloatSpread(20),
+            THREE.MathUtils.randFloatSpread(20),
+        ],
+    }));
+
+    onBeforeRender(object: THREE.InstancedMesh) {
+        for (let i = 0; i < this.count; i++) {
+            // Get current whereabouts of the instanced sphere
+            object.getMatrixAt(i, mat);
+            // Normalize the position and multiply by a negative force.
+            // This is enough to drive it towards the center-point.
+            this.sphereBody
+                .api()
+                .at(i)
+                .applyForce(vec.setFromMatrixPosition(mat).normalize().multiplyScalar(-50).toArray(), [0, 0, 0]);
+        }
+    }
+}
+
+@Component({
+    standalone: true,
+    templateUrl: 'scene.html',
+    imports: [NgtArgs, NgtcPhysics, NgtsEnvironment, NgtsSky, NgtpEffectComposer, NgtpBloom, ObjectClump, Pointer],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class SceneGraph {}
+
+@Component({
+    standalone: true,
+    templateUrl: 'index.html',
+    imports: [NgtCanvas],
+})
+export default class Clump {
+    readonly scene = SceneGraph;
+}

apps/sandbox/src/app/pages/clump/index.page.ts

@@ -0,0 +1,16 @@
+<ngt-instanced-mesh
+    *args="[undefined, undefined, count]"
+    [ref]="sphereBody.ref"
+    [castShadow]="true"
+    [receiveShadow]="true"
+    (beforeRender)="onBeforeRender($event.object)"
+>
+    <ngt-sphere-geometry *args="[1, 32, 32]" />
+    <ngt-mesh-standard-material
+        color="red"
+        emissive="#370037"
+        [roughness]="0"
+        [envMapIntensity]="0.2"
+        [map]="texture()"
+    />
+</ngt-instanced-mesh>

apps/sandbox/src/app/pages/clump/object-clump.html

@@ -0,0 +1,18 @@
+<ngt-ambient-light [intensity]="0.25" />
+<ngt-spot-light [position]="30" [angle]="0.2" [penumbra]="1" [castShadow]="true">
+    <ngt-vector2 *args="[512, 512]" attach="shadow.mapSize" />
+</ngt-spot-light>
+<ngt-directional-light [position]="-10" [intensity]="5" color="purple" />
+
+<ngtc-physics [gravity]="[0, 2, 0]" [iterations]="10">
+    <clump-pointer />
+    <object-clump />
+</ngtc-physics>
+
+<ngts-environment files="adamsbridge.hdr" />
+
+<ngtp-effect-composer>
+    <ngtp-bloom />
+</ngtp-effect-composer>
+
+<ngts-sky />