Skip to content

Commit becb622

Browse files
nartcnartc
committed
docs(examples): update lowpoly routes
1 parent b8e474c commit becb622

File tree

4 files changed

+178
-13
lines changed

4 files changed

+178
-13
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ interface BustGLTF extends GLTF {
2424
<ngts-detailed [distances]="[0, 15, 25, 35, 100]" [options]="{ position: position(), rotation: rotation() }">
2525
@for (level of gltfs() || []; track $index) {
2626
<ngt-mesh
27-
[receiveShadow]="true"
28-
[castShadow]="true"
27+
castShadow
28+
receiveShadow
2929
[geometry]="level.nodes.Mesh_0001.geometry"
3030
[material]="level.materials.default"
3131
>
@@ -64,7 +64,7 @@ export class LODBust {
6464
6565
<ngt-point-light [intensity]="0.5 * Math.PI" [decay]="0" />
6666
<ngt-spot-light [position]="50" [intensity]="1.5 * Math.PI" castShadow [decay]="0" />
67-
<ngts-environment [options]="{ preset: 'city' }" />
67+
<ngts-environment [options]="{ preset: 'night' }" />
6868
<ngts-bake-shadows />
6969
`,
7070
schemas: [CUSTOM_ELEMENTS_SCHEMA],

‎apps/kitchen-sink-new/src/app/soba/lowpoly-earth/lowpoly-earth.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, 0, 0], fov: 50 }">
8+
<app-lowpoly-earth-scene-graph *canvasContent />
9+
</ngt-canvas>
10+
`,
11+
changeDetection: ChangeDetectionStrategy.OnPush,
12+
host: { class: 'lowpoly-earth-soba' },
13+
imports: [NgtCanvas, SceneGraph, NgtCanvasContent],
14+
})
15+
export default class LowpolyEarth {}

‎apps/kitchen-sink-new/src/app/soba/lowpoly-earth/scene.ts

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import { NgTemplateOutlet } from '@angular/common';
2+
import {
3+
ChangeDetectionStrategy,
4+
Component,
5+
computed,
6+
contentChild,
7+
CUSTOM_ELEMENTS_SCHEMA,
8+
ElementRef,
9+
input,
10+
signal,
11+
Signal,
12+
TemplateRef,
13+
viewChild,
14+
} from '@angular/core';
15+
import { injectBeforeRender, NgtArgs, NgtEuler, NgtHTML, NgtVector3 } from 'angular-three';
16+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
17+
import { injectGLTF } from 'angular-three-soba/loaders';
18+
import { NgtsHTML, NgtsHTMLContent } from 'angular-three-soba/misc';
19+
import { NgtsContactShadows, NgtsEnvironment } from 'angular-three-soba/staging';
20+
import { Group, Vector3 } from 'three';
21+
22+
@Component({
23+
selector: 'app-marker',
24+
template: `
25+
<ngt-group #group>
26+
<ngts-html [options]="{ transform: true, occlude: true, position: position(), rotation: rotation() }">
27+
<div [htmlContent]="{ containerStyle: containerStyle() }" (occluded)="isOccluded.set($event)">
28+
<ng-content />
29+
</div>
30+
</ngts-html>
31+
</ngt-group>
32+
`,
33+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
34+
changeDetection: ChangeDetectionStrategy.OnPush,
35+
imports: [NgtsHTML, NgtsHTMLContent],
36+
})
37+
export class Marker {
38+
position = input<NgtVector3>([0, 0, 0]);
39+
rotation = input<NgtEuler>([0, 0, 0]);
40+
41+
private groupRef = viewChild.required<ElementRef<Group>>('group');
42+
43+
protected isOccluded = signal(false);
44+
private isInRange = signal(false);
45+
46+
private isVisible = computed(() => !this.isOccluded() && this.isInRange());
47+
protected containerStyle = computed(() => ({
48+
transition: 'all 0.2s',
49+
opacity: this.isVisible() ? '1' : '0',
50+
transform: `scale(${this.isVisible() ? 1 : 0.25})`,
51+
}));
52+
53+
constructor() {
54+
const v = new Vector3();
55+
injectBeforeRender(({ camera }) => {
56+
const range = camera.position.distanceTo(this.groupRef().nativeElement.getWorldPosition(v)) <= 10;
57+
if (range !== this.isInRange()) this.isInRange.set(range);
58+
});
59+
}
60+
}
61+
62+
@Component({
63+
selector: 'app-marker-icon',
64+
template: `
65+
@if (withText()) {
66+
<div style="position: absolute; font-size: 10px; letter-spacing: -0.5px; left: 17.5px">north</div>
67+
}
68+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" [class]="color()">
69+
<path
70+
fill-rule="evenodd"
71+
d="m9.69 18.933.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 0 0 .281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 1 0 3 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 0 0 2.273 1.765 11.842 11.842 0 0 0 .976.544l.062.029.018.008.006.003ZM10 11.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z"
72+
clip-rule="evenodd"
73+
/>
74+
</svg>
75+
`,
76+
changeDetection: ChangeDetectionStrategy.OnPush,
77+
})
78+
export class MarkerIcon extends NgtHTML {
79+
color = input<string>('text-orange-500');
80+
withText = input(false);
81+
}
82+
83+
@Component({
84+
selector: 'app-model',
85+
template: `
86+
@if (gltf(); as gltf) {
87+
<ngt-group [rotation]="[-Math.PI / 2, 0, Math.PI]" [position]="position()" [dispose]="null">
88+
<ngt-mesh [geometry]="gltf.nodes['URF-Height_Lampd_Ice_0'].geometry" [material]="gltf.materials.Lampd_Ice" />
89+
<ngt-mesh [geometry]="gltf.nodes['URF-Height_watr_0'].geometry" [material]="gltf.materials.watr">
90+
<ngt-value [rawValue]="0" attach="material.roughness" />
91+
</ngt-mesh>
92+
<ngt-mesh [geometry]="gltf.nodes['URF-Height_Lampd_0'].geometry" [material]="gltf.materials.Lampd">
93+
<ngt-value [rawValue]="'lightgreen'" attach="material.color" />
94+
95+
<app-marker [position]="[0, 1.3, 0]" [rotation]="[0, Math.PI / 2, 0]">
96+
<app-marker-icon color="text-orange-500" />
97+
</app-marker>
98+
99+
<ngt-group [position]="[0, 0, 1.3]" [rotation]="[0, 0, Math.PI]">
100+
<app-marker [rotation]="[0, Math.PI / 2, Math.PI / 2]">
101+
<app-marker-icon color="text-red-500" [withText]="true" />
102+
</app-marker>
103+
</ngt-group>
104+
</ngt-mesh>
105+
</ngt-group>
106+
107+
<ng-container [ngTemplateOutlet]="content()" />
108+
}
109+
`,
110+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
111+
changeDetection: ChangeDetectionStrategy.OnPush,
112+
imports: [Marker, MarkerIcon, NgTemplateOutlet],
113+
})
114+
export class Model {
115+
protected Math = Math;
116+
117+
position = input<NgtVector3>([0, 0, 0]);
118+
119+
protected content = contentChild.required(TemplateRef);
120+
121+
protected gltf = injectGLTF(() => './earth.gltf') as Signal<any>;
122+
}
123+
124+
@Component({
125+
selector: 'app-lowpoly-earth-scene-graph',
126+
template: `
127+
<ngt-color *args="['#ececec']" attach="background" />
128+
<ngt-ambient-light [intensity]="0.5" />
129+
<app-model [position]="[0, 0.25, 0]">
130+
<ngts-contact-shadows
131+
*
132+
[options]="{ frames: 1, scale: 5, position: [0, -1, 0], far: 1, blur: 5, color: '#204080' }"
133+
/>
134+
</app-model>
135+
<ngts-environment [options]="{ preset: 'warehouse' }" />
136+
@if (!asRenderTexture()) {
137+
<ngts-orbit-controls [options]="{ autoRotate: true }" />
138+
}
139+
`,
140+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
141+
changeDetection: ChangeDetectionStrategy.OnPush,
142+
imports: [Model, NgtsEnvironment, NgtsContactShadows, NgtsOrbitControls, NgtArgs],
143+
})
144+
export class SceneGraph {
145+
protected Math = Math;
146+
147+
asRenderTexture = input(false);
148+
}
149+
150+
injectGLTF.preload(() => './earth.gltf');

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,16 @@ const routes: Routes = [
5959
// path: 'html-chart',
6060
// loadComponent: () => import('./html-chart/html-chart'),
6161
// },
62-
// {
63-
// path: 'lowpoly-earth',
64-
// loadComponent: () => import('./lowpoly-earth/lowpoly-earth'),
65-
// data: {
66-
// credits: {
67-
// title: 'Lowpoly Earth',
68-
// link: 'https://pmndrs.github.io/examples/demos/html-markers',
69-
// },
70-
// },
71-
// },
62+
{
63+
path: 'lowpoly-earth',
64+
loadComponent: () => import('./lowpoly-earth/lowpoly-earth'),
65+
data: {
66+
credits: {
67+
title: 'Lowpoly Earth',
68+
link: 'https://pmndrs.github.io/examples/demos/html-markers',
69+
},
70+
},
71+
},
7272
// {
7373
// path: 'stars',
7474
// loadComponent: () => import('./stars/stars'),

0 commit comments

Comments
 (0)