Skip to content

jniac/three-point-text-helper

Repository files navigation

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

Install

NPM:

npm i @jniac/three-point-text-helper

Or plain JS, using github pages hosting:

import { PointTextHelper } from 'https://jniac.github.io/three-point-text-helper/dist/PointTextHelper.three.js'

Usage

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
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:
npm run examples-webpack

Build

npx rollup -c

About

"Point Text" Helper for three JS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published