Skip to content

Commit 34c6279

Browse files
nartcnartc
committed
chore: add example app
1 parent 9c7a851 commit 34c6279

File tree

12 files changed

+240
-3
lines changed

12 files changed

+240
-3
lines changed

‎apps/example/project.json

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

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild } from '@angular/core';
2+
import { extend, injectBeforeRender, NgtCanvas } from 'angular-three';
3+
import * as THREE from 'three';
4+
5+
extend(THREE);
6+
7+
@Component({
8+
standalone: true,
9+
template: `
10+
<ngt-mesh #cube>
11+
<ngt-box-geometry />
12+
<ngt-mesh-basic-material color="red" />
13+
</ngt-mesh>
14+
`,
15+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
16+
})
17+
export class Scene {
18+
@ViewChild('cube', { static: true }) cube!: ElementRef<THREE.Mesh>;
19+
20+
constructor() {
21+
injectBeforeRender(({ clock }) => {
22+
this.cube.nativeElement.rotation.x = clock.elapsedTime;
23+
this.cube.nativeElement.rotation.y = clock.elapsedTime;
24+
});
25+
}
26+
}
27+
28+
@Component({
29+
standalone: true,
30+
selector: 'angular-three-root',
31+
template: ` <ngt-canvas [sceneGraph]="scene" /> `,
32+
imports: [NgtCanvas],
33+
})
34+
export class AppComponent {
35+
readonly scene = Scene;
36+
}

‎apps/example/src/assets/.gitkeep

Whitespace-only changes.

‎apps/example/src/favicon.ico

14.7 KB
Binary file not shown.

‎apps/example/src/index.html

Lines changed: 13 additions & 0 deletions
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+
<angular-three-root></angular-three-root>
12+
</body>
13+
</html>

‎apps/example/src/main.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { bootstrapApplication } from '@angular/platform-browser';
2+
import { AppComponent } from './app/app.component';
3+
4+
bootstrapApplication(AppComponent).catch((err) => console.error(err));

‎apps/example/src/styles.css

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/* You can add global styles to this file, and also import other style files */
2+
/*
3+
1. Use a more-intuitive box-sizing model.
4+
*/
5+
*,
6+
*::before,
7+
*::after {
8+
box-sizing: border-box;
9+
}
10+
/*
11+
2. Remove default margin
12+
*/
13+
* {
14+
margin: 0;
15+
}
16+
/*
17+
3. Allow percentage-based heights in the application
18+
*/
19+
html,
20+
body {
21+
height: 100%;
22+
width: 100%;
23+
}
24+
/*
25+
Typographic tweaks!
26+
4. Add accessible line-height
27+
5. Improve text rendering
28+
*/
29+
body {
30+
line-height: 1.5;
31+
-webkit-font-smoothing: antialiased;
32+
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
33+
Segoe UI Emoji;
34+
}
35+
/*
36+
6. Improve media defaults
37+
*/
38+
img,
39+
picture,
40+
video,
41+
canvas,
42+
svg {
43+
display: block;
44+
max-width: 100%;
45+
}
46+
/*
47+
7. Remove built-in form typography styles
48+
*/
49+
input,
50+
button,
51+
textarea,
52+
select {
53+
font: inherit;
54+
}
55+
/*
56+
8. Avoid text overflows
57+
*/
58+
p,
59+
h1,
60+
h2,
61+
h3,
62+
h4,
63+
h5,
64+
h6 {
65+
overflow-wrap: break-word;
66+
}
67+
/*
68+
9. Create a root stacking context
69+
*/
70+
#root,
71+
#__next {
72+
isolation: isolate;
73+
}

‎apps/example/tsconfig.app.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../../dist/out-tsc",
5+
"types": []
6+
},
7+
"files": ["src/main.ts"],
8+
"include": ["src/**/*.d.ts"],
9+
"exclude": ["src/**/*.test.ts", "src/**/*.spec.ts"]
10+
}

‎apps/example/tsconfig.editor.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"include": ["src/**/*.ts"],
4+
"compilerOptions": {
5+
"types": ["jest", "node"]
6+
}
7+
}

‎apps/example/tsconfig.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es2022",
4+
"useDefineForClassFields": false,
5+
"forceConsistentCasingInFileNames": true,
6+
"strict": true,
7+
"noImplicitOverride": true,
8+
"noPropertyAccessFromIndexSignature": true,
9+
"noImplicitReturns": true,
10+
"noFallthroughCasesInSwitch": true
11+
},
12+
"files": [],
13+
"include": [],
14+
"references": [
15+
{
16+
"path": "./tsconfig.app.json"
17+
},
18+
{
19+
"path": "./tsconfig.editor.json"
20+
}
21+
],
22+
"extends": "../../tsconfig.base.json",
23+
"angularCompilerOptions": {
24+
"enableI18nLegacyMessageIdFormat": false,
25+
"strictInjectionParameters": true,
26+
"strictInputAccessModifiers": true,
27+
"strictTemplates": true
28+
}
29+
}

‎libs/angular-three/src/lib/renderer/renderer.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,18 +69,20 @@ export class NgtRendererFactory implements RendererFactory2 {
6969
* Anything abbreviated with rS/RS stands for RendererState
7070
*/
7171
export class NgtRenderer implements Renderer2 {
72+
private first = false;
7273
constructor(
7374
private readonly delegate: Renderer2,
7475
private readonly store: NgtRendererStore,
7576
private readonly catalogue: Record<string, new (...args: any[]) => any>,
76-
private readonly first = true
77+
private readonly root = true
7778
) {}
7879

7980
createElement(name: string, namespace?: string | null | undefined) {
8081
const element = this.delegate.createElement(name, namespace);
8182

8283
// on first pass, we return the Root Scene as the root node
83-
if (this.first) {
84+
if (this.root && !this.first) {
85+
this.first = true;
8486
const node = this.store.createNode('three', this.store.rootScene);
8587
node.__ngt_renderer__[NgtRendererClassId.injectorFactory] = () => getDebugNode(element)!.injector;
8688
return node;

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"version": "0.0.0",
44
"license": "MIT",
55
"scripts": {
6-
"release": "dotenv release-it --"
6+
"release": "dotenv release-it --",
7+
"start": "nx serve example"
78
},
89
"private": true,
910
"devDependencies": {

0 commit comments

Comments
 (0)