angular-three-soba 4.0.0-next.99 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/abstractions/README.md +227 -108
- package/cameras/README.md +81 -36
- package/controls/README.md +152 -2
- package/fesm2022/angular-three-soba-abstractions.mjs +485 -120
- package/fesm2022/angular-three-soba-abstractions.mjs.map +1 -1
- package/fesm2022/angular-three-soba-cameras.mjs +169 -32
- package/fesm2022/angular-three-soba-cameras.mjs.map +1 -1
- package/fesm2022/angular-three-soba-controls.mjs +386 -58
- package/fesm2022/angular-three-soba-controls.mjs.map +1 -1
- package/fesm2022/angular-three-soba-gizmos.mjs +458 -150
- package/fesm2022/angular-three-soba-gizmos.mjs.map +1 -1
- package/fesm2022/angular-three-soba-loaders.mjs +412 -14
- package/fesm2022/angular-three-soba-loaders.mjs.map +1 -1
- package/fesm2022/angular-three-soba-materials.mjs +314 -88
- package/fesm2022/angular-three-soba-materials.mjs.map +1 -1
- package/fesm2022/angular-three-soba-misc.mjs +709 -90
- package/fesm2022/angular-three-soba-misc.mjs.map +1 -1
- package/fesm2022/angular-three-soba-performances.mjs +441 -74
- package/fesm2022/angular-three-soba-performances.mjs.map +1 -1
- package/fesm2022/angular-three-soba-shaders.mjs +67 -0
- package/fesm2022/angular-three-soba-shaders.mjs.map +1 -1
- package/fesm2022/angular-three-soba-staging.mjs +1557 -303
- package/fesm2022/angular-three-soba-staging.mjs.map +1 -1
- package/fesm2022/angular-three-soba-stats.mjs +36 -8
- package/fesm2022/angular-three-soba-stats.mjs.map +1 -1
- package/fesm2022/angular-three-soba-vanilla-exports.mjs +1 -1
- package/gizmos/README.md +215 -2
- package/loaders/README.md +249 -61
- package/materials/README.md +189 -82
- package/metadata.json +256 -0
- package/misc/README.md +319 -49
- package/package.json +27 -27
- package/performances/README.md +193 -2
- package/shaders/README.md +108 -2
- package/staging/README.md +365 -67
- package/stats/README.md +64 -2
- package/types/angular-three-soba-abstractions.d.ts +1469 -0
- package/types/angular-three-soba-cameras.d.ts +336 -0
- package/types/angular-three-soba-controls.d.ts +509 -0
- package/types/angular-three-soba-gizmos.d.ts +695 -0
- package/types/angular-three-soba-loaders.d.ts +595 -0
- package/types/angular-three-soba-materials.d.ts +649 -0
- package/types/angular-three-soba-misc.d.ts +1017 -0
- package/types/angular-three-soba-performances.d.ts +791 -0
- package/types/angular-three-soba-shaders.d.ts +273 -0
- package/types/angular-three-soba-staging.d.ts +2748 -0
- package/types/angular-three-soba-stats.d.ts +69 -0
- package/types/angular-three-soba-vanilla-exports.d.ts +51 -0
- package/types/angular-three-soba.d.ts +2 -0
- package/vanilla-exports/README.md +128 -2
- package/web-types.json +285 -0
- package/abstractions/index.d.ts +0 -13
- package/abstractions/lib/billboard.d.ts +0 -19
- package/abstractions/lib/catmull-rom-line.d.ts +0 -228
- package/abstractions/lib/cubic-bezier-line.d.ts +0 -19
- package/abstractions/lib/edges.d.ts +0 -226
- package/abstractions/lib/gradient-texture.d.ts +0 -24
- package/abstractions/lib/grid.d.ts +0 -47
- package/abstractions/lib/helper.d.ts +0 -30
- package/abstractions/lib/line.d.ts +0 -41
- package/abstractions/lib/prism-geometry.d.ts +0 -32
- package/abstractions/lib/quadratic-bezier-line.d.ts +0 -21
- package/abstractions/lib/rounded-box.d.ts +0 -42
- package/abstractions/lib/text-3d.d.ts +0 -47
- package/abstractions/lib/text.d.ts +0 -57
- package/cameras/index.d.ts +0 -4
- package/cameras/lib/camera-content.d.ts +0 -9
- package/cameras/lib/cube-camera.d.ts +0 -43
- package/cameras/lib/orthographic-camera.d.ts +0 -40
- package/cameras/lib/perspective-camera.d.ts +0 -32
- package/controls/index.d.ts +0 -4
- package/controls/lib/camera-controls.d.ts +0 -25
- package/controls/lib/orbit-controls.d.ts +0 -36
- package/controls/lib/scroll-controls.d.ts +0 -72
- package/controls/lib/trackball-controls.d.ts +0 -27
- package/gizmos/index.d.ts +0 -5
- package/gizmos/lib/gizmo-helper/gizmo-helper.d.ts +0 -43
- package/gizmos/lib/gizmo-helper/gizmo-viewcube.d.ts +0 -75
- package/gizmos/lib/gizmo-helper/gizmo-viewport.d.ts +0 -64
- package/gizmos/lib/pivot-controls/axis-arrow.d.ts +0 -30
- package/gizmos/lib/pivot-controls/axis-rotator.d.ts +0 -29
- package/gizmos/lib/pivot-controls/pivot-controls.d.ts +0 -109
- package/gizmos/lib/pivot-controls/plane-slider.d.ts +0 -32
- package/gizmos/lib/pivot-controls/scaling-sphere.d.ts +0 -31
- package/gizmos/lib/transform-controls.d.ts +0 -45
- package/index.d.ts +0 -2
- package/loaders/index.d.ts +0 -10
- package/loaders/lib/fbx-loader.d.ts +0 -18
- package/loaders/lib/fbx-resource.d.ts +0 -7
- package/loaders/lib/font-loader.d.ts +0 -13
- package/loaders/lib/font-resource.d.ts +0 -28
- package/loaders/lib/gltf-loader.d.ts +0 -34
- package/loaders/lib/gltf-resource.d.ts +0 -32
- package/loaders/lib/loader.d.ts +0 -26
- package/loaders/lib/progress.d.ts +0 -14
- package/loaders/lib/texture-loader.d.ts +0 -21
- package/loaders/lib/texture-resource.d.ts +0 -10
- package/materials/index.d.ts +0 -8
- package/materials/lib/custom-shader-material.d.ts +0 -20
- package/materials/lib/mesh-distort-material.d.ts +0 -17
- package/materials/lib/mesh-portal-material.d.ts +0 -59
- package/materials/lib/mesh-reflector-material.d.ts +0 -50
- package/materials/lib/mesh-refraction-material.d.ts +0 -41
- package/materials/lib/mesh-transmission-material.d.ts +0 -76
- package/materials/lib/mesh-wobble-material.d.ts +0 -15
- package/materials/lib/point-material.d.ts +0 -12
- package/misc/index.d.ts +0 -14
- package/misc/lib/animations.d.ts +0 -49
- package/misc/lib/bake-shadows.d.ts +0 -6
- package/misc/lib/computed-attribute.d.ts +0 -13
- package/misc/lib/constants.d.ts +0 -1
- package/misc/lib/decal.d.ts +0 -27
- package/misc/lib/deprecated.d.ts +0 -8
- package/misc/lib/depth-buffer.d.ts +0 -13
- package/misc/lib/fbo.d.ts +0 -49
- package/misc/lib/html/html-content.d.ts +0 -45
- package/misc/lib/html/html.d.ts +0 -31
- package/misc/lib/html/utils.d.ts +0 -14
- package/misc/lib/intersect.d.ts +0 -18
- package/misc/lib/preload.d.ts +0 -14
- package/misc/lib/sampler.d.ts +0 -72
- package/misc/lib/scale-factor.d.ts +0 -3
- package/performances/index.d.ts +0 -7
- package/performances/lib/adaptive-dpr.d.ts +0 -7
- package/performances/lib/adaptive-events.d.ts +0 -6
- package/performances/lib/bvh.d.ts +0 -49
- package/performances/lib/detailed.d.ts +0 -17
- package/performances/lib/instances/instances.d.ts +0 -34
- package/performances/lib/instances/position-mesh.d.ts +0 -20
- package/performances/lib/points/points.d.ts +0 -46
- package/performances/lib/points/position-point.d.ts +0 -21
- package/performances/lib/segments/segment-object.d.ts +0 -17
- package/performances/lib/segments/segments.d.ts +0 -96
- package/shaders/index.d.ts +0 -3
- package/shaders/lib/grid-material.d.ts +0 -69
- package/shaders/lib/mesh-refraction-material.d.ts +0 -8
- package/shaders/lib/point-material.d.ts +0 -14
- package/staging/index.d.ts +0 -21
- package/staging/lib/accumulative-shadows.d.ts +0 -71
- package/staging/lib/backdrop.d.ts +0 -22
- package/staging/lib/bb-anchor.d.ts +0 -17
- package/staging/lib/bounds.d.ts +0 -43
- package/staging/lib/camera-shake.d.ts +0 -26
- package/staging/lib/caustics.d.ts +0 -53
- package/staging/lib/center.d.ts +0 -50
- package/staging/lib/contact-shadows.d.ts +0 -56
- package/staging/lib/environment/environment-resource.d.ts +0 -35
- package/staging/lib/environment/environment.d.ts +0 -101
- package/staging/lib/environment/inject-environment.d.ts +0 -16
- package/staging/lib/float.d.ts +0 -20
- package/staging/lib/lightformer.d.ts +0 -31
- package/staging/lib/mask.d.ts +0 -28
- package/staging/lib/matcap-texture.d.ts +0 -44
- package/staging/lib/normal-texture.d.ts +0 -49
- package/staging/lib/randomized-lights.d.ts +0 -54
- package/staging/lib/render-texture.d.ts +0 -69
- package/staging/lib/sky.d.ts +0 -32
- package/staging/lib/spot-light.d.ts +0 -119
- package/staging/lib/stage.d.ts +0 -184
- package/stats/index.d.ts +0 -1
- package/stats/lib/stats.d.ts +0 -14
- package/vanilla-exports/index.d.ts +0 -32
package/README.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
`angular-three-soba` provides a comprehensive set of utilities and abstractions for building 3D applications with Angular Three. It offers components and helpers for various aspects of your projects, including cameras, controls, loaders, materials, shaders, and more. These components are ported from the popular React Three Fiber [`drei`](https://github.com/pmndrs/drei) library, making it easier for developers familiar with `drei` to leverage its functionality within the Angular ecosystem.
|
|
4
4
|
|
|
5
|
+
## Documentation
|
|
6
|
+
|
|
7
|
+
All public APIs are documented with JSDoc comments. Your IDE will provide inline documentation, parameter hints, and examples as you code.
|
|
8
|
+
|
|
5
9
|
## Installation
|
|
6
10
|
|
|
7
11
|
```bash
|
package/abstractions/README.md
CHANGED
|
@@ -17,6 +17,8 @@ npm install troika-three-text three-mesh-bvh
|
|
|
17
17
|
|
|
18
18
|
## TOC
|
|
19
19
|
|
|
20
|
+
- [NgtsBillboard](#ngtsbillboard)
|
|
21
|
+
- [NgtsRoundedBox](#ngtsroundedbox)
|
|
20
22
|
- [NgtsGrid](#ngtsgrid)
|
|
21
23
|
- [NgtsText](#ngtstext)
|
|
22
24
|
- [NgtsText3D](#ngtstext3d)
|
|
@@ -27,9 +29,54 @@ npm install troika-three-text three-mesh-bvh
|
|
|
27
29
|
- [NgtsEdges](#ngtsedges)
|
|
28
30
|
- [NgtsPrismGeometry](#ngtsprismgeometry)
|
|
29
31
|
- [NgtsGradientTexture](#ngtsgradienttexture)
|
|
30
|
-
- [
|
|
32
|
+
- [helper](#helper)
|
|
31
33
|
- [NgtsHelper](#ngtshelper)
|
|
32
34
|
|
|
35
|
+
## NgtsBillboard
|
|
36
|
+
|
|
37
|
+
A component that rotates its contents to always face the camera (billboarding effect). Useful for sprites, labels, or any content that should always face the viewer.
|
|
38
|
+
|
|
39
|
+
### Object Inputs (NgtsBillboardOptions)
|
|
40
|
+
|
|
41
|
+
| Property | Description | Default Value |
|
|
42
|
+
| -------- | ----------------------------------------------------------------------------- | ------------- |
|
|
43
|
+
| `follow` | Whether the billboard should follow (face) the camera. | `true` |
|
|
44
|
+
| `lockX` | Lock rotation on the X axis, preventing the billboard from rotating around X. | `false` |
|
|
45
|
+
| `lockY` | Lock rotation on the Y axis, preventing the billboard from rotating around Y. | `false` |
|
|
46
|
+
| `lockZ` | Lock rotation on the Z axis, preventing the billboard from rotating around Z. | `false` |
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<ngts-billboard [options]="{ follow: true, lockY: true }">
|
|
50
|
+
<ngt-mesh>
|
|
51
|
+
<ngt-plane-geometry />
|
|
52
|
+
<ngt-mesh-basic-material />
|
|
53
|
+
</ngt-mesh>
|
|
54
|
+
</ngts-billboard>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## NgtsRoundedBox
|
|
58
|
+
|
|
59
|
+
A component that renders a box with rounded edges. Creates smooth, beveled corners on all edges of the box.
|
|
60
|
+
|
|
61
|
+
### Object Inputs (NgtsRoundedBoxOptions)
|
|
62
|
+
|
|
63
|
+
| Property | Description | Default Value |
|
|
64
|
+
| --------------- | ---------------------------------------------------------- | ------------- |
|
|
65
|
+
| `width` | Width of the box (X-axis). | `1` |
|
|
66
|
+
| `height` | Height of the box (Y-axis). | `1` |
|
|
67
|
+
| `depth` | Depth of the box (Z-axis). | `1` |
|
|
68
|
+
| `radius` | Radius of the rounded corners. | `0.05` |
|
|
69
|
+
| `smoothness` | Number of curve segments for corner smoothness. | `4` |
|
|
70
|
+
| `bevelSegments` | Number of bevel segments. | `4` |
|
|
71
|
+
| `steps` | Number of extrusion steps. | `1` |
|
|
72
|
+
| `creaseAngle` | Angle threshold for creased normals calculation (radians). | `0.4` |
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<ngts-rounded-box [options]="{ width: 2, height: 1, depth: 1, radius: 0.1 }">
|
|
76
|
+
<ngt-mesh-standard-material color="orange" />
|
|
77
|
+
</ngts-rounded-box>
|
|
78
|
+
```
|
|
79
|
+
|
|
33
80
|
## NgtsGrid
|
|
34
81
|
|
|
35
82
|
A y-up oriented, shader-based grid implementation.
|
|
@@ -38,21 +85,21 @@ This component renders a grid using a shader material, allowing for efficient re
|
|
|
38
85
|
|
|
39
86
|
### Object Inputs (NgtsGridOptions)
|
|
40
87
|
|
|
41
|
-
| Property | Description | Default Value
|
|
42
|
-
| ------------------ | ------------------------------------------------------------------------------------------------------------ |
|
|
43
|
-
| `planeArgs` | Default plane-geometry arguments. | `[]`
|
|
44
|
-
| `cellSize` | Cell size. | `0.5`
|
|
45
|
-
| `cellThickness` | Cell thickness. | `0.5`
|
|
46
|
-
| `cellColor` | Cell color. | `'black'`
|
|
47
|
-
| `sectionSize` | Section size. | `1`
|
|
48
|
-
| `sectionThickness` | Section thickness. | `1`
|
|
49
|
-
| `sectionColor` | Section color. | `'#2080ff'`
|
|
50
|
-
| `infiniteGrid` | Display the grid infinitely. | `false`
|
|
51
|
-
| `followCamera` | Follow camera. | `false`
|
|
52
|
-
| `fadeDistance` | Fade distance. | `100`
|
|
53
|
-
| `fadeStrength` | Fade strength. | `1`
|
|
54
|
-
| `fadeFrom` | Fade from camera (1) or origin (0), or somewhere in between. | `
|
|
55
|
-
| `side` | Which side of the faces will be rendered. Can be `THREE.FrontSide`, `THREE.BackSide`, or `THREE.DoubleSide`. | `THREE.
|
|
88
|
+
| Property | Description | Default Value |
|
|
89
|
+
| ------------------ | ------------------------------------------------------------------------------------------------------------ | ---------------- |
|
|
90
|
+
| `planeArgs` | Default plane-geometry arguments. | `[]` |
|
|
91
|
+
| `cellSize` | Cell size. | `0.5` |
|
|
92
|
+
| `cellThickness` | Cell thickness. | `0.5` |
|
|
93
|
+
| `cellColor` | Cell color. | `'black'` |
|
|
94
|
+
| `sectionSize` | Section size. | `1` |
|
|
95
|
+
| `sectionThickness` | Section thickness. | `1` |
|
|
96
|
+
| `sectionColor` | Section color. | `'#2080ff'` |
|
|
97
|
+
| `infiniteGrid` | Display the grid infinitely. | `false` |
|
|
98
|
+
| `followCamera` | Follow camera. | `false` |
|
|
99
|
+
| `fadeDistance` | Fade distance. | `100` |
|
|
100
|
+
| `fadeStrength` | Fade strength. | `1` |
|
|
101
|
+
| `fadeFrom` | Fade from camera (1) or origin (0), or somewhere in between. | `1` |
|
|
102
|
+
| `side` | Which side of the faces will be rendered. Can be `THREE.FrontSide`, `THREE.BackSide`, or `THREE.DoubleSide`. | `THREE.BackSide` |
|
|
56
103
|
|
|
57
104
|
```html
|
|
58
105
|
<ngts-grid />
|
|
@@ -60,43 +107,56 @@ This component renders a grid using a shader material, allowing for efficient re
|
|
|
60
107
|
|
|
61
108
|
## NgtsText
|
|
62
109
|
|
|
63
|
-
High-quality text rendering with signed distance fields (SDF) and antialiasing, using `troika-three-text
|
|
110
|
+
High-quality text rendering with signed distance fields (SDF) and antialiasing, using `troika-three-text`.
|
|
64
111
|
|
|
65
112
|
This component renders high-quality text using SDF and antialiasing techniques. It supports various options for customizing the appearance of the text, such as font, font size, color, alignment, and more.
|
|
66
113
|
|
|
114
|
+
### Inputs
|
|
115
|
+
|
|
116
|
+
| Input | Description | Required |
|
|
117
|
+
| ------ | ----------------------- | -------- |
|
|
118
|
+
| `text` | Text content to render. | Yes |
|
|
119
|
+
|
|
67
120
|
### Object Inputs (NgtsTextOptions)
|
|
68
121
|
|
|
69
|
-
| Property
|
|
70
|
-
|
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
122
|
+
| Property | Description | Default Value |
|
|
123
|
+
| --------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------- |
|
|
124
|
+
| `font` | URL to the font file (supports .ttf, .otf, .woff). | `undefined` |
|
|
125
|
+
| `fontSize` | Font size in world units. | `1` |
|
|
126
|
+
| `color` | Text color. | `undefined` |
|
|
127
|
+
| `fontWeight` | Font weight (numeric or string like 'bold'). | `undefined` |
|
|
128
|
+
| `fontStyle` | Font style. Can be `'italic'` or `'normal'`. | `undefined` |
|
|
129
|
+
| `maxWidth` | Maximum width for text wrapping in world units. | `undefined` |
|
|
130
|
+
| `lineHeight` | Line height multiplier. | `undefined` |
|
|
131
|
+
| `letterSpacing` | Letter spacing in world units. | `undefined` |
|
|
132
|
+
| `textAlign` | Text alignment. Can be `'left'`, `'right'`, `'center'`, or `'justify'`. | `undefined` |
|
|
133
|
+
| `anchorX` | Horizontal anchor point. Can be `'left'`, `'center'`, `'right'`, or a number. | `'center'` |
|
|
134
|
+
| `anchorY` | Vertical anchor point. Can be `'top'`, `'top-baseline'`, `'middle'`, `'bottom-baseline'`, `'bottom'`, or a number. | `'middle'` |
|
|
135
|
+
| `clipRect` | Clipping rectangle [minX, minY, maxX, maxY]. | `undefined` |
|
|
136
|
+
| `depthOffset` | Depth offset for z-fighting prevention. | `undefined` |
|
|
137
|
+
| `direction` | Text direction for bidirectional text. Can be `'auto'`, `'ltr'`, or `'rtl'`. | `undefined` |
|
|
138
|
+
| `overflowWrap` | How to handle text overflow and wrapping. Can be `'normal'` or `'break-word'`. | `undefined` |
|
|
139
|
+
| `whiteSpace` | Whitespace handling mode. Can be `'normal'`, `'overflowWrap'`, or `'nowrap'`. | `undefined` |
|
|
140
|
+
| `outlineWidth` | Width of the text outline. | `undefined` |
|
|
141
|
+
| `outlineOffsetX` | Horizontal offset for the outline. | `undefined` |
|
|
142
|
+
| `outlineOffsetY` | Vertical offset for the outline. | `undefined` |
|
|
143
|
+
| `outlineBlur` | Blur radius for the outline. | `undefined` |
|
|
144
|
+
| `outlineColor` | Color of the text outline. | `undefined` |
|
|
145
|
+
| `outlineOpacity` | Opacity of the text outline (0-1). | `undefined` |
|
|
146
|
+
| `strokeWidth` | Width of the text stroke. | `undefined` |
|
|
147
|
+
| `strokeColor` | Color of the text stroke. | `undefined` |
|
|
148
|
+
| `strokeOpacity` | Opacity of the text stroke (0-1). | `undefined` |
|
|
149
|
+
| `fillOpacity` | Opacity of the text fill (0-1). | `undefined` |
|
|
150
|
+
| `sdfGlyphSize` | Size of the SDF glyph texture. Higher values improve quality but use more memory. | `64` |
|
|
151
|
+
| `debugSDF` | Enable debug visualization of the SDF texture. | `undefined` |
|
|
152
|
+
| `characters` | Characters to pre-render for the font. Improves performance for known character sets. | `undefined` |
|
|
153
|
+
| `glyphGeometryDetail` | Detail level for glyph geometry. | `undefined` |
|
|
154
|
+
|
|
155
|
+
### Outputs
|
|
156
|
+
|
|
157
|
+
| Output | Description |
|
|
158
|
+
| -------- | -------------------------------------------------------------------------------------------------------- |
|
|
159
|
+
| `synced` | Emitted when the text has been synced and is ready for rendering. Returns the Troika Text mesh instance. |
|
|
100
160
|
|
|
101
161
|
```html
|
|
102
162
|
<ngts-text text="Hello, World!" />
|
|
@@ -104,44 +164,58 @@ This component renders high-quality text using SDF and antialiasing techniques.
|
|
|
104
164
|
|
|
105
165
|
## NgtsText3D
|
|
106
166
|
|
|
107
|
-
Renders 3D text using
|
|
167
|
+
Renders 3D text using Three.js TextGeometry.
|
|
108
168
|
|
|
109
169
|
This component renders 3D text using TextGeometry. It requires fonts in JSON format generated through typeface.json.
|
|
110
170
|
|
|
171
|
+
### Inputs
|
|
172
|
+
|
|
173
|
+
| Input | Description | Required |
|
|
174
|
+
| ------ | ----------------------------------------------------------------------------- | -------- |
|
|
175
|
+
| `font` | Font source. Can be a URL to a typeface.json file or a preloaded font object. | Yes |
|
|
176
|
+
| `text` | Text content to render as 3D geometry. | Yes |
|
|
177
|
+
|
|
111
178
|
### Object Inputs (NgtsText3DOptions)
|
|
112
179
|
|
|
113
|
-
| Property | Description
|
|
114
|
-
| ---------------- |
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
123
|
-
| `
|
|
124
|
-
| `
|
|
125
|
-
| `smooth` |
|
|
180
|
+
| Property | Description | Default Value |
|
|
181
|
+
| ---------------- | -------------------------------------------------------- | ------------- |
|
|
182
|
+
| `size` | Font size. | `1` |
|
|
183
|
+
| `height` | Text extrusion height. | `0.2` |
|
|
184
|
+
| `curveSegments` | Number of curve segments. | `8` |
|
|
185
|
+
| `bevelEnabled` | Enable bevel. | `false` |
|
|
186
|
+
| `bevelThickness` | Bevel thickness. | `0.1` |
|
|
187
|
+
| `bevelSize` | Bevel size. | `0.01` |
|
|
188
|
+
| `bevelOffset` | Bevel offset. | `0` |
|
|
189
|
+
| `bevelSegments` | Number of bevel segments for smoother beveled edges. | `4` |
|
|
190
|
+
| `letterSpacing` | Letter spacing. | `0` |
|
|
191
|
+
| `lineHeight` | Line height multiplier. | `1` |
|
|
192
|
+
| `smooth` | Threshold for merging vertices to create smooth normals. | `undefined` |
|
|
126
193
|
|
|
127
194
|
```html
|
|
128
|
-
<ngts-text-3d
|
|
195
|
+
<ngts-text-3d font="path/to/font.json" text="Hello, World!">
|
|
196
|
+
<ngt-mesh-standard-material color="gold" />
|
|
197
|
+
</ngts-text-3d>
|
|
129
198
|
```
|
|
130
199
|
|
|
131
200
|
## NgtsLine
|
|
132
201
|
|
|
133
202
|
Renders a `THREE.Line2` or `THREE.LineSegments2` (depending on the value of `segments`).
|
|
134
203
|
|
|
204
|
+
### Inputs
|
|
205
|
+
|
|
206
|
+
| Input | Description | Required |
|
|
207
|
+
| -------- | ------------------------------------------------------------------------------ | -------- |
|
|
208
|
+
| `points` | Array of points. Accepts Vector3, Vector2, coordinate tuples, or flat numbers. | Yes |
|
|
209
|
+
|
|
135
210
|
### Object Inputs (NgtsLineOptions)
|
|
136
211
|
|
|
137
|
-
| Property | Description
|
|
138
|
-
| -------------- |
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
144
|
-
| `vertexColors` | Vertex colors. | undefined |
|
|
212
|
+
| Property | Description | Default Value |
|
|
213
|
+
| -------------- | -------------------------------------------------------------------- | ------------- |
|
|
214
|
+
| `color` | Line color. | `0xffffff` |
|
|
215
|
+
| `lineWidth` | Line width in pixels. | `1` |
|
|
216
|
+
| `segments` | Whether to render as `THREE.LineSegments2` instead of `THREE.Line2`. | `false` |
|
|
217
|
+
| `dashed` | Whether the line is dashed. | `undefined` |
|
|
218
|
+
| `vertexColors` | Array of colors for vertex coloring. Supports RGB or RGBA tuples. | `undefined` |
|
|
145
219
|
|
|
146
220
|
```html
|
|
147
221
|
<ngts-line [points]="[[0, 0, 0], [1, 1, 1]]" />
|
|
@@ -151,14 +225,22 @@ Renders a `THREE.Line2` or `THREE.LineSegments2` (depending on the value of `seg
|
|
|
151
225
|
|
|
152
226
|
Renders a `THREE.Line2` using `THREE.QuadraticBezierCurve3` for interpolation.
|
|
153
227
|
|
|
228
|
+
### Inputs
|
|
229
|
+
|
|
230
|
+
| Input | Description | Default Value |
|
|
231
|
+
| ------- | --------------------------------------------------------- | ------------- |
|
|
232
|
+
| `start` | Starting point of the bezier curve. | `[0, 0, 0]` |
|
|
233
|
+
| `end` | Ending point of the bezier curve. | `[0, 0, 0]` |
|
|
234
|
+
| `mid` | Control point. If not provided, automatically calculated. | `undefined` |
|
|
235
|
+
|
|
154
236
|
### Object Inputs (NgtsQuadraticBezierLineOptions)
|
|
155
237
|
|
|
156
|
-
| Property
|
|
157
|
-
|
|
|
158
|
-
| `
|
|
159
|
-
| `
|
|
160
|
-
|
|
161
|
-
|
|
238
|
+
| Property | Description | Default Value |
|
|
239
|
+
| ----------- | --------------------------------------------------- | ------------- |
|
|
240
|
+
| `segments` | Number of segments to approximate the bezier curve. | `20` |
|
|
241
|
+
| `lineWidth` | Line width. | `1` |
|
|
242
|
+
|
|
243
|
+
Also accepts all `NgtsLineOptions` except `segments` (boolean).
|
|
162
244
|
|
|
163
245
|
```html
|
|
164
246
|
<ngts-quadratic-bezier-line [start]="[0, 0, 0]" [end]="[1, 1, 1]" />
|
|
@@ -168,15 +250,23 @@ Renders a `THREE.Line2` using `THREE.QuadraticBezierCurve3` for interpolation.
|
|
|
168
250
|
|
|
169
251
|
Renders a `THREE.Line2` using `THREE.CubicBezierCurve3` for interpolation.
|
|
170
252
|
|
|
253
|
+
### Inputs
|
|
254
|
+
|
|
255
|
+
| Input | Description | Required |
|
|
256
|
+
| ------- | --------------------- | -------- |
|
|
257
|
+
| `start` | Start point. | Yes |
|
|
258
|
+
| `end` | End point. | Yes |
|
|
259
|
+
| `midA` | First control point. | Yes |
|
|
260
|
+
| `midB` | Second control point. | Yes |
|
|
261
|
+
|
|
171
262
|
### Object Inputs (NgtsCubicBezierLineOptions)
|
|
172
263
|
|
|
173
|
-
| Property
|
|
174
|
-
|
|
|
175
|
-
| `
|
|
176
|
-
| `
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
| `options` | Line options. | `{}` |
|
|
264
|
+
| Property | Description | Default Value |
|
|
265
|
+
| ----------- | --------------------------------------------------- | ------------- |
|
|
266
|
+
| `segments` | Number of segments to divide the Bezier curve into. | `20` |
|
|
267
|
+
| `lineWidth` | Line width. | `1` |
|
|
268
|
+
|
|
269
|
+
Also accepts all `NgtsLineOptions` except `segments` (boolean).
|
|
180
270
|
|
|
181
271
|
```html
|
|
182
272
|
<ngts-cubic-bezier-line [start]="[0, 0, 0]" [end]="[1, 1, 1]" [midA]="[0.5, 0.5, 0.5]" [midB]="[0.5, 0.5, 0.5]" />
|
|
@@ -186,15 +276,23 @@ Renders a `THREE.Line2` using `THREE.CubicBezierCurve3` for interpolation.
|
|
|
186
276
|
|
|
187
277
|
Renders a `THREE.Line2` using `THREE.CatmullRomCurve3` for interpolation.
|
|
188
278
|
|
|
279
|
+
### Inputs
|
|
280
|
+
|
|
281
|
+
| Input | Description | Required |
|
|
282
|
+
| -------- | ---------------- | -------- |
|
|
283
|
+
| `points` | Array of points. | Yes |
|
|
284
|
+
|
|
189
285
|
### Object Inputs (NgtsCatmullRomLineOptions)
|
|
190
286
|
|
|
191
287
|
| Property | Description | Default Value |
|
|
192
288
|
| ----------- | ---------------------------------------------------------------------- | --------------- |
|
|
193
|
-
| `
|
|
194
|
-
| `closed` | Whether the curve is closed. | `false` |
|
|
289
|
+
| `closed` | Whether the curve should be closed (connect end to start). | `false` |
|
|
195
290
|
| `curveType` | Type of curve. Can be `'centripetal'`, `'chordal'`, or `'catmullrom'`. | `'centripetal'` |
|
|
196
|
-
| `tension` | Tension
|
|
197
|
-
| `
|
|
291
|
+
| `tension` | Tension parameter for the curve (0 to 1). | `0.5` |
|
|
292
|
+
| `segments` | Number of segments to divide the curve into for rendering. | `20` |
|
|
293
|
+
| `lineWidth` | Line width. | `1` |
|
|
294
|
+
|
|
295
|
+
Also accepts all `NgtsLineOptions` except `segments` (boolean).
|
|
198
296
|
|
|
199
297
|
```html
|
|
200
298
|
<ngts-catmull-rom-line [points]="[[0, 0, 0], [1, 1, 1]]" />
|
|
@@ -206,16 +304,19 @@ Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/Edge
|
|
|
206
304
|
|
|
207
305
|
### Object Inputs (NgtsEdgesOptions)
|
|
208
306
|
|
|
209
|
-
| Property | Description
|
|
210
|
-
| ----------- |
|
|
211
|
-
| `geometry` | Geometry to use for the edges.
|
|
212
|
-
| `threshold` |
|
|
307
|
+
| Property | Description | Default Value |
|
|
308
|
+
| ----------- | --------------------------------------------------------------------- | ------------- |
|
|
309
|
+
| `geometry` | Geometry to use for the edges. If not provided, uses parent geometry. | `undefined` |
|
|
310
|
+
| `threshold` | Angle threshold in degrees for edge detection. | `15` |
|
|
311
|
+
| `lineWidth` | Width of the edge lines. | `1` |
|
|
312
|
+
|
|
313
|
+
Also accepts all `NgtsLineOptions`.
|
|
213
314
|
|
|
214
315
|
```html
|
|
215
316
|
<ngt-mesh>
|
|
216
317
|
<ngt-box-geometry />
|
|
217
318
|
<ngt-mesh-basic-material />
|
|
218
|
-
<ngts-edges [options]="{ threshold: 15, scale: 1.1, color: 'white',
|
|
319
|
+
<ngts-edges [options]="{ threshold: 15, scale: 1.1, color: 'white', lineWidth: 4 }" />
|
|
219
320
|
</ngt-mesh>
|
|
220
321
|
```
|
|
221
322
|
|
|
@@ -223,11 +324,21 @@ Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/Edge
|
|
|
223
324
|
|
|
224
325
|
Abstracts [THREE.ExtrudeGeometry](https://threejs.org/docs/#api/en/geometries/ExtrudeGeometry) to create a prism geometry.
|
|
225
326
|
|
|
327
|
+
### Inputs
|
|
328
|
+
|
|
329
|
+
| Input | Description | Required |
|
|
330
|
+
| ---------- | ------------------------------------------------ | -------- |
|
|
331
|
+
| `vertices` | Array of 2D vertices defining the base shape. | Yes |
|
|
332
|
+
| `attach` | Defines how the geometry attaches to its parent. | No |
|
|
333
|
+
|
|
226
334
|
### Object Inputs (NgtsPrismGeometryOptions)
|
|
227
335
|
|
|
228
|
-
| Property
|
|
229
|
-
|
|
|
230
|
-
| `
|
|
336
|
+
| Property | Description | Default Value |
|
|
337
|
+
| -------------- | ------------------------------ | ------------- |
|
|
338
|
+
| `height` | Height of the prism extrusion. | `1` |
|
|
339
|
+
| `bevelEnabled` | Enable bevel. | `false` |
|
|
340
|
+
|
|
341
|
+
Also accepts all `THREE.ExtrudeGeometryOptions` except `depth`.
|
|
231
342
|
|
|
232
343
|
```html
|
|
233
344
|
<ngt-mesh>
|
|
@@ -240,17 +351,23 @@ Abstracts [THREE.ExtrudeGeometry](https://threejs.org/docs/#api/en/geometries/Ex
|
|
|
240
351
|
|
|
241
352
|
A declarative `THREE.Texture` which attaches to "map" by default. You can use this to create gradient backgrounds.
|
|
242
353
|
|
|
354
|
+
### Inputs
|
|
355
|
+
|
|
356
|
+
| Input | Description | Required |
|
|
357
|
+
| -------- | ------------------------------------------------------- | -------- |
|
|
358
|
+
| `stops` | Gradient stops array. | Yes |
|
|
359
|
+
| `colors` | Gradient colors array. Must be the same size as `stops` | Yes |
|
|
360
|
+
| `attach` | Defines how the texture attaches to its parent. | No |
|
|
361
|
+
|
|
243
362
|
### Object Inputs (NgtsGradientTextureOptions)
|
|
244
363
|
|
|
245
|
-
| Property | Description
|
|
246
|
-
| ------------------- |
|
|
247
|
-
| `
|
|
248
|
-
| `
|
|
249
|
-
| `
|
|
250
|
-
| `
|
|
251
|
-
| `
|
|
252
|
-
| `innerCircleRadius` | Inner circle radius for radial gradients. | `0` |
|
|
253
|
-
| `outerCircleRadius` | Outer circle radius for radial gradients. | `auto` |
|
|
364
|
+
| Property | Description | Default Value |
|
|
365
|
+
| ------------------- | ------------------------------------------------ | ------------- |
|
|
366
|
+
| `type` | Gradient type. Can be `'linear'` or `'radial'`. | `'linear'` |
|
|
367
|
+
| `size` | Height of the gradient texture canvas in pixels. | `1024` |
|
|
368
|
+
| `width` | Width of the gradient texture canvas in pixels. | `16` |
|
|
369
|
+
| `innerCircleRadius` | Inner circle radius for radial gradients. | `0` |
|
|
370
|
+
| `outerCircleRadius` | Outer circle radius for radial gradients. | `'auto'` |
|
|
254
371
|
|
|
255
372
|
```html
|
|
256
373
|
<ngt-mesh-basic-material>
|
|
@@ -258,17 +375,19 @@ A declarative `THREE.Texture` which attaches to "map" by default. You can use th
|
|
|
258
375
|
</ngt-mesh-basic-material>
|
|
259
376
|
```
|
|
260
377
|
|
|
261
|
-
## `
|
|
378
|
+
## `helper`
|
|
262
379
|
|
|
263
|
-
A
|
|
380
|
+
A function to add helpers to existing nodes in the scene. It handles removal of the helper on destroy and auto-updates it by default.
|
|
264
381
|
|
|
265
382
|
```ts
|
|
266
383
|
class MyCmp {
|
|
267
384
|
mesh = viewChild.required<ElementRef<Mesh>>('mesh');
|
|
268
|
-
|
|
385
|
+
boxHelper = helper(this.mesh, () => BoxHelper, { args: () => ['cyan'] });
|
|
269
386
|
}
|
|
270
387
|
```
|
|
271
388
|
|
|
389
|
+
> **Note:** `injectHelper` is deprecated. Use `helper` instead.
|
|
390
|
+
|
|
272
391
|
### `NgtsHelper`
|
|
273
392
|
|
|
274
393
|
A declarative way to add helpers to existing nodes in the scene. It handles removal of the helper on destroy and auto-updates it by default.
|