docs: add reset orbit controls

nartc · nartc · commit 4184a90a3211 · 2025-03-02T09:35:47.000-06:00
diff --git a/apps/examples/src/app/rapier/active-collision-types/active-collision-types.ts b/apps/examples/src/app/rapier/active-collision-types/active-collision-types.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, signal, vie
 import { ActiveCollisionTypes } from '@dimforge/rapier3d-compat';
 import { injectBeforeRender, NgtArgs } from 'angular-three';
 import { NgtrRigidBody } from 'angular-three-rapier';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 
 @Component({
 	selector: 'app-ball',
@@ -63,6 +64,7 @@ export class Wall {}
 			<app-wall />
 		</ngt-group>
 	`,
+	hostDirectives: [ResetOrbitControls],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	imports: [Ball, Wall],
diff --git a/apps/examples/src/app/rapier/all-colliders/all-colliders.ts b/apps/examples/src/app/rapier/all-colliders/all-colliders.ts
@@ -15,6 +15,7 @@ import {
 import { NgtsHTML } from 'angular-three-soba/misc';
 import * as THREE from 'three';
 import { RoundedBoxGeometry } from 'three-stdlib';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 import { injectSuzanne } from '../suzanne';
 
 @Component({
@@ -219,6 +220,7 @@ export class Suzanne {
 		NgtsHTML,
 		NgtArgs,
 	],
+	hostDirectives: [ResetOrbitControls],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
diff --git a/apps/examples/src/app/rapier/attractors/attractors.ts b/apps/examples/src/app/rapier/attractors/attractors.ts
@@ -3,6 +3,7 @@ import { NgtArgs, NgtVector3 } from 'angular-three';
 import { NgtrInstancedRigidBodies, NgtrInteractionGroups, NgtrRigidBody } from 'angular-three-rapier';
 import { NgtrAttractor } from 'angular-three-rapier/addons';
 import { NgtsHTML } from 'angular-three-soba/misc';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 
 @Component({
 	selector: 'app-attractors-rapier',
@@ -45,7 +46,7 @@ import { NgtsHTML } from 'angular-three-soba/misc';
 			</ngt-group>
 		</ngt-group>
 	`,
-
+	hostDirectives: [ResetOrbitControls],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	imports: [NgtrInstancedRigidBodies, NgtArgs, NgtrRigidBody, NgtrInteractionGroups, NgtsHTML, NgtrAttractor],
diff --git a/apps/examples/src/app/rapier/car/car.ts b/apps/examples/src/app/rapier/car/car.ts
@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import { injectBeforeRender, NgtArgs, NgtVector3 } from 'angular-three';
 import { injectRevoluteJoint, NgtrRigidBody } from 'angular-three-rapier';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 
 @Directive({ selector: '[rigidBody][wheel]' })
 export class WheelJoint {
@@ -57,6 +58,7 @@ export class WheelJoint {
 			}
 		</ngt-group>
 	`,
+	hostDirectives: [ResetOrbitControls],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	imports: [NgtrRigidBody, WheelJoint, NgtArgs],
diff --git a/apps/examples/src/app/rapier/cluster/cluster.ts b/apps/examples/src/app/rapier/cluster/cluster.ts
@@ -10,6 +10,7 @@ import {
 import { checkUpdate, injectBeforeRender, NgtArgs } from 'angular-three';
 import { NgtrInstancedRigidBodies, NgtrPhysics } from 'angular-three-rapier';
 import { Color, InstancedMesh, Vector3 } from 'three';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 
 const BALLS = 1000;
 
@@ -25,6 +26,7 @@ const BALLS = 1000;
 			</ngt-object3D>
 		</ngt-group>
 	`,
+	hostDirectives: [ResetOrbitControls],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'cluster-rapier' },
diff --git a/apps/examples/src/app/rapier/contact-force-events/contact-force-events.ts b/apps/examples/src/app/rapier/contact-force-events/contact-force-events.ts
@@ -11,6 +11,7 @@ import {
 import { NgtArgs } from 'angular-three';
 import { NgtrContactForcePayload, NgtrRigidBody } from 'angular-three-rapier';
 import * as THREE from 'three';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 
 // magic number: this is the start force for where the ball drops from
 // and is used to calculate the color change
@@ -87,6 +88,7 @@ export class Floor {
 			<app-floor />
 		</ngt-group>
 	`,
+	hostDirectives: [ResetOrbitControls],
 	imports: [Ball, Floor],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
diff --git a/apps/examples/src/app/rapier/instanced-mesh/instanced-mesh.ts b/apps/examples/src/app/rapier/instanced-mesh/instanced-mesh.ts
@@ -10,6 +10,7 @@ import {
 import { checkUpdate, injectStore, NgtArgs, NgtThreeEvent } from 'angular-three';
 import { NgtrInstancedRigidBodies, NgtrInstancedRigidBodyOptions } from 'angular-three-rapier';
 import { Color, InstancedMesh } from 'three';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 import { injectSuzanne } from '../suzanne';
 
 const MAX_COUNT = 2000;
@@ -37,6 +38,7 @@ const MAX_COUNT = 2000;
 			}
 		</ngt-group>
 	`,
+	hostDirectives: [ResetOrbitControls],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'instanced-mesh-rapier' },
diff --git a/apps/examples/src/app/rapier/joints/joints.ts b/apps/examples/src/app/rapier/joints/joints.ts
@@ -11,6 +11,7 @@ import {
 import { injectBeforeRender, NgtVector3 } from 'angular-three';
 import { injectPrismaticJoint, injectSphericalJoint, NgtrRigidBody, NgtrRigidBodyType } from 'angular-three-rapier';
 import { Quaternion, Vector3 } from 'three';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 
 @Component({
 	selector: 'app-rope-segment',
@@ -137,6 +138,7 @@ export class Prismatic {
 			<app-prismatic />
 		</ngt-group>
 	`,
+	hostDirectives: [ResetOrbitControls],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'joints-rapier' },
diff --git a/apps/examples/src/app/rapier/kinematics/kinematics.ts b/apps/examples/src/app/rapier/kinematics/kinematics.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, viewChild }
 import { injectBeforeRender, NgtArgs } from 'angular-three';
 import { NgtrRigidBody } from 'angular-three-rapier';
 import * as THREE from 'three';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 
 @Component({
 	selector: 'app-ball',
@@ -67,6 +68,7 @@ export class Ball {
 			</ngt-object3D>
 		</ngt-group>
 	`,
+	hostDirectives: [ResetOrbitControls],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	imports: [Ball, NgtrRigidBody, NgtArgs],
diff --git a/apps/examples/src/app/rapier/performance/performance.ts b/apps/examples/src/app/rapier/performance/performance.ts
@@ -13,6 +13,7 @@ import { NgtrRigidBody } from 'angular-three-rapier';
 import { injectGLTF } from 'angular-three-soba/loaders';
 import { Mesh, Vector3Like } from 'three';
 import { GLTF } from 'three-stdlib';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 import { injectSuzanne } from '../suzanne';
 
 @Component({
@@ -136,6 +137,7 @@ export class Bendy {
 			<app-monkey-swarm />
 		</ngt-group>
 	`,
+	hostDirectives: [ResetOrbitControls],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'performance-rapier' },
diff --git a/apps/examples/src/app/rapier/rapier.routes.ts b/apps/examples/src/app/rapier/rapier.routes.ts
@@ -1,4 +1,5 @@
 import { Routes } from '@angular/router';
+import { provideResetOrbitControls } from './reset-orbit-controls';
 
 const routes: Routes = [
 	{
@@ -11,10 +12,12 @@ const routes: Routes = [
 			},
 			{
 				path: 'rope-joint',
+				providers: [provideResetOrbitControls(50, [0, 0.25, 0.75])],
 				loadComponent: () => import('./rope-joint/rope-joint'),
 			},
 			{
 				path: 'spring',
+				providers: [provideResetOrbitControls(8)],
 				loadComponent: () => import('./spring/spring'),
 			},
 			{
@@ -23,6 +26,7 @@ const routes: Routes = [
 			},
 			{
 				path: 'instanced-mesh',
+				providers: [provideResetOrbitControls(30)],
 				loadComponent: () => import('./instanced-mesh/instanced-mesh'),
 			},
 			{
@@ -31,34 +35,42 @@ const routes: Routes = [
 			},
 			{
 				path: 'performance',
+				providers: [provideResetOrbitControls(15)],
 				loadComponent: () => import('./performance/performance'),
 			},
 			{
 				path: 'all-colliders',
+				providers: [provideResetOrbitControls(30)],
 				loadComponent: () => import('./all-colliders/all-colliders'),
 			},
 			{
 				path: 'sensors',
+				providers: [provideResetOrbitControls(30)],
 				loadComponent: () => import('./sensors/sensors'),
 			},
 			{
 				path: 'contact-force-events',
+				providers: [provideResetOrbitControls(10)],
 				loadComponent: () => import('./contact-force-events/contact-force-events'),
 			},
 			{
 				path: 'active-collision-types',
+				providers: [provideResetOrbitControls(10)],
 				loadComponent: () => import('./active-collision-types/active-collision-types'),
 			},
 			{
 				path: 'attractors',
+				providers: [provideResetOrbitControls(40)],
 				loadComponent: () => import('./attractors/attractors'),
 			},
 			{
 				path: 'kinematics',
+				providers: [provideResetOrbitControls(30)],
 				loadComponent: () => import('./kinematics/kinematics'),
 			},
 			{
 				path: 'car',
+				providers: [provideResetOrbitControls(30)],
 				loadComponent: () => import('./car/car'),
 			},
 			{
diff --git a/apps/examples/src/app/rapier/reset-orbit-controls.ts b/apps/examples/src/app/rapier/reset-orbit-controls.ts
@@ -0,0 +1,52 @@
+import { Directive, effect, inject, InjectionToken, Provider } from '@angular/core';
+import { injectStore } from 'angular-three';
+import * as THREE from 'three';
+import { OrbitControls } from 'three-stdlib';
+
+const directionVector = new THREE.Vector3();
+const RESET_ORBIT_CONTROLS_DISTANCE = new InjectionToken<number>('distance');
+const RESET_ORBIT_CONTROLS_DIR = new InjectionToken<[number, number, number]>('dir');
+
+export function provideResetOrbitControls(distance: number, dir?: [number, number, number]) {
+	const providers: Provider = [{ provide: RESET_ORBIT_CONTROLS_DISTANCE, useValue: distance }];
+
+	if (dir) {
+		providers.push({ provide: RESET_ORBIT_CONTROLS_DIR, useValue: dir });
+	}
+
+	return providers;
+}
+
+function injectResetOrbitControls() {
+	const distance = inject(RESET_ORBIT_CONTROLS_DISTANCE, { optional: true }) || 20;
+	const dir = inject(RESET_ORBIT_CONTROLS_DIR, { optional: true }) || [0, 0, 1];
+	return { distance, dir };
+}
+
+@Directive()
+export class ResetOrbitControls {
+	constructor() {
+		const { distance, dir } = injectResetOrbitControls();
+		const store = injectStore();
+
+		effect(() => {
+			const controls = store.controls() as OrbitControls;
+			if (!controls) return;
+
+			const camera = controls.object; // This is the camera that OrbitControls is controlling
+
+			// Get the current look-at target
+			const target = controls.target;
+			target.set(0, 0, 0);
+
+			// Calculate the direction vector from target to camera
+			directionVector.fromArray(dir).normalize();
+
+			// Set the new camera position
+			camera.position.copy(target).add(directionVector.multiplyScalar(distance));
+
+			// Update the controls
+			controls.update();
+		});
+	}
+}
diff --git a/apps/examples/src/app/rapier/rope-joint/rope-joint.ts b/apps/examples/src/app/rapier/rope-joint/rope-joint.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, input, viewChild } from '@angular/core';
 import { NgtArgs, NgtVector3 } from 'angular-three';
 import { injectRopeJoint, NgtrBallCollider, NgtrRigidBody } from 'angular-three-rapier';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 
 const WALL_COLORS = ['#50514F', '#CBD4C2', '#FFFCFF', '#247BA0', '#C3B299'];
 
@@ -23,7 +24,7 @@ export class Floor {}
 @Component({
 	selector: 'app-box-wall',
 	template: `
-		<ngt-group name="wall" [rotation]="[0, -0.7853982, 0]" [position]="[-1.8, 0, -1.8]">
+		<ngt-group name="wall" [rotation.y]="-0.7853982" [position]="[-1.8, 0, -1.8]">
 			@for (row of rows(); track row) {
 				@for (column of columns(); track column) {
 					<ngt-object3D rigidBody [options]="{ density: 2 }" [position]="[column, row, 0]">
@@ -104,6 +105,7 @@ export class RopeJoint {
 			<app-rope-joint [length]="35" [anchorPosition]="[0, 15, 0]" [ballPosition]="[-8, 15, 8]" />
 		</ngt-group>
 	`,
+	hostDirectives: [ResetOrbitControls],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'rope-joint-rapier' },
diff --git a/apps/examples/src/app/rapier/sensors/sensors.ts b/apps/examples/src/app/rapier/sensors/sensors.ts
@@ -4,6 +4,7 @@ import { injectBeforeRender } from 'angular-three';
 import { NgtrCuboidCollider, NgtrRigidBody } from 'angular-three-rapier';
 import { NgtsText } from 'angular-three-soba/abstractions';
 import * as THREE from 'three';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 
 const material = new THREE.MeshPhysicalMaterial();
 
@@ -96,6 +97,7 @@ export class Ball {
 			<app-ball />
 		</ngt-group>
 	`,
+	hostDirectives: [ResetOrbitControls],
 	imports: [Goal, Ball],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
diff --git a/apps/examples/src/app/rapier/spring/spring.ts b/apps/examples/src/app/rapier/spring/spring.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, i
 import { NgtArgs, NgtVector3, vector3 } from 'angular-three';
 import { injectSpringJoint, NgtrBallCollider, NgtrRigidBody } from 'angular-three-rapier';
 import { ColorRepresentation } from 'three';
+import { ResetOrbitControls } from '../reset-orbit-controls';
 
 @Component({
 	selector: 'app-box',
@@ -95,6 +96,7 @@ export class BallSpring {
 			</ngt-group>
 		}
 	`,
+	hostDirectives: [ResetOrbitControls],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'spring-rapier' },
diff --git a/apps/examples/src/app/rapier/wrapper-default.ts b/apps/examples/src/app/rapier/wrapper-default.ts
@@ -44,7 +44,7 @@ export class Floor {}
 				/>
 
 				<ngts-environment [options]="{ preset: 'apartment' }" />
-				<ngts-orbit-controls />
+				<ngts-orbit-controls [options]="{ makeDefault: true }" />
 
 				<router-outlet #o="outlet" />
 
