Skip to content

Commit 6062838

Browse files
nartcnartc
committed
curve modifier
1 parent ca5484b commit 6062838

File tree

8 files changed

+167
-3
lines changed

8 files changed

+167
-3
lines changed

‎libs/soba/materials/src/mesh-transmission-material/mesh-transmission-material.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import {
66
injectNgtRef,
77
NgtArgs,
88
signalStore,
9+
type NgtAnyRecord,
910
type NgtMeshPhysicalMaterial,
10-
NgtAnyRecord,
1111
} from 'angular-three';
1212
import { injectNgtsFBO } from 'angular-three-soba/misc';
1313
import { DiscardMaterial, MeshTransmissionMaterial } from 'angular-three-soba/shaders';

‎libs/soba/modifiers/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# angular-three-soba/modifiers
2+
3+
Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/modifiers`.

‎libs/soba/modifiers/ng-package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"lib": {
3+
"entryFile": "src/index.ts"
4+
}
5+
}

‎libs/soba/modifiers/src/curve-modifier/curve-modifier.ts

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, effect, signal, untracked } from '@angular/core';
2+
import { NgtArgs, NgtPortal, NgtPortalContent, injectNgtRef, prepare, signalStore } from 'angular-three';
3+
import * as THREE from 'three';
4+
import { Flow } from 'three-stdlib';
5+
6+
export type NgtsCurveModifierState = {
7+
curve?: THREE.Curve<THREE.Vector3>;
8+
};
9+
10+
declare global {
11+
interface HTMLElementTagNameMap {
12+
'ngts-curve-modifier': NgtsCurveModifierState;
13+
}
14+
}
15+
16+
@Component({
17+
selector: 'ngts-curve-modifier',
18+
standalone: true,
19+
template: `
20+
<ngt-portal [container]="sceneRef" [autoRender]="false">
21+
<ng-template ngtPortalContent>
22+
<ng-content />
23+
</ng-template>
24+
</ngt-portal>
25+
<ngt-primitive *args="[modifierObject()]" />
26+
`,
27+
imports: [NgtArgs, NgtPortal, NgtPortalContent],
28+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
29+
})
30+
export class NgtsCurveModifier {
31+
private inputs = signalStore<NgtsCurveModifierState>();
32+
33+
@Input({ alias: 'curve' }) set _curve(curve: THREE.Curve<THREE.Vector3>) {
34+
this.inputs.set({ curve });
35+
}
36+
37+
private curve = this.inputs.select('curve');
38+
39+
sceneRef = injectNgtRef(prepare(new THREE.Scene()));
40+
private sceneRefChildren = this.sceneRef.children();
41+
42+
private modifier?: Flow;
43+
modifierObject = signal<THREE.Object3D | null>(null);
44+
45+
constructor() {
46+
effect(() => {
47+
this.sceneRefChildren();
48+
untracked(() => {
49+
this.modifier = new Flow(this.sceneRef.nativeElement.children[0] as THREE.Mesh);
50+
this.modifierObject.set(this.modifier.object3D);
51+
});
52+
});
53+
54+
effect(() => {
55+
const curve = this.curve();
56+
this.modifierObject();
57+
if (curve) {
58+
this.modifier?.updateCurve(0, curve);
59+
}
60+
});
61+
}
62+
63+
moveAlongCurve(value: number) {
64+
this.modifier?.moveAlongCurve(value);
65+
}
66+
}

‎libs/soba/modifiers/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './curve-modifier/curve-modifier';

‎libs/soba/project.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@
6868
"libs/soba/performances/**/*.ts",
6969
"libs/soba/performances/**/*.html",
7070
"libs/soba/materials/**/*.ts",
71-
"libs/soba/materials/**/*.html"
71+
"libs/soba/materials/**/*.html",
72+
"libs/soba/modifiers/**/*.ts",
73+
"libs/soba/modifiers/**/*.html"
7274
]
7375
}
7476
},

‎libs/soba/src/modifiers/curve-modifier.stories.ts

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { CUSTOM_ELEMENTS_SCHEMA, Component, ViewChild, computed, effect } from '@angular/core';
2+
import { NgtArgs, extend, injectBeforeRender, injectNgtLoader, injectNgtRef } from 'angular-three';
3+
import { NgtsCurveModifier } from 'angular-three-soba/modifiers';
4+
import * as THREE from 'three';
5+
import { FontLoader, TextGeometry } from 'three-stdlib';
6+
import { makeCanvasOptions, makeDecorators, makeStoryFunction } from '../setup-canvas';
7+
8+
extend({ TextGeometry });
9+
10+
@Component({
11+
standalone: true,
12+
template: `
13+
<ngts-curve-modifier #curveModifier [curve]="curve">
14+
<ngt-mesh>
15+
<ngt-text-geometry *args="args()" [ref]="geometryRef" />
16+
<ngt-mesh-normal-material />
17+
</ngt-mesh>
18+
</ngts-curve-modifier>
19+
<ngt-primitive *args="[line]" />
20+
`,
21+
imports: [NgtsCurveModifier, NgtArgs],
22+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
23+
})
24+
class DefaultCurveModifierStory {
25+
private font = injectNgtLoader(
26+
() => FontLoader,
27+
() => 'soba/fonts/helvetiker_regular.typeface.json',
28+
);
29+
args = computed(() => {
30+
const font = this.font();
31+
if (!font) return [];
32+
return [
33+
'hello angular-three-soba',
34+
{
35+
font,
36+
size: 2,
37+
height: 0.05,
38+
curveSegments: 12,
39+
bevelEnabled: true,
40+
bevelThickness: 0.02,
41+
bevelSize: 0.01,
42+
bevelOffset: 0,
43+
bevelSegments: 5,
44+
},
45+
];
46+
});
47+
private handlePosition = [
48+
[10, 0, -10],
49+
[10, 0, 10],
50+
[-10, 0, 10],
51+
[-10, 0, -10],
52+
].map((hand) => new THREE.Vector3(...hand));
53+
54+
curve = new THREE.CatmullRomCurve3(this.handlePosition, true, 'centripetal');
55+
line = new THREE.LineLoop(
56+
new THREE.BufferGeometry().setFromPoints(this.curve.getPoints(50)),
57+
new THREE.LineBasicMaterial({ color: 0x00ff00 }),
58+
);
59+
60+
geometryRef = injectNgtRef<TextGeometry>();
61+
@ViewChild('curveModifier', { static: true }) curveModifier!: NgtsCurveModifier;
62+
63+
constructor() {
64+
effect(() => {
65+
const geom = this.geometryRef.nativeElement;
66+
if (!geom) return;
67+
geom.rotateX(Math.PI);
68+
});
69+
70+
injectBeforeRender(() => {
71+
this.curveModifier?.moveAlongCurve(0.001);
72+
});
73+
}
74+
}
75+
76+
export default {
77+
title: 'Modifiers/CurveModifier',
78+
decorators: makeDecorators(),
79+
};
80+
81+
const canvasOptions = makeCanvasOptions({
82+
camera: { position: [0, 10, 20] },
83+
useLegacyLights: true,
84+
});
85+
86+
export const Default = makeStoryFunction(DefaultCurveModifierStory, canvasOptions);

‎tsconfig.base.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,14 @@
1818
"@platform/plugin": ["libs/plugin/src/index.ts"],
1919
"angular-three": ["libs/core/src/index.ts"],
2020
"angular-three-soba": ["libs/soba/src/index.ts"],
21-
"angular-three-soba/assets/*": ["libs/soba/shaders/assets/*"],
2221
"angular-three-soba/abstractions": ["libs/soba/abstractions/src/index.ts"],
22+
"angular-three-soba/assets/*": ["libs/soba/shaders/assets/*"],
2323
"angular-three-soba/cameras": ["libs/soba/cameras/src/index.ts"],
2424
"angular-three-soba/controls": ["libs/soba/controls/src/index.ts"],
2525
"angular-three-soba/loaders": ["libs/soba/loaders/src/index.ts"],
2626
"angular-three-soba/materials": ["libs/soba/materials/src/index.ts"],
2727
"angular-three-soba/misc": ["libs/soba/misc/src/index.ts"],
28+
"angular-three-soba/modifiers": ["libs/soba/modifiers/src/index.ts"],
2829
"angular-three-soba/performances": ["libs/soba/performances/src/index.ts"],
2930
"angular-three-soba/shaders": ["libs/soba/shaders/src/index.ts"],
3031
"angular-three-soba/staging": ["libs/soba/staging/src/index.ts"]

0 commit comments

Comments
 (0)