three-text 0.2.2 → 0.2.3
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 +25 -5
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/index.min.cjs +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/three/index.cjs +2 -2
- package/dist/three/index.js +3 -3
- package/dist/three/react.cjs +0 -7
- package/dist/three/react.js +0 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,11 +26,8 @@ Under the hood, three-text relies on [HarfBuzz](https://github.com/harfbuzz/harf
|
|
|
26
26
|
- [Overview](#overview)
|
|
27
27
|
- [Getting started](#getting-started)
|
|
28
28
|
- [Three.js](#threejs)
|
|
29
|
-
- [p5.js](#p5js)
|
|
30
29
|
- [React Three Fiber](#react-three-fiber)
|
|
31
|
-
- [
|
|
32
|
-
- [WebGPU](#webgpu)
|
|
33
|
-
- [Core](#core)
|
|
30
|
+
- [p5.js](#p5js)
|
|
34
31
|
- [Development and examples](#development-and-examples)
|
|
35
32
|
- [Architecture](#architecture)
|
|
36
33
|
- [Why three-text?](#why-three-text)
|
|
@@ -94,6 +91,26 @@ const mesh = new THREE.Mesh(result.geometry, material);
|
|
|
94
91
|
scene.add(mesh);
|
|
95
92
|
```
|
|
96
93
|
|
|
94
|
+
#### React Three Fiber
|
|
95
|
+
|
|
96
|
+
```jsx
|
|
97
|
+
import { Canvas } from '@react-three/fiber';
|
|
98
|
+
import { Text } from 'three-text/three/react';
|
|
99
|
+
|
|
100
|
+
Text.setHarfBuzzPath('/hb/hb.wasm');
|
|
101
|
+
|
|
102
|
+
function App() {
|
|
103
|
+
return (
|
|
104
|
+
<Canvas>
|
|
105
|
+
<ambientLight />
|
|
106
|
+
<Text font="/fonts/Font.woff" size={72} depth={10}>
|
|
107
|
+
Hello React
|
|
108
|
+
</Text>
|
|
109
|
+
</Canvas>
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
97
114
|
#### p5.js
|
|
98
115
|
|
|
99
116
|
```javascript
|
|
@@ -123,6 +140,9 @@ function draw() {
|
|
|
123
140
|
}
|
|
124
141
|
```
|
|
125
142
|
|
|
143
|
+
`createThreeTextGeometry()` accepts all the same options as Three.js (`layout`, `fontVariations`, `depth`, etc.) and returns `{ geometry, planeBounds, glyphs }`. Use `planeBounds` to center the text
|
|
144
|
+
|
|
145
|
+
|
|
126
146
|
### Setup
|
|
127
147
|
|
|
128
148
|
The library bundles harfbuzzjs but requires the WASM binary to be available at runtime. You have two options for providing it:
|
|
@@ -969,7 +989,7 @@ The build generates multiple module formats for core and all adapters:
|
|
|
969
989
|
|
|
970
990
|
## Acknowledgements
|
|
971
991
|
|
|
972
|
-
`three-text` is built on HarfBuzz and TeX, and this library would not exist without the authors and communities who contribute to, support, and steward these projects. Thanks to Theo Honohan and Yasi Perera for advice on graphics
|
|
992
|
+
`three-text` is built on HarfBuzz and TeX, and started as a Three.js project; this library would not exist without the authors and communities who contribute to, support, and steward these projects. Thanks to Theo Honohan and Yasi Perera for the advice on graphics
|
|
973
993
|
|
|
974
994
|
## License
|
|
975
995
|
|
package/dist/index.cjs
CHANGED
package/dist/index.js
CHANGED
package/dist/index.min.cjs
CHANGED
package/dist/index.min.js
CHANGED
package/dist/index.umd.js
CHANGED
package/dist/index.umd.min.js
CHANGED
package/dist/three/index.cjs
CHANGED
|
@@ -19,8 +19,8 @@ class Text {
|
|
|
19
19
|
const geometry = new three.BufferGeometry();
|
|
20
20
|
geometry.setAttribute('position', new three.Float32BufferAttribute(coreResult.vertices, 3));
|
|
21
21
|
geometry.setAttribute('normal', new three.Float32BufferAttribute(coreResult.normals, 3));
|
|
22
|
-
geometry.setIndex(
|
|
23
|
-
// Add optional
|
|
22
|
+
geometry.setIndex(new three.Uint32BufferAttribute(coreResult.indices, 1));
|
|
23
|
+
// Add optional color attribute (only if provided)
|
|
24
24
|
if (coreResult.colors) {
|
|
25
25
|
geometry.setAttribute('color', new three.Float32BufferAttribute(coreResult.colors, 3));
|
|
26
26
|
}
|
package/dist/three/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BufferGeometry, Float32BufferAttribute } from 'three';
|
|
1
|
+
import { BufferGeometry, Float32BufferAttribute, Uint32BufferAttribute } from 'three';
|
|
2
2
|
import { Text as Text$1 } from '../index.js';
|
|
3
3
|
|
|
4
4
|
// Three.js adapter - wraps core text processing and returns BufferGeometry
|
|
@@ -17,8 +17,8 @@ class Text {
|
|
|
17
17
|
const geometry = new BufferGeometry();
|
|
18
18
|
geometry.setAttribute('position', new Float32BufferAttribute(coreResult.vertices, 3));
|
|
19
19
|
geometry.setAttribute('normal', new Float32BufferAttribute(coreResult.normals, 3));
|
|
20
|
-
geometry.setIndex(
|
|
21
|
-
// Add optional
|
|
20
|
+
geometry.setIndex(new Uint32BufferAttribute(coreResult.indices, 1));
|
|
21
|
+
// Add optional color attribute (only if provided)
|
|
22
22
|
if (coreResult.colors) {
|
|
23
23
|
geometry.setAttribute('color', new Float32BufferAttribute(coreResult.colors, 3));
|
|
24
24
|
}
|
package/dist/three/react.cjs
CHANGED
|
@@ -72,13 +72,6 @@ const Text$1 = react.forwardRef(function Text(props, ref) {
|
|
|
72
72
|
font,
|
|
73
73
|
...memoizedTextOptions,
|
|
74
74
|
});
|
|
75
|
-
if (text.geometry &&
|
|
76
|
-
!text.geometry.attributes.color &&
|
|
77
|
-
vertexColors) {
|
|
78
|
-
const vertexCount = text.geometry.attributes.position.count;
|
|
79
|
-
const colors = new Float32Array(vertexCount * 3).fill(1.0);
|
|
80
|
-
text.geometry.setAttribute("color", new THREE__namespace.BufferAttribute(colors, 3));
|
|
81
|
-
}
|
|
82
75
|
if (!cancelled) {
|
|
83
76
|
setGeometry(text.geometry);
|
|
84
77
|
if (onLoad)
|
package/dist/three/react.js
CHANGED
|
@@ -51,13 +51,6 @@ const Text$1 = forwardRef(function Text(props, ref) {
|
|
|
51
51
|
font,
|
|
52
52
|
...memoizedTextOptions,
|
|
53
53
|
});
|
|
54
|
-
if (text.geometry &&
|
|
55
|
-
!text.geometry.attributes.color &&
|
|
56
|
-
vertexColors) {
|
|
57
|
-
const vertexCount = text.geometry.attributes.position.count;
|
|
58
|
-
const colors = new Float32Array(vertexCount * 3).fill(1.0);
|
|
59
|
-
text.geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
|
|
60
|
-
}
|
|
61
54
|
if (!cancelled) {
|
|
62
55
|
setGeometry(text.geometry);
|
|
63
56
|
if (onLoad)
|