Point Text Helper

Resources
, , , ,
1

May someone find useful to display (debug) texts, small texts (max chars: 12), but a lot of texts (> 10k) ?

Here is a tool i made, because i need it.
Based on THREE.Points for fast drawing (instancing).
Any feedback will be highly appreciated.

Still wip, but on npm (typescript behind, so declaration are available)

vertices
vertices1600Ă—1200 130 KB

https://jniac.github.io/three-point-text-helper/tests/examples-webpack/dist/vertices/

vertices-stress
vertices-stress1600Ă—1200 703 KB

https://jniac.github.io/three-point-text-helper/tests/examples-webpack/dist/vertices-stress/

vertices-knot
vertices-knot1600Ă—1200 185 KB

https://jniac.github.io/three-point-text-helper/tests/examples-webpack/dist/vertices-knot/

11 Likes
2

Fine thing. :+1:

At the beginning of my work with three.js I wanted to see the arrangement of the vertices and faces, so I did something similar, but simpler with THREE.Line.

function vertexFaceNumbersHelper( mesh, mode, size, color ) {
	//  mode: 0 nothing, 1 vertex, 2 face, 3 vertex & face

Memorized there:

for BufferGeometry
Addon to create special / extended geometries Magic Sphere, Magic Box

for Geometry
[SOLVED] Are segments in a side selectable? - #3 by Frustrated-Programmer

Code also on GitHub

3

hi hofk, thx for the links

I write this tool because i want to achieve this

did you have any insights about this?

4

There exist the possibility to put HTML code instead of raw text?

Or can I put an Image instead?

Greetings

5

Definitively not. Possibilities are very limited (12 chars max). Text is drawn via shader seeking for glyphs in a table texture (atlas). It allows to draw an insane number of texts, but small texts (debugging purposes). The only options are : position, color, size

vertices-stress-2
vertices-stress-23570Ă—2024 2.53 MB

3 Likes
6

Got it. Many thanks as well.

Anyways its seems to be really useful, keep it up.

1 Like
7

@jniac
This looks awesome :slight_smile:
Thank you for sharing!!

But somehow I can’t manage to run the simple example from the GitHub Readme (https://github.com/jniac/three-point-text-helper).

There, the PointTextHelper is added to a mesh wich throws me an error …

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

1

Do you know what I’m doing wrong?

8

Hm, i dont know what’s happening here.
But i can notice that the error seems to come from the mesh being “undefined”, so it’s probably not coming from PointTextHelper.

Since the project is one year old, i’ve made some new tests, just to be sure it’s still compatible with the last version of Threejs. It is :

I’ve added some online demo, in “plain / vanilla” js using the “js” export of the package.

I made a slight improvement (1.0.6): displayVertices accepts BufferGeometry instances, so now the source code of the demo, available here, is quite straight forward :

const knot = new Mesh(
  new TorusKnotGeometry(1.2, .5, 400, 64),
  new MeshBasicMaterial({ color: '#6cf', wireframe: true }),
)
scene.add(knot)

const pth = new PointTextHelper()
scene.add(pth)

pth.displayVertices(knot.geometry, {
  color: '#6cf',
  size: .05,
})
2 Likes
9

@jniac when i change camera to OrthographicCamera，the text was disappeared