intersect

nartc · nartc · commit e6ce306a422c · 2024-07-27T22:44:19.000-05:00
diff --git a/libs/soba/misc/src/index.ts b/libs/soba/misc/src/index.ts
@@ -8,4 +8,5 @@ export * from './lib/depth-buffer';
 export * from './lib/fbo';
 export * from './lib/html/html';
 export * from './lib/html/html-content';
+export * from './lib/intersect';
 export * from './lib/sampler';
diff --git a/libs/soba/misc/src/lib/intersect.ts b/libs/soba/misc/src/lib/intersect.ts
@@ -0,0 +1,58 @@
+import { afterNextRender, Directive, ElementRef, inject, Injector, model, signal, WritableSignal } from '@angular/core';
+import { addAfterEffect, addEffect, resolveRef } from 'angular-three';
+import { assertInjector } from 'ngxtension/assert-injector';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { Object3D } from 'three';
+
+export function injectIntersect<TObject extends Object3D>(
+	object: () => ElementRef<TObject> | TObject | undefined | null,
+	{ injector, source = signal(false) }: { injector?: Injector; source?: WritableSignal<boolean> } = {},
+) {
+	return assertInjector(injectIntersect, injector, () => {
+		let check = false;
+		let temp = false;
+
+		const autoEffect = injectAutoEffect();
+
+		afterNextRender(() => {
+			autoEffect(() => {
+				const obj = resolveRef(object());
+				if (!obj) return;
+
+				// Stamp out frustum check pre-emptively
+				const unsub1 = addEffect(() => {
+					check = false;
+					return true;
+				});
+
+				// If the object is inside the frustum three will call onRender
+				const oldOnRender = obj.onBeforeRender.bind(obj);
+				obj.onBeforeRender = () => (check = true);
+
+				// Compare the check value against the temp value, if it differs set state
+				const unsub2 = addAfterEffect(() => {
+					if (check !== temp) source.set((temp = check));
+					return true;
+				});
+
+				return () => {
+					obj.onBeforeRender = oldOnRender;
+					unsub1();
+					unsub2();
+				};
+			});
+		});
+
+		return source.asReadonly();
+	});
+}
+
+@Directive({ standalone: true, selector: '[intersect]' })
+export class NgtsIntersect {
+	intersect = model(false);
+
+	constructor() {
+		const host = inject<ElementRef<Object3D>>(ElementRef);
+		injectIntersect(() => host, { source: this.intersect });
+	}
+}
diff --git a/libs/soba/src/controls/scroll-controls.stories.ts b/libs/soba/src/controls/scroll-controls.stories.ts
@@ -3,10 +3,12 @@ import {
 	Component,
 	computed,
 	CUSTOM_ELEMENTS_SCHEMA,
+	ElementRef,
 	inject,
 	input,
 	signal,
 	Signal,
+	viewChild,
 } from '@angular/core';
 import { Meta } from '@storybook/angular';
 import { injectBeforeRender, injectStore, NgtArgs, NgtHTML } from 'angular-three';
@@ -17,7 +19,7 @@ import {
 	NgtsScrollHtml,
 } from 'angular-three-soba/controls';
 import { injectGLTF } from 'angular-three-soba/loaders';
-import { injectAnimations } from 'angular-three-soba/misc';
+import { injectAnimations, NgtsIntersect } from 'angular-three-soba/misc';
 import { NgtsSky } from 'angular-three-soba/staging';
 import { MathUtils, Mesh } from 'three';
 import { makeDecorators, makeStoryFunction, makeStoryObject } from '../setup-canvas';
@@ -111,6 +113,8 @@ class LittlestTokyoStory {
 		<ngt-group [position]="position()" [scale]="scale()">
 			@if (gltf(); as gltf) {
 				<ngt-mesh
+					#mesh
+					[(intersect)]="isIntersect"
 					[geometry]="gltf.nodes.Suzanne.geometry"
 					(pointerover)="hovered.set(true)"
 					(pointerout)="hovered.set(false)"
@@ -123,6 +127,7 @@ class LittlestTokyoStory {
 
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtsIntersect],
 })
 class Suzanne {
 	position = input([0, 0, 0]);
@@ -131,6 +136,17 @@ class Suzanne {
 	gltf = injectGLTF(() => './suzanne.glb') as Signal<any>;
 
 	hovered = signal(false);
+	isIntersect = signal(false);
+
+	meshRef = viewChild<ElementRef<Mesh>>('mesh');
+
+	constructor() {
+		injectBeforeRender(({ delta, viewport }) => {
+			const mesh = this.meshRef()?.nativeElement;
+			if (!mesh) return;
+			mesh.rotation.x = MathUtils.damp(mesh.rotation.x, this.isIntersect() ? 0 : -viewport.height / 2 + 1, 4, delta);
+		});
+	}
 }
 
 @Component({
