Skip to content

Commit e351fd9

Browse files
nartcnartc
committed
docs(examples): update render-texture routes
1 parent c387ee0 commit e351fd9

File tree

3 files changed

+161
-10
lines changed

3 files changed

+161
-10
lines changed

‎apps/kitchen-sink-new/src/app/soba/render-texture/render-texture.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NgtCanvas, NgtCanvasContent } from 'angular-three/dom';
3+
import { SceneGraph } from './scene';
4+
5+
@Component({
6+
template: `
7+
<ngt-canvas [camera]="{ position: [5, 5, 5], fov: 25 }">
8+
<app-scene-graph *canvasContent />
9+
</ngt-canvas>
10+
`,
11+
imports: [NgtCanvas, SceneGraph, NgtCanvasContent],
12+
changeDetection: ChangeDetectionStrategy.OnPush,
13+
host: { class: 'fbo-render-texture' },
14+
})
15+
export default class RenderTexture {}

‎apps/kitchen-sink-new/src/app/soba/render-texture/scene.ts

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
computed,
7+
input,
8+
signal,
9+
viewChild,
10+
} from '@angular/core';
11+
import { NgtArgs, injectBeforeRender } 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 { NgtsContactShadows, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular-three-soba/staging';
16+
import { Mesh } from 'three';
17+
18+
@Component({
19+
selector: 'app-dodecahedron',
20+
template: `
21+
<ngt-group [position]="position()" [scale]="scale()">
22+
<ngt-mesh
23+
#mesh
24+
[name]="name()"
25+
[scale]="meshScale()"
26+
(click)="onActive()"
27+
(pointerover)="hover.set(true)"
28+
(pointerout)="hover.set(false)"
29+
>
30+
<ngt-dodecahedron-geometry *args="[0.75]" />
31+
<ngt-mesh-standard-material [color]="color()" />
32+
</ngt-mesh>
33+
</ngt-group>
34+
`,
35+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
36+
imports: [NgtArgs],
37+
changeDetection: ChangeDetectionStrategy.OnPush,
38+
})
39+
export class Dodecahedron {
40+
position = input([0, 0, 0]);
41+
scale = input(1);
42+
name = input('');
43+
44+
protected hover = signal(false);
45+
protected active = signal(false);
46+
47+
protected color = computed(() => (this.hover() ? 'hotpink' : '#5de4c7'));
48+
protected meshScale = computed(() => (this.active() ? 1.5 : 1));
49+
50+
private mesh = viewChild.required<ElementRef<Mesh>>('mesh');
51+
52+
constructor() {
53+
injectBeforeRender(() => {
54+
this.mesh().nativeElement.rotation.x += 0.01;
55+
});
56+
}
57+
58+
onActive() {
59+
this.active.update((prev) => !prev);
60+
}
61+
}
62+
63+
@Component({
64+
selector: 'app-material',
65+
template: `
66+
<ngt-mesh-standard-material>
67+
<ngts-render-texture [options]="{ anisotropy: 16 }">
68+
<ng-template renderTextureContent>
69+
<ngts-perspective-camera [options]="{ manual: true, makeDefault: true, aspect: 1, position: [0, 0, 5] }" />
70+
<ngt-color attach="background" *args="['orange']" />
71+
<ngt-ambient-light [intensity]="0.5" />
72+
<ngt-directional-light [position]="[10, 10, 5]" />
73+
<ngts-text
74+
text="hello"
75+
[options]="{
76+
font: 'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff',
77+
fontSize: 4,
78+
color: '#555',
79+
}"
80+
/>
81+
<app-dodecahedron />
82+
</ng-template>
83+
</ngts-render-texture>
84+
</ngt-mesh-standard-material>
85+
`,
86+
imports: [Dodecahedron, NgtsRenderTexture, NgtsRenderTextureContent, NgtArgs, NgtsPerspectiveCamera, NgtsText],
87+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
88+
changeDetection: ChangeDetectionStrategy.OnPush,
89+
})
90+
export class Material {
91+
private textRef = viewChild(NgtsText);
92+
93+
constructor() {
94+
injectBeforeRender(({ clock }) => {
95+
const text = this.textRef()?.troikaMesh;
96+
if (text) {
97+
text.position.x = Math.sin(clock.elapsedTime) * 2;
98+
}
99+
});
100+
}
101+
}
102+
103+
@Component({
104+
selector: 'app-cube',
105+
template: `
106+
<ngt-mesh name="the-cube">
107+
<ngt-box-geometry />
108+
<app-material />
109+
</ngt-mesh>
110+
`,
111+
imports: [Material],
112+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
113+
changeDetection: ChangeDetectionStrategy.OnPush,
114+
})
115+
export class Cube {}
116+
117+
@Component({
118+
selector: 'app-scene-graph',
119+
template: `
120+
<ngt-color *args="['#cecece']" attach="background" />
121+
<ngt-ambient-light [intensity]="0.5" />
122+
<ngt-directional-light [position]="[10, 10, 5]" [intensity]="Math.PI" />
123+
<app-cube />
124+
<app-dodecahedron [position]="[0, 1, 0]" [scale]="0.2" name="root" />
125+
<ngts-contact-shadows [options]="{ frames: 1, position: [0, -0.5, 0], blur: 1, opacity: 0.75 }" />
126+
<ngts-contact-shadows [options]="{ frames: 1, position: [0, -0.5, 0], blur: 3, color: 'orange' }" />
127+
<ngts-orbit-controls [options]="{ minPolarAngle: 0, maxPolarAngle: Math.PI / 2.1 }" />
128+
`,
129+
imports: [Cube, Dodecahedron, NgtArgs, NgtsOrbitControls, NgtsContactShadows],
130+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
131+
changeDetection: ChangeDetectionStrategy.OnPush,
132+
host: { class: 'render-texture-experience' },
133+
})
134+
export class SceneGraph {
135+
protected Math = Math;
136+
}

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,16 @@ const routes: Routes = [
1515
},
1616
},
1717
},
18-
// {
19-
// path: 'render-texture',
20-
// loadComponent: () => import('./render-texture/render-texture'),
21-
// data: {
22-
// credits: {
23-
// title: 'Render Texture',
24-
// link: 'https://codesandbox.io/p/sandbox/0z8i2c',
25-
// },
26-
// },
27-
// },
18+
{
19+
path: 'render-texture',
20+
loadComponent: () => import('./render-texture/render-texture'),
21+
data: {
22+
credits: {
23+
title: 'Render Texture',
24+
link: 'https://codesandbox.io/p/sandbox/0z8i2c',
25+
},
26+
},
27+
},
2828
// {
2929
// path: 'shaky',
3030
// loadComponent: () => import('./shaky/shaky'),

0 commit comments

Comments
 (0)