1
- import {
2
- ChangeDetectionStrategy ,
3
- Component ,
4
- computed ,
5
- CUSTOM_ELEMENTS_SCHEMA ,
6
- input ,
7
- signal ,
8
- Signal ,
9
- } from '@angular/core' ;
1
+ import { ChangeDetectionStrategy , Component , CUSTOM_ELEMENTS_SCHEMA , input , signal } from '@angular/core' ;
10
2
import { NgtArgs , NgtEuler , NgtVector3 } from 'angular-three' ;
11
3
import { NgtsRoundedBox } from 'angular-three-soba/abstractions' ;
12
4
import { NgtsOrbitControls , NgtsPivotControls } from 'angular-three-soba/controls' ;
13
- import { injectGLTF } from 'angular-three-soba/loaders' ;
14
- import { injectMask , NgtsBounds , NgtsEnvironment , NgtsFloat , NgtsMask } from 'angular-three-soba/staging' ;
15
- import { ColorRepresentation , Mesh , MeshPhongMaterial , MeshStandardMaterial } from 'three' ;
16
- import { GLTF } from 'three-stdlib' ;
5
+ import { NgtsBounds , NgtsEnvironment , NgtsFloat , NgtsMask } from 'angular-three-soba/staging' ;
6
+ import { ColorRepresentation } from 'three' ;
7
+ import { Nx } from './nx' ;
17
8
18
9
export const invert = signal ( false ) ;
19
10
@@ -88,62 +79,6 @@ export class Box {
88
79
rotation = input < NgtEuler > ( [ 0 , 0 , 0 ] ) ;
89
80
}
90
81
91
- type AngularGLTF = GLTF & {
92
- nodes : { Curve : Mesh ; Curve001 : Mesh ; Curve002 : Mesh ; Curve003 : Mesh } ;
93
- materials : { SVGMat : MeshStandardMaterial } ;
94
- } ;
95
-
96
- @Component ( {
97
- selector : 'app-angular' ,
98
- standalone : true ,
99
- template : `
100
- @if (gltf(); as gltf) {
101
- <ngt-group [dispose]="null" [scale]="scale()" [position]="[-2.5, -3, 0]" [rotation]="[Math.PI / 2, 0, 0]">
102
- <ngt-mesh
103
- [castShadow]="true"
104
- [receiveShadow]="true"
105
- [geometry]="gltf.nodes.Curve.geometry"
106
- [material]="material()"
107
- />
108
- <ngt-mesh
109
- [castShadow]="true"
110
- [receiveShadow]="true"
111
- [geometry]="gltf.nodes.Curve001.geometry"
112
- [material]="material()"
113
- />
114
- <ngt-mesh
115
- [castShadow]="true"
116
- [receiveShadow]="true"
117
- [geometry]="gltf.nodes.Curve002.geometry"
118
- [material]="material()"
119
- />
120
- <ngt-mesh
121
- [castShadow]="true"
122
- [receiveShadow]="true"
123
- [geometry]="gltf.nodes.Curve003.geometry"
124
- [material]="material()"
125
- />
126
- </ngt-group>
127
- }
128
- ` ,
129
- schemas : [ CUSTOM_ELEMENTS_SCHEMA ] ,
130
- changeDetection : ChangeDetectionStrategy . OnPush ,
131
- } )
132
- export class Angular {
133
- protected readonly Math = Math ;
134
-
135
- invert = input ( false ) ;
136
- scale = input ( 1 ) ;
137
-
138
- protected gltf = injectGLTF ( ( ) => './angular.glb' ) as Signal < AngularGLTF | null > ;
139
- protected stencilParameters = injectMask ( ( ) => 1 , this . invert ) ;
140
-
141
- protected material = computed ( ( ) => {
142
- const stencilParameters = this . stencilParameters ( ) ;
143
- return new MeshPhongMaterial ( { color : '#E72BAA' , ...stencilParameters } ) ;
144
- } ) ;
145
- }
146
-
147
82
@Component ( {
148
83
standalone : true ,
149
84
template : `
@@ -153,10 +88,10 @@ export class Angular {
153
88
<ngt-hemisphere-light [intensity]="Math.PI * 1.5" groundColor="red" />
154
89
155
90
<app-circular-mask />
156
- <app-circular-mask [position]="[2, 0, 0]" />
157
91
<ngts-bounds [options]="{ fit: true, clip: true, observe: true }">
158
92
<ngts-float [options]="{ floatIntensity: 4, rotationIntensity: 0, speed: 4 }">
159
- <app-angular [invert]="invert()" [scale]="20" />
93
+ <!-- <app-angular [invert]="invert()" [scale]="20" />-->
94
+ <app-nx [invert]="invert()" [scale]="20" />
160
95
</ngts-float>
161
96
<app-box
162
97
color="#EAC435"
@@ -176,7 +111,7 @@ export class Angular {
176
111
schemas : [ CUSTOM_ELEMENTS_SCHEMA ] ,
177
112
changeDetection : ChangeDetectionStrategy . OnPush ,
178
113
host : { class : 'inverted-stencil-buffer-soba-experience' } ,
179
- imports : [ CircularMask , NgtsBounds , NgtsFloat , Angular , Box , NgtsEnvironment , NgtsOrbitControls , NgtArgs ] ,
114
+ imports : [ CircularMask , NgtsBounds , NgtsFloat , Box , NgtsEnvironment , NgtsOrbitControls , NgtArgs , Nx ] ,
180
115
} )
181
116
export class Experience {
182
117
protected readonly Math = Math ;
0 commit comments