docs: adjust porsche example to hide shadows

nartc · nartc · commit 5758b6df4c55 · 2024-09-28T22:02:03.000-05:00
diff --git a/apps/kitchen-sink/src/app/soba/porsche/model.ts b/apps/kitchen-sink/src/app/soba/porsche/model.ts
@@ -1,28 +1,30 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, input } from '@angular/core';
 import { applyProps, NgtArgs } from 'angular-three';
 import { injectGLTF } from 'angular-three-soba/loaders';
 import { Mesh } from 'three';
 import { color } from './color';
 
 @Component({
-	selector: 'app-porsche',
+	selector: 'app-porsche-model',
 	standalone: true,
 	template: `
 		<ngt-primitive *args="[model()]" [parameters]="{ position: position(), rotation: rotation(), scale: scale() }" />
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtArgs],
+	imports: [NgtArgs, NgTemplateOutlet],
 })
 export class Model {
 	position = input([0, 0, 0]);
 	rotation = input([0, 0, 0]);
 	scale = input(1);
 
-	private gltf = injectGLTF(() => './911-transformed.glb');
+	gltf = injectGLTF(() => './911-transformed.glb');
 	protected model = computed(() => {
 		const gltf = this.gltf();
 		if (!gltf) return null;
+
 		const { scene, nodes, materials } = gltf;
 
 		Object.values(nodes).forEach((node) => {
diff --git a/apps/kitchen-sink/src/app/soba/porsche/porsche.ts b/apps/kitchen-sink/src/app/soba/porsche/porsche.ts
@@ -1,11 +1,14 @@
 import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { injectBeforeRender, NgtCanvas } from 'angular-three';
+import { injectGLTF } from 'angular-three-soba/loaders';
 import { NgtsAccumulativeShadows, NgtsEnvironment, NgtsRandomizedLights } from 'angular-three-soba/staging';
 import { Vector3 } from 'three';
 import { color, colorAsHex } from './color';
 import { Lightformers } from './lightformers';
 import { Model } from './model';
 
+injectGLTF.preload(() => './911-transformed.glb');
+
 @Component({
 	standalone: true,
 	template: `
@@ -21,16 +24,20 @@ import { Model } from './model';
 		</ngt-spot-light>
 		<ngt-ambient-light [intensity]="0.5 * Math.PI" />
 
-		<app-porsche [position]="[-0.5, -0.18, 0]" [rotation]="[0, Math.PI / 5, 0]" [scale]="1.6" />
+		<app-porsche-model #model [position]="[-0.5, -0.18, 0]" [rotation]="[0, Math.PI / 5, 0]" [scale]="1.6" />
 
-		<ngts-accumulative-shadows [options]="{ position: [0, -1.16, 0], frames: 100, alphaTest: 0.9, scale: 10 }">
+		<ngts-accumulative-shadows
+			[options]="{ position: [0, -1.16, 0], frames: 100, alphaTest: 0.9, scale: 10, visible: !!model.gltf() }"
+		>
 			<ngts-randomized-lights
 				[options]="{ amount: 8, radius: 10, ambient: 0.5, position: [1, 5, -1], intensity: 1.5 * Math.PI }"
 			/>
 		</ngts-accumulative-shadows>
 
 		<ngts-environment [options]="{ background: true, blur: 1, resolution: 256, frames: Infinity }">
-			<app-lightformers * />
+			<ng-template>
+				<app-lightformers />
+			</ng-template>
 		</ngts-environment>
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
