Point Text Helper

"Point Text" Helper for ThreeJS

Thousand of tiny texts (labels) in one draw call.

Stress test with "vanilla" js (module).
31 436 texts.

Demos

- triangle
- stress
- effect-composer
- blending

Install

NPM:
``
npm i @jniac/three-point-text-helper
`

Or plain JS, using github pages hosting:
`javascript
import { PointTextHelper } from 'https://jniac.github.io/three-point-text-helper/dist/PointTextHelper.three.js'
`




Usage

`javascript
import * as THREE from 'three'
import { PointTextHelper } from '@jniac/three-point-text-helper'

//- snip -//

const pth = new PointTextHelper({ charMax:10 })
mesh.add(pth)

// display some text
pth.display({ text:'hello!', color:'cyan' })
pth.display({ text:'top', color:'cyan', size:.5, position:new THREE.Vector3(0, 1, 0) })
pth.display({ text:'bottom', color:'cyan', size:.5, position:{ x:0, y:-1, z:0 } })

// or, from a mesh...
const mesh = new THREE.Mesh(
new THREE.IcosahedronGeometry(1, 0),
new THREE.MeshBasicMaterial({ color:'cyan', wireframe:true }),
)
scene.add(mesh)

// ...display an array of vertices:
pth.displayVertices(mesh.geometry.vertices)

// ...or a "position" buffer:
// (be aware that in buffer geometries, vertices are most often duplicated)
const geometry = new THREE.SphereBufferGeometry(1.4, 12, 24)
pth.displayVertices(geometry.getAttribute('position').array, {
color: '#fc9',
size: .3,
format: index => #${index},
})
`

"dev" mode & examples


from a local repository, 2 process:
- run the library itself + static server
`shell
npm run dev
`
It will watch over any changes into the src folder, and re-build if any.
http://localhost:8000

For the "vanilla" js examples, this is enough:
http://localhost:8000/tests/examples-vanilla/triangle/

- but for the webpack examples, one may start the webpack service:
`shell
npm run examples-webpack
`

Build


`shell
npx rollup -c
``