Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d9df524

Browse files
nartcnartc
committed
fix decal
1 parent e6ce306 commit d9df524

File tree

10 files changed

+221
-13
lines changed

10 files changed

+221
-13
lines changed

‎apps/kitchen-sink/public/bunny-transformed.glb

25.4 KB
Binary file not shown.

‎apps/kitchen-sink/public/three.png

16.8 KB
Loading

‎apps/kitchen-sink/src/app/soba/decal/decal.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NgtCanvas } from 'angular-three';
3+
import { Experience } from './experience';
4+
5+
@Component({
6+
standalone: true,
7+
template: `
8+
<ngt-canvas [sceneGraph]="scene" [shadows]="true" [camera]="{ position: [-2.5, 1, 10], fov: 17 }" />
9+
`,
10+
changeDetection: ChangeDetectionStrategy.OnPush,
11+
host: { class: 'decal-soba' },
12+
imports: [NgtCanvas],
13+
})
14+
export default class Decal {
15+
scene = Experience;
16+
}

‎apps/kitchen-sink/src/app/soba/decal/experience.ts

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
CUSTOM_ELEMENTS_SCHEMA,
5+
ElementRef,
6+
input,
7+
signal,
8+
Signal,
9+
viewChild,
10+
} from '@angular/core';
11+
import { extend, injectBeforeRender, NgtArgs } from 'angular-three';
12+
import { NgtsText } from 'angular-three-soba/abstractions';
13+
import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
14+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
15+
import { injectGLTF, injectTexture } from 'angular-three-soba/loaders';
16+
import { NgtsDecal } from 'angular-three-soba/misc';
17+
import {
18+
NgtsAccumulativeShadows,
19+
NgtsEnvironment,
20+
NgtsRandomizedLights,
21+
NgtsRenderTexture,
22+
NgtsRenderTextureContent,
23+
} from 'angular-three-soba/staging';
24+
import * as THREE from 'three';
25+
import { Mesh } from 'three';
26+
27+
extend(THREE);
28+
29+
@Component({
30+
selector: 'app-dodecahedron',
31+
standalone: true,
32+
template: `
33+
<ngt-group [scale]="scale()" [position]="position()">
34+
<ngt-mesh
35+
#mesh
36+
[scale]="clicked() ? 2.25 : 1.75"
37+
(click)="$event.stopPropagation(); clicked.set(!clicked())"
38+
(pointerover)="hovered.set(true)"
39+
(pointerout)="hovered.set(false)"
40+
>
41+
<ngt-dodecahedron-geometry *args="[0.75]" />
42+
<ngt-mesh-standard-material [color]="hovered() ? 'hotpink' : 'goldenrod'" />
43+
<ngts-decal [options]="{ polygonOffsetFactor: 0, position: [0, -0.2, 0.5], scale: 0.75, map: texture() }" />
44+
</ngt-mesh>
45+
</ngt-group>
46+
`,
47+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
48+
changeDetection: ChangeDetectionStrategy.OnPush,
49+
imports: [NgtArgs, NgtsDecal],
50+
})
51+
export class Dodecahedron {
52+
protected readonly Math = Math;
53+
54+
scale = input(1);
55+
position = input([0, 0, 0]);
56+
57+
texture = injectTexture(() => './three.png');
58+
59+
clicked = signal(false);
60+
hovered = signal(false);
61+
62+
meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
63+
64+
constructor() {
65+
injectBeforeRender(({ delta }) => {
66+
const mesh = this.meshRef().nativeElement;
67+
mesh.rotation.x += delta;
68+
mesh.rotation.y += delta;
69+
});
70+
}
71+
}
72+
73+
@Component({
74+
selector: 'app-bunny',
75+
standalone: true,
76+
template: `
77+
@if (gltf(); as gltf) {
78+
<ngt-mesh [castShadow]="true" [receiveShadow]="true" [geometry]="gltf.nodes.bunny.geometry" [dispose]="null">
79+
<ngt-mesh-standard-material color="black" />
80+
<ngts-decal [options]="{ position: [0, 0.9, 0.75], rotation: [-0.4, Math.PI, 0], scale: [0.9, 0.25, 1] }">
81+
<ngt-mesh-standard-material
82+
[roughness]="1"
83+
[transparent]="true"
84+
[polygonOffset]="true"
85+
[polygonOffsetFactor]="-1"
86+
>
87+
<ngts-render-texture>
88+
<ng-template renderTextureContent>
89+
<ngts-perspective-camera
90+
[options]="{ makeDefault: true, manual: true, aspect: 0.9 / 0.25, position: [0, 0, 5] }"
91+
/>
92+
<ngt-color attach="background" *args="['#af2040']" />
93+
<ngt-ambient-light [intensity]="Math.PI" />
94+
<ngt-directional-light [position]="[10, 10, 5]" />
95+
<ngts-text
96+
text="hello from soba"
97+
[options]="{ rotation: [0, Math.PI, 0], fontSize: 4, color: 'white' }"
98+
/>
99+
<app-dodecahedron />
100+
</ng-template>
101+
</ngts-render-texture>
102+
</ngt-mesh-standard-material>
103+
</ngts-decal>
104+
</ngt-mesh>
105+
}
106+
`,
107+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
108+
changeDetection: ChangeDetectionStrategy.OnPush,
109+
imports: [
110+
NgtsDecal,
111+
NgtsRenderTexture,
112+
NgtsRenderTextureContent,
113+
NgtsPerspectiveCamera,
114+
NgtArgs,
115+
NgtsText,
116+
Dodecahedron,
117+
],
118+
})
119+
export class Bunny {
120+
protected readonly Math = Math;
121+
122+
gltf = injectGLTF(() => './bunny-transformed.glb') as Signal<any | null>;
123+
124+
textRef = viewChild(NgtsText);
125+
126+
constructor() {
127+
injectBeforeRender(({ clock }) => {
128+
const text = this.textRef()?.troikaMesh();
129+
if (text) {
130+
text.position.x = Math.sin(clock.elapsedTime) * 6.5;
131+
}
132+
});
133+
}
134+
}
135+
136+
@Component({
137+
standalone: true,
138+
template: `
139+
<ngt-color attach="background" *args="['#f0f0f0']" />
140+
<ngt-ambient-light [intensity]="0.25 * Math.PI" />
141+
<ngt-spot-light [decay]="0" [position]="[10, 10, 10]" [angle]="0.15" [penumbra]="1" />
142+
<ngt-point-light [decay]="0" [position]="[-10, 0, -5]" [angle]="0.5" [intensity]="6" />
143+
<ngt-group [position]="[0, -0.75, 0]">
144+
<app-bunny />
145+
<app-dodecahedron [position]="[-0.9, 2, 0.4]" [scale]="0.1" />
146+
<ngts-accumulative-shadows
147+
[options]="{ frames: 80, color: 'black', opacity: 1, scale: 12, position: [0, 0.04, 0], alphaTest: 0.65 }"
148+
>
149+
<ngts-randomized-lights [options]="{ amount: 8, radius: 5, position: [5, 5, -10], bias: 0.001 }" />
150+
</ngts-accumulative-shadows>
151+
</ngt-group>
152+
<ngts-environment
153+
[options]="{
154+
files: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/dancing_hall_1k.hdr',
155+
background: true,
156+
blur: 1,
157+
}"
158+
/>
159+
<ngts-orbit-controls [options]="{ makeDefault: true }" />
160+
`,
161+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
162+
changeDetection: ChangeDetectionStrategy.OnPush,
163+
host: { class: 'decal-soba-experience' },
164+
imports: [
165+
NgtArgs,
166+
Bunny,
167+
Dodecahedron,
168+
NgtsAccumulativeShadows,
169+
NgtsRandomizedLights,
170+
NgtsEnvironment,
171+
NgtsOrbitControls,
172+
],
173+
})
174+
export class Experience {
175+
protected readonly Math = Math;
176+
}

‎apps/kitchen-sink/src/app/soba/lod/experience.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, Signal } from '@angular/core';
2-
import { NgtEuler, NgtVector3 } from 'angular-three';
2+
import { extend, NgtEuler, NgtVector3 } from 'angular-three';
33
import { NgtsOrbitControls } from 'angular-three-soba/controls';
44
import { injectGLTF } from 'angular-three-soba/loaders';
55
import { NgtsBakeShadows } from 'angular-three-soba/misc';
66
import { NgtsDetailed } from 'angular-three-soba/performances';
77
import { NgtsEnvironment } from 'angular-three-soba/staging';
8+
import * as THREE from 'three';
89
import { Mesh, MeshStandardMaterial } from 'three';
910
import { GLTF } from 'three-stdlib';
1011

12+
extend(THREE);
13+
1114
const positions = [...Array(800)].map(() => ({
1215
position: [40 - Math.random() * 80, 40 - Math.random() * 80, 40 - Math.random() * 80],
1316
rotation: [Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2],
@@ -67,6 +70,7 @@ export class LODBust {
6770
schemas: [CUSTOM_ELEMENTS_SCHEMA],
6871
changeDetection: ChangeDetectionStrategy.OnPush,
6972
imports: [NgtsBakeShadows, NgtsEnvironment, NgtsOrbitControls, LODBust],
73+
host: { class: 'lod-soba-experience' },
7074
})
7175
export class Experience {
7276
protected readonly Math = Math;

‎apps/kitchen-sink/src/app/soba/lod/lod.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Experience } from './experience';
1212
`,
1313
changeDetection: ChangeDetectionStrategy.OnPush,
1414
imports: [NgtCanvas, NgtsLoader, NgtsStats],
15+
host: { class: 'lod-soba' },
1516
})
1617
export default class LOD {
1718
scene = Experience;

‎apps/kitchen-sink/src/app/soba/soba.routes.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ const routes: Routes = [
2121
path: 'lod',
2222
loadComponent: () => import('./lod/lod'),
2323
},
24+
{
25+
path: 'decal',
26+
loadComponent: () => import('./decal/decal'),
27+
},
2428
{
2529
path: '',
2630
redirectTo: 'basic',

‎apps/kitchen-sink/src/app/soba/soba.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,5 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
2929
host: { class: 'soba' },
3030
})
3131
export default class Soba {
32-
examples = ['basic', 'hud', 'render-texture', 'shaky', 'lod'];
32+
examples = ['basic', 'hud', 'render-texture', 'shaky', 'lod', 'decal'];
3333
}

‎libs/soba/misc/src/lib/decal.ts

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export interface NgtsDecalOptions extends Partial<NgtMesh> {
1717
polygonOffsetFactor: number;
1818
depthTest: boolean;
1919
debug: boolean;
20-
map?: Texture;
20+
map?: Texture | null;
2121
}
2222

2323
const defaultOptions: NgtsDecalOptions = {
@@ -31,7 +31,15 @@ const defaultOptions: NgtsDecalOptions = {
3131
standalone: true,
3232
template: `
3333
<ngt-mesh #mesh [parameters]="parameters()">
34-
<ng-content />
34+
<ngt-value [rawValue]="true" attach="material.transparent" />
35+
<ngt-value [rawValue]="true" attach="material.polygonOffset" />
36+
<ngt-value [rawValue]="map()" attach="material.map" />
37+
38+
<ng-content>
39+
<!-- we only want to pass through these material properties if they don't use a custom material -->
40+
<ngt-value [rawValue]="polygonOffsetFactor()" attach="material.polygonOffsetFactor" />
41+
<ngt-value [rawValue]="depthTest()" attach="material.depthTest" />
42+
</ng-content>
3543
3644
@if (debug()) {
3745
<ngt-mesh #helper>
@@ -40,12 +48,6 @@ const defaultOptions: NgtsDecalOptions = {
4048
<ngt-axes-helper />
4149
</ngt-mesh>
4250
}
43-
44-
<ngt-value [rawValue]="true" attach="material.transparent" />
45-
<ngt-value [rawValue]="true" attach="material.polygonOffset" />
46-
<ngt-value [rawValue]="polygonOffsetFactor()" attach="material.polygonOffsetFactor" />
47-
<ngt-value [rawValue]="depthTest()" attach="material.depthTest" />
48-
<ngt-value [rawValue]="map()" attach="material.map" />
4951
</ngt-mesh>
5052
`,
5153
schemas: [CUSTOM_ELEMENTS_SCHEMA],

‎libs/soba/src/misc/decal.stories.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
viewChild,
1212
} from '@angular/core';
1313
import { Meta } from '@storybook/angular';
14-
import { NgtArgs } from 'angular-three';
14+
import { NgtArgs, NgtThreeEvent } from 'angular-three';
1515
import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
1616
import { NgtsOrbitControls } from 'angular-three-soba/controls';
1717
import { injectTexture } from 'angular-three-soba/loaders';
@@ -62,14 +62,15 @@ class LoopOverInstancedBufferAttribute {
6262
6363
<ngt-directional-light [position]="[1, -1, 1]" [intensity]="Math.PI" />
6464
65-
<ngt-mesh #mesh>
65+
<ngt-mesh #mesh (click)="onClick($any($event))">
6666
<ngt-sphere-geometry *args="[3, 32, 32]" />
6767
<ngt-mesh-physical-material color="tomato" [roughness]="0.5" />
6868
</ngt-mesh>
6969
7070
<decal-loop-over-instanced-buffer-attribute [buffer]="bufferAttribute()">
71-
<ngts-decal *="let options" [mesh]="meshRef()" [options]="options">
71+
<ngts-decal *="let options" [mesh]="$any(mesh)" [options]="options">
7272
<ngt-mesh-physical-material
73+
[roughness]="0.2"
7374
[transparent]="true"
7475
[depthTest]="false"
7576
[map]="Math.random() > 0.5 ? decals()?.reactMap : decals()?.threeMap"
@@ -107,6 +108,10 @@ class DefaultDecalStory {
107108
dummy.lookAt(p.add(normal));
108109
},
109110
}));
111+
112+
onClick(event: NgtThreeEvent<PointerEvent>) {
113+
console.log(event);
114+
}
110115
}
111116

112117
export default {

0 commit comments

Comments
 (0)