Skip to content

Commit 78bc7b8

Browse files
Chau TranChau Tran
Chau Tran
authored and
Chau Tran
committed
chore: add example app
1 parent 69ed616 commit 78bc7b8

17 files changed

+748
-19
lines changed

‎.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@
22

33
/dist
44
/coverage
5+
6+
.angular

‎apps/example/project.json

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{
2+
"name": "example",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "application",
5+
"prefix": "postprocessing",
6+
"sourceRoot": "apps/example/src",
7+
"tags": [],
8+
"targets": {
9+
"build": {
10+
"executor": "@angular-devkit/build-angular:browser",
11+
"outputs": ["{options.outputPath}"],
12+
"options": {
13+
"outputPath": "dist/apps/example",
14+
"index": "apps/example/src/index.html",
15+
"main": "apps/example/src/main.ts",
16+
"polyfills": ["zone.js"],
17+
"tsConfig": "apps/example/tsconfig.app.json",
18+
"assets": ["apps/example/src/favicon.ico", "apps/example/src/assets"],
19+
"styles": ["apps/example/src/styles.css"],
20+
"scripts": []
21+
},
22+
"configurations": {
23+
"production": {
24+
"budgets": [
25+
{
26+
"type": "initial",
27+
"maximumWarning": "500kb",
28+
"maximumError": "1mb"
29+
},
30+
{
31+
"type": "anyComponentStyle",
32+
"maximumWarning": "2kb",
33+
"maximumError": "4kb"
34+
}
35+
],
36+
"outputHashing": "all"
37+
},
38+
"development": {
39+
"buildOptimizer": false,
40+
"optimization": false,
41+
"vendorChunk": true,
42+
"extractLicenses": false,
43+
"sourceMap": true,
44+
"namedChunks": true
45+
}
46+
},
47+
"defaultConfiguration": "production"
48+
},
49+
"serve": {
50+
"executor": "@angular-devkit/build-angular:dev-server",
51+
"configurations": {
52+
"production": {
53+
"browserTarget": "example:build:production"
54+
},
55+
"development": {
56+
"browserTarget": "example:build:development"
57+
}
58+
},
59+
"defaultConfiguration": "development"
60+
},
61+
"extract-i18n": {
62+
"executor": "@angular-devkit/build-angular:extract-i18n",
63+
"options": {
64+
"browserTarget": "example:build"
65+
}
66+
}
67+
}
68+
}

‎apps/example/src/app/app.component.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component } from '@angular/core';
2+
import { Keen } from './scene.component';
3+
4+
@Component({
5+
standalone: true,
6+
imports: [Keen],
7+
selector: 'postprocessing-root',
8+
template: `
9+
<postprocessing-keen />
10+
`,
11+
})
12+
export class AppComponent {}

‎apps/example/src/app/scene.component.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<ngt-color *args="['black']" attach="background" />
2+
3+
<ngt-ambient-light />
4+
<ngt-directional-light [position]="[0, 1, 2]" />
5+
6+
<ngt-group
7+
*ngIf="keen$ | ngtPush as keen"
8+
[position]="[0, -7, 0]"
9+
[rotation]="[-Math.PI / 2, 0, 0]"
10+
(beforeRender)="onBeforeRender($any($event))"
11+
>
12+
<ngt-mesh [material]="keen.materials['Scene_-_Root']" [geometry]="keen.nodes['mesh_0'].geometry" />
13+
</ngt-group>
14+
15+
<ngtp-effect-composer>
16+
<ngtp-bloom [intensity]="5" />
17+
<ngtp-dot-screen [scale]="3" />
18+
</ngtp-effect-composer>
19+
20+
<ngts-orbit-controls />

‎apps/example/src/app/scene.component.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { NgIf } from '@angular/common';
2+
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
3+
import { NgtArgs, NgtBeforeRenderEvent, NgtCanvas, NgtPush } from 'angular-three';
4+
import { NgtpEffectComposer } from 'angular-three-postprocessing';
5+
import { NgtpBloom, NgtpDotScreen } from 'angular-three-postprocessing/effects';
6+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
7+
import { injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
8+
import { Observable } from 'rxjs';
9+
import * as THREE from 'three';
10+
import { GLTF } from 'three-stdlib';
11+
12+
interface KeenGLTF extends GLTF {
13+
nodes: { mesh_0: THREE.Mesh };
14+
materials: { 'Scene_-_Root': THREE.MeshStandardMaterial };
15+
}
16+
17+
@Component({
18+
standalone: true,
19+
templateUrl: './scene.component.html',
20+
imports: [NgtpEffectComposer, NgtpBloom, NgtpDotScreen, NgtPush, NgIf, NgtArgs, NgtsOrbitControls],
21+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
22+
})
23+
class Scene {
24+
readonly Math = Math;
25+
readonly keen$ = injectNgtsGLTFLoader('assets/keen/scene.gltf') as Observable<KeenGLTF>;
26+
27+
onBeforeRender({ object, state: { clock } }: NgtBeforeRenderEvent<THREE.Group>) {
28+
object.rotation.z = clock.elapsedTime;
29+
}
30+
}
31+
32+
@Component({
33+
selector: 'postprocessing-keen',
34+
standalone: true,
35+
template: `
36+
<ngt-canvas [sceneGraph]="scene" [camera]="{ position: [0, 0, 15], near: 5, far: 20 }" />
37+
`,
38+
imports: [NgtCanvas],
39+
})
40+
export class Keen {
41+
readonly scene = Scene;
42+
}

‎apps/example/src/assets/.gitkeep

Whitespace-only changes.

‎apps/example/src/assets/keen/scene.bin

80.5 KB
Binary file not shown.

‎apps/example/src/assets/keen/scene.gltf

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
{
2+
"accessors": [
3+
{
4+
"bufferView": 2,
5+
"componentType": 5126,
6+
"count": 1132,
7+
"max": [4, 3, 14],
8+
"min": [-4, -3, 0],
9+
"type": "VEC3"
10+
},
11+
{
12+
"bufferView": 2,
13+
"byteOffset": 13584,
14+
"componentType": 5126,
15+
"count": 1132,
16+
"max": [1, 1, 1],
17+
"min": [-1, -1, -1],
18+
"type": "VEC3"
19+
},
20+
{
21+
"bufferView": 3,
22+
"componentType": 5126,
23+
"count": 1132,
24+
"max": [0, 0, 0, 1],
25+
"min": [0, 0, 0, 1],
26+
"type": "VEC4"
27+
},
28+
{
29+
"bufferView": 3,
30+
"byteOffset": 18112,
31+
"componentType": 5126,
32+
"count": 1132,
33+
"max": [1, 1, 1, 1],
34+
"min": [0, 0.19607843458652496, 0, 1],
35+
"type": "VEC4"
36+
},
37+
{
38+
"bufferView": 1,
39+
"componentType": 5126,
40+
"count": 1132,
41+
"max": [0, 0],
42+
"min": [0, 0],
43+
"type": "VEC2"
44+
},
45+
{
46+
"bufferView": 0,
47+
"componentType": 5125,
48+
"count": 2484,
49+
"max": [1131],
50+
"min": [0],
51+
"type": "SCALAR"
52+
}
53+
],
54+
"asset": {
55+
"extras": {
56+
"author": "Acemir Sousa Mendes (https://sketchfab.com/acemir)",
57+
"license": "CC-BY-NC-SA-4.0 (http://creativecommons.org/licenses/by-nc-sa/4.0/)",
58+
"source": "https://sketchfab.com/3d-models/billy-blaze-aka-commander-keen-voxel-fanart-a64810a4026b445e9633ec758c6c969c",
59+
"title": "Billy Blaze aka Commander Keen (Voxel FanArt)"
60+
},
61+
"generator": "Sketchfab-6.24.0",
62+
"version": "2.0"
63+
},
64+
"bufferViews": [
65+
{
66+
"buffer": 0,
67+
"byteLength": 9936,
68+
"byteOffset": 0,
69+
"name": "floatBufferViews",
70+
"target": 34963
71+
},
72+
{
73+
"buffer": 0,
74+
"byteLength": 9056,
75+
"byteOffset": 9936,
76+
"byteStride": 8,
77+
"name": "floatBufferViews",
78+
"target": 34962
79+
},
80+
{
81+
"buffer": 0,
82+
"byteLength": 27168,
83+
"byteOffset": 18992,
84+
"byteStride": 12,
85+
"name": "floatBufferViews",
86+
"target": 34962
87+
},
88+
{
89+
"buffer": 0,
90+
"byteLength": 36224,
91+
"byteOffset": 46160,
92+
"byteStride": 16,
93+
"name": "floatBufferViews",
94+
"target": 34962
95+
}
96+
],
97+
"buffers": [
98+
{
99+
"byteLength": 82384,
100+
"uri": "scene.bin"
101+
}
102+
],
103+
"materials": [
104+
{
105+
"doubleSided": true,
106+
"emissiveFactor": [0, 0, 0],
107+
"name": "Scene_-_Root",
108+
"pbrMetallicRoughness": {
109+
"baseColorFactor": [0.5, 0.5, 0.5, 1],
110+
"metallicFactor": 0,
111+
"roughnessFactor": 0.59999999999999998
112+
}
113+
}
114+
],
115+
"meshes": [
116+
{
117+
"primitives": [
118+
{
119+
"attributes": {
120+
"COLOR_0": 3,
121+
"NORMAL": 1,
122+
"POSITION": 0,
123+
"TANGENT": 2,
124+
"TEXCOORD_0": 4
125+
},
126+
"indices": 5,
127+
"material": 0,
128+
"mode": 4
129+
}
130+
]
131+
}
132+
],
133+
"nodes": [
134+
{
135+
"children": [1],
136+
"name": "RootNode (gltf orientation matrix)",
137+
"rotation": [-0.70710678118654746, -0, -0, 0.70710678118654757]
138+
},
139+
{
140+
"children": [2],
141+
"name": "RootNode (model correction matrix)"
142+
},
143+
{
144+
"children": [3],
145+
"name": "Geode"
146+
},
147+
{
148+
"mesh": 0,
149+
"name": ""
150+
}
151+
],
152+
"scene": 0,
153+
"scenes": [
154+
{
155+
"name": "OSG_Scene",
156+
"nodes": [0]
157+
}
158+
]
159+
}

‎apps/example/src/favicon.ico

14.7 KB
Binary file not shown.

‎apps/example/src/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>example</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
</head>
10+
<body>
11+
<postprocessing-root></postprocessing-root>
12+
</body>
13+
</html>

‎apps/example/src/main.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { bootstrapApplication } from '@angular/platform-browser';
2+
import { extend } from 'angular-three';
3+
import * as THREE from 'three';
4+
import { AppComponent } from './app/app.component';
5+
6+
extend(THREE);
7+
8+
bootstrapApplication(AppComponent, {
9+
providers: [],
10+
}).catch((err) => console.error(err));

0 commit comments

Comments
 (0)