chore: add extrude example

angular-threejs · Apr 3, 2023 · f4ebbbd · f4ebbbd
1 parent a45804c
commit f4ebbbd
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 10 deletions.
diff --git a/apps/example/src/app/app.component.ts b/apps/example/src/app/app.component.ts
@@ -18,6 +18,11 @@ extend(THREE);
                     Blue
                 </a>
             </li>
+            <li>
+                <a routerLink="/routed/extrude" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+                    Extrude
+                </a>
+            </li>
         </ul>
         <router-outlet />
     `,

diff --git a/apps/example/src/app/scene/blue-scene.component.ts b/apps/example/src/app/scene/blue-scene.component.ts
@@ -8,9 +8,15 @@ import { CursorPointer } from './cursor';
         <ngt-spot-light [position]="5" />
         <ngt-point-light [position]="-5" />
 
-        <ngt-mesh #cube cursorPointer (pointerover)="hovered = true" (pointerout)="hovered = false">
+        <ngt-mesh
+            #cube
+            cursorPointer
+            (pointerover)="hovered = true"
+            (pointerout)="hovered = false"
+            (click)="wireframe = !wireframe"
+        >
             <ngt-icosahedron-geometry />
-            <ngt-mesh-standard-material [color]="hovered ? 'green' : 'blue'" />
+            <ngt-mesh-standard-material [color]="hovered ? 'green' : 'blue'" [wireframe]="wireframe" />
         </ngt-mesh>
     `,
     imports: [CursorPointer],
@@ -19,16 +25,15 @@ import { CursorPointer } from './cursor';
 export default class BlueScene {
     @ViewChild('cube', { static: true }) cube!: ElementRef<THREE.Mesh>;
 
-    readonly store = inject(NgtStore);
-
     hovered = false;
+    wireframe = false;
 
     constructor() {
         injectBeforeRender(({ clock }) => {
             this.cube.nativeElement.rotation.x = clock.elapsedTime;
             this.cube.nativeElement.rotation.y = clock.elapsedTime;
         });
-        console.log('blue instantiated', this.store.get('scene'));
+        console.log('blue instantiated', inject(NgtStore).get('scene'));
     }
 
     ngOnDestroy() {

diff --git a/apps/example/src/app/scene/extrude-scene.component.ts b/apps/example/src/app/scene/extrude-scene.component.ts
@@ -0,0 +1,55 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import * as THREE from 'three';
+import { CursorPointer } from './cursor';
+
+@Component({
+    standalone: true,
+    template: `
+        <ngt-point-light [position]="5" />
+        <ngt-spot-light [position]="-5" />
+
+        <ngt-mesh
+            #mesh
+            cursorPointer
+            [scale]="0.1"
+            (beforeRender)="onBeforeRender($any($event).object)"
+            (pointerover)="hovered = true"
+            (pointerout)="hovered = false"
+            (click)="wireframe = !wireframe"
+        >
+            <ngt-extrude-geometry *args="[shape, extrudeSettings]" (afterAttach)="$any($event).node.center()" />
+            <ngt-mesh-standard-material [color]="hovered ? 'goldenrod' : 'navy'" [wireframe]="wireframe" />
+        </ngt-mesh>
+    `,
+    imports: [NgtArgs, CursorPointer],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export default class ExtrudeScene {
+    shape = new THREE.Shape();
+    readonly extrudeSettings = {
+        steps: 2,
+        depth: 16,
+        bevelEnabled: true,
+        bevelThickness: 1,
+        bevelSize: 1,
+        bevelOffset: 0,
+        bevelSegments: 1,
+    };
+
+    hovered = false;
+    wireframe = false;
+
+    constructor() {
+        this.shape.moveTo(0, 0);
+        this.shape.lineTo(0, 8);
+        this.shape.lineTo(12, 8);
+        this.shape.lineTo(12, 0);
+        this.shape.lineTo(0, 0);
+    }
+
+    onBeforeRender(object: THREE.Mesh) {
+        object.rotation.x += 0.01;
+        object.rotation.y += 0.01;
+    }
+}
diff --git a/apps/example/src/app/scene/red-scene.component.ts b/apps/example/src/app/scene/red-scene.component.ts
@@ -8,9 +8,15 @@ import { CursorPointer } from './cursor';
         <ngt-point-light [position]="5" />
         <ngt-spot-light [position]="-5" />
 
-        <ngt-mesh #cube cursorPointer (pointerover)="hovered = true" (pointerout)="hovered = false">
+        <ngt-mesh
+            #cube
+            cursorPointer
+            (pointerover)="hovered = true"
+            (pointerout)="hovered = false"
+            (click)="wireframe = !wireframe"
+        >
             <ngt-box-geometry />
-            <ngt-mesh-standard-material [color]="hovered ? 'yellow' : 'red'" />
+            <ngt-mesh-standard-material [color]="hovered ? 'yellow' : 'red'" [wireframe]="wireframe" />
         </ngt-mesh>
     `,
     imports: [CursorPointer],
@@ -19,16 +25,15 @@ import { CursorPointer } from './cursor';
 export default class RedScene {
     @ViewChild('cube', { static: true }) cube!: ElementRef<THREE.Mesh>;
 
-    readonly store = inject(NgtStore);
-
     hovered = false;
+    wireframe = false;
 
     constructor() {
         injectBeforeRender(({ clock }) => {
             this.cube.nativeElement.rotation.x = clock.elapsedTime;
             this.cube.nativeElement.rotation.y = clock.elapsedTime;
         });
-        console.log('red instantiated', this.store.get('scene'));
+        console.log('red instantiated', inject(NgtStore).get('scene'));
     }
 
     ngOnDestroy() {

diff --git a/apps/example/src/app/scene/scene.routes.ts b/apps/example/src/app/scene/scene.routes.ts
@@ -9,6 +9,10 @@ const routes: Routes = [
         path: 'blue',
         loadComponent: () => import('./blue-scene.component'),
     },
+    {
+        path: 'extrude',
+        loadComponent: () => import('./extrude-scene.component'),
+    },
 ];
 
 export default routes;