Skip to content

Commit dd043f7

Browse files
nartcnartc
committed
docs: get docs home page in
1 parent ab10fe0 commit dd043f7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+810
-388
lines changed

‎apps/demo/project.json

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,24 @@
77
"targets": {
88
"build": {
99
"executor": "@angular-devkit/build-angular:browser",
10-
"outputs": ["{options.outputPath}"],
10+
"outputs": [
11+
"{options.outputPath}"
12+
],
1113
"options": {
1214
"outputPath": "dist/apps/documentation/demo",
1315
"index": "apps/demo/src/index.html",
1416
"main": "apps/demo/src/main.ts",
15-
"polyfills": ["zone.js"],
17+
"polyfills": [
18+
"zone.js"
19+
],
1620
"tsConfig": "apps/demo/tsconfig.app.json",
17-
"assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
18-
"styles": ["apps/demo/src/styles.css"],
21+
"assets": [
22+
"apps/demo/src/favicon.png",
23+
"apps/demo/src/assets"
24+
],
25+
"styles": [
26+
"apps/demo/src/styles.css"
27+
],
1928
"scripts": []
2029
},
2130
"configurations": {
@@ -66,9 +75,14 @@
6675
},
6776
"lint": {
6877
"executor": "@nrwl/linter:eslint",
69-
"outputs": ["{options.outputFile}"],
78+
"outputs": [
79+
"{options.outputFile}"
80+
],
7081
"options": {
71-
"lintFilePatterns": ["apps/demo/**/*.ts", "apps/demo/**/*.html"]
82+
"lintFilePatterns": [
83+
"apps/demo/**/*.ts",
84+
"apps/demo/**/*.html"
85+
]
7286
}
7387
}
7488
},

‎apps/demo/src/app/app.routes.ts

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,24 @@
11
import { Routes } from '@angular/router';
22

33
export const routes: Routes = [
4-
{ path: '', redirectTo: 'test', pathMatch: 'full' },
5-
{ path: 'test', loadComponent: () => import('./test/test.component') },
6-
{ path: 'view-cube', loadComponent: () => import('./view-cube/view-cube.component') },
4+
{ path: '', redirectTo: 'home', pathMatch: 'full' },
5+
{ path: 'home', loadComponent: () => import('./home/home.component') },
6+
{
7+
path: 'cubes',
8+
loadComponent: () => import('./cubes/cubes.component'),
9+
data: {
10+
description: 'Simple cubes',
11+
link: '/cubes',
12+
asset: 'assets/demo/cubes',
13+
},
14+
},
15+
{
16+
path: 'view-cube',
17+
loadComponent: () => import('./view-cube/view-cube.component'),
18+
data: {
19+
description: 'Heads-up display using NgtPortal',
20+
link: '/view-cube',
21+
asset: 'assets/demo/view-cube',
22+
},
23+
},
724
];

‎apps/demo/src/app/cubes/cubes.component.ts

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input } from '@angular/core';
2+
import { extend, NgtArgs, NgtBeforeRenderEvent, NgtCanvas, NgtStore } from 'angular-three';
3+
import * as THREE from 'three';
4+
import { OrbitControls } from 'three-stdlib';
5+
6+
extend({ OrbitControls });
7+
8+
@Component({
9+
selector: 'demo-cube',
10+
standalone: true,
11+
template: `
12+
<ngt-mesh
13+
(click)="active = !active"
14+
(pointerover)="hover = true"
15+
(pointerout)="hover = false"
16+
[scale]="active ? 1.5 : 1"
17+
(beforeRender)="onBeforeRender($any($event))"
18+
[position]="position"
19+
>
20+
<ngt-box-geometry />
21+
<ngt-mesh-standard-material [color]="hover ? 'goldenrod' : 'darkred'" />
22+
</ngt-mesh>
23+
`,
24+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
25+
})
26+
export class Cube {
27+
@Input() position = [0, 0, 0];
28+
29+
active = false;
30+
hover = false;
31+
32+
onBeforeRender({ object }: NgtBeforeRenderEvent<THREE.Mesh>) {
33+
object.rotation.x += 0.01;
34+
object.rotation.y += 0.01;
35+
}
36+
}
37+
38+
@Component({
39+
selector: 'demo-cubes-scene',
40+
standalone: true,
41+
template: `
42+
<ngt-color *args="['#BFD1E5']" attach="background" />
43+
44+
<ngt-ambient-light [intensity]="0.5" />
45+
<ngt-spot-light [intensity]="0.5" [position]="10" [angle]="0.15" [penumbra]="1" />
46+
<ngt-point-light [intensity]="0.5" [position]="-10" />
47+
48+
<demo-cube [position]="[1.5, 0, 0]" />
49+
<demo-cube [position]="[-1.5, 0, 0]" />
50+
51+
<ngt-orbit-controls
52+
*args="[camera, glDom]"
53+
[enableDamping]="true"
54+
(beforeRender)="$any($event).object.update()"
55+
/>
56+
`,
57+
imports: [NgtArgs, Cube],
58+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
59+
})
60+
export class Scene {
61+
private readonly store = inject(NgtStore);
62+
readonly camera = this.store.get('camera');
63+
readonly glDom = this.store.get('gl', 'domElement');
64+
}
65+
66+
@Component({
67+
standalone: true,
68+
template: `<ngt-canvas [sceneGraph]="Scene" />`,
69+
imports: [NgtCanvas],
70+
})
71+
export default class DemoCubes {
72+
readonly Scene = Scene;
73+
}

‎apps/demo/src/app/home/home.component.ts

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { Platform } from '@angular/cdk/platform';
2+
import { NgFor } from '@angular/common';
3+
import { ChangeDetectionStrategy, Component, Directive, ElementRef, HostListener, inject, Input } from '@angular/core';
4+
import { RouterLink } from '@angular/router';
5+
import { routes } from '../app.routes';
6+
7+
interface Demo {
8+
description: string;
9+
link: string;
10+
asset: string;
11+
}
12+
13+
@Directive({
14+
selector: 'video[demoAutoplay]',
15+
standalone: true,
16+
})
17+
export class Autoplay {
18+
private readonly videoElementRef: ElementRef<HTMLVideoElement> = inject(ElementRef, { self: true });
19+
20+
@HostListener('mouseover')
21+
onMouseOver() {
22+
this.videoElementRef.nativeElement.play().catch(() => {});
23+
}
24+
25+
@HostListener('mouseout')
26+
onMouseOut() {
27+
this.videoElementRef.nativeElement.pause();
28+
this.videoElementRef.nativeElement.currentTime = 0;
29+
}
30+
}
31+
32+
@Component({
33+
selector: 'demo-home-demo-item',
34+
standalone: true,
35+
template: `
36+
<a [routerLink]="[demo.link]">
37+
<video
38+
demoAutoplay
39+
muted
40+
playsinline
41+
class="w-full h-full max-h-48 object-cover cursor-pointer"
42+
[title]="demo.description"
43+
[poster]="isIOS ? demo.asset + '.gif' : ''"
44+
>
45+
<source
46+
*ngFor="let source of ['webm', 'mp4']"
47+
[src]="demo.asset + '.' + source"
48+
[type]="'video/' + source"
49+
/>
50+
<img
51+
class="w-full h-full max-h-48 object-cover cursor-pointer"
52+
[src]="demo.asset + '.gif'"
53+
[alt]="demo.description"
54+
loading="lazy"
55+
/>
56+
</video>
57+
</a>
58+
`,
59+
imports: [Autoplay, NgFor, RouterLink],
60+
host: { class: 'space-y-6 xl:space-y-10 relative block w-full h-full' },
61+
})
62+
export class DemoItem {
63+
@Input() demo!: Demo;
64+
65+
readonly isIOS = inject(Platform).IOS;
66+
}
67+
68+
@Component({
69+
selector: 'demo-home-demo-list',
70+
standalone: true,
71+
template: `
72+
<ul role="list" class="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:grid-cols-3 lg:gap-8">
73+
<li
74+
*ngFor="let demo of demos"
75+
class="bg-black rounded-xl overflow-hidden xl:text-left flex justify-center items-center"
76+
>
77+
<demo-home-demo-item [demo]="demo" />
78+
</li>
79+
</ul>
80+
`,
81+
imports: [NgFor, DemoItem],
82+
})
83+
export class DemoList {
84+
readonly demos = routes.filter((route) => !!route.data).map((route) => route.data) as Demo[];
85+
}
86+
87+
@Component({
88+
selector: 'demo-home-header',
89+
standalone: true,
90+
template: `
91+
<h2 class="text-3xl font-bold text-gray-800 tracking-tight sm:text-4xl">Angular Three Demos</h2>
92+
<p class="text-xl text-gray-600">
93+
Here are some example of things you can do with
94+
<a href="https://github.com/angular-threejs/angular-three/tree/main/apps/demo" class="hover:underline">
95+
<strong>AngularThree</strong>
96+
</a>
97+
</p>
98+
`,
99+
host: { class: 'space-y-5 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none block mb-4' },
100+
})
101+
export class Header {}
102+
103+
@Component({
104+
standalone: true,
105+
template: `
106+
<small class="absolute right-4 font-xs italic">
107+
* Interact (click anywhere) on the page to enable example play on hover
108+
</small>
109+
<div class="header-background bg-white">
110+
<div class="mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-24">
111+
<demo-home-header />
112+
<demo-home-demo-list />
113+
</div>
114+
</div>
115+
`,
116+
imports: [Header, DemoList],
117+
styles: [
118+
`
119+
.header-background {
120+
background-image: url(../../assets/header-background.svg);
121+
background-size: contain;
122+
background-repeat: repeat;
123+
}
124+
`,
125+
],
126+
changeDetection: ChangeDetectionStrategy.OnPush,
127+
})
128+
export default class Home {}

‎apps/demo/src/app/test/test.component.ts

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎apps/demo/src/assets/demo/clump.gif

4.1 MB

‎apps/demo/src/assets/demo/clump.mp4

1.5 MB
Binary file not shown.

‎apps/demo/src/assets/demo/clump.webm

778 KB
Binary file not shown.

‎apps/demo/src/assets/demo/color-grading.gif

3.09 MB

‎apps/demo/src/assets/demo/color-grading.mp4

511 KB
Binary file not shown.

0 commit comments

Comments
 (0)