|
1 | 1 | import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
2 | 2 | import { Meta } from '@storybook/angular';
|
3 | 3 | import { NgtsText3D } from 'angular-three-soba/abstractions';
|
4 |
| -import { NgtsCenter } from 'angular-three-soba/staging'; |
| 4 | +import { NgtsCenter, NgtsFloat } from 'angular-three-soba/staging'; |
5 | 5 | import { makeDecorators, makeStoryFunction } from '../setup-canvas';
|
6 | 6 |
|
| 7 | +@Component({ |
| 8 | + standalone: true, |
| 9 | + template: ` |
| 10 | + <ngts-center> |
| 11 | + <ngts-float> |
| 12 | + <ngts-text-3d |
| 13 | + text="hello |
| 14 | +world" |
| 15 | + font="helvetiker_regular.typeface.json" |
| 16 | + [options]="{ |
| 17 | + curveSegments: 32, |
| 18 | + bevelEnabled: true, |
| 19 | + bevelSize: 0.04, |
| 20 | + bevelThickness: 0.1, |
| 21 | + height: 0.5, |
| 22 | + lineHeight: 0.5, |
| 23 | + letterSpacing: -0.06, |
| 24 | + size: 1.5, |
| 25 | + }" |
| 26 | + > |
| 27 | + <ngt-mesh-normal-material /> |
| 28 | + </ngts-text-3d> |
| 29 | + </ngts-float> |
| 30 | + </ngts-center> |
| 31 | +
|
| 32 | + <ngt-axes-helper [scale]="2" /> |
| 33 | + `, |
| 34 | + imports: [NgtsCenter, NgtsText3D, NgtsFloat], |
| 35 | + schemas: [CUSTOM_ELEMENTS_SCHEMA], |
| 36 | + changeDetection: ChangeDetectionStrategy.OnPush, |
| 37 | +}) |
| 38 | +class FloatText3DStory {} |
| 39 | + |
7 | 40 | @Component({
|
8 | 41 | standalone: true,
|
9 | 42 | template: `
|
@@ -43,3 +76,7 @@ export default {
|
43 | 76 | export const Default = makeStoryFunction(DefaultText3DStory, {
|
44 | 77 | camera: { position: [-1.5, 1.5, 3.5] },
|
45 | 78 | });
|
| 79 | + |
| 80 | +export const Float = makeStoryFunction(FloatText3DStory, { |
| 81 | + camera: { position: [-1.5, 1.5, 3.5] }, |
| 82 | +}); |
0 commit comments