@pmndrs/vanilla - npm Package Compare versions

Comparing version 1.12.1 to 1.13.0

package.json

 {
   "name": "@pmndrs/vanilla",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "private": false,
@@ -47,4 +47,5 @@ "publishConfig": {
   "peerDependencies": {
-    "three": ">=0.137"
+    "three": ">=0.137",
+    "troika-three-text": ">=0.46.4"
   }
 }

README.md

@@ -525,2 +525,82 @@ ![logo](logo.jpg)
 
+
+#### Text
+
+[![storybook](https://img.shields.io/badge/-storybook-%23ff69b4)](https://pmndrs.github.io/drei-vanilla/?path=/story/abstractions-text--text-story)
+
+[drei counterpart](https://github.com/pmndrs/drei#text)
+
+Hi-quality text rendering w/ signed distance fields (SDF) and antialiasing, using [troika-3d-text](https://github.com/protectwise/troika/tree/master/packages/troika-3d-text). All of troikas props are valid!
+
+> Required `troika-three-text` >= `0.46.4`
+
+```ts
+export type TextProps = {
+  characters?: string
+  color?: number | string
+  // the text content
+  text: string
+  /** Font size, default: 1 */
+  fontSize?: number
+  maxWidth?: number
+  lineHeight?: number
+  letterSpacing?: number
+  textAlign?: 'left' | 'right' | 'center' | 'justify'
+  font?: string
+  anchorX?: number | 'left' | 'center' | 'right'
+  anchorY?: number | 'top' | 'top-baseline' | 'middle' | 'bottom-baseline' | 'bottom'
+  clipRect?: [number, number, number, number]
+  depthOffset?: number
+  direction?: 'auto' | 'ltr' | 'rtl'
+  overflowWrap?: 'normal' | 'break-word'
+  whiteSpace?: 'normal' | 'overflowWrap' | 'nowrap'
+  outlineWidth?: number | string
+  outlineOffsetX?: number | string
+  outlineOffsetY?: number | string
+  outlineBlur?: number | string
+  outlineColor?: number | string
+  outlineOpacity?: number
+  strokeWidth?: number | string
+  strokeColor?: number | string
+  strokeOpacity?: number
+  fillOpacity?: number
+  sdfGlyphSize?: number
+  debugSDF?: boolean
+  onSync?: (troika: any) => void
+  onPreloadEnd?: () => void
+}
+```
+
+Usage
+
+```jsx
+const text = Text({
+  text: 'Hello World',
+})
+const mesh = new THREE.Mesh(geometry, material)
+mesh.add(text.mesh)
+```
+
+Text function returns the following
+
+```jsx
+export type TextType = {
+  mesh: THREE.Mesh
+  updateProps: (newProps: Partial<TextProps>) => void
+  dispose: () => void
+}
+```
+
+You can preload the font and characters:
+
+```ts
+const preloadRelatedParams = {
+  // support ttf/otf/woff(woff2 is not supported)
+  font: '/your/font/path',
+  characters: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!?.,:;\'"()[]{}<>|/@\\^$-%+=#_&~*',
+  onPreloadEnd: () => {
+    // this is the callback when font and characters are loaded
+  },
+=======
+  
 #### Sprite Animator
@@ -527,0 +607,0 @@

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

235914

increased by2.34%

Number of package files

60

increased by5.26%

Lines of code

3040

increased by3.05%

Number of lines in readme file

692

increased by13.07%

Worsened metrics

Dependency count

2

increased by100%

Number of low quality alerts

18

increased by5.88%

No dependency changes