That wasn’t so trivial to make sprites like that:
I’ve already made some generations of sprites related to meshes, but it was just to increment the y position of the sprite and it was always on the top of the mesh…
At this time it’s a bit different, because of the visualization, two different ways and none of them are near to be in a good way… Some ideas or suggestions?
Attempt 1: https://jsfiddle.net/mqdevWG/ew98125j/5/
Another attempt: https://jsfiddle.net/mqdevWG/ew98125j/9/
Hi!
Could you provide simplified examples of your approaches?
Those two examples, no doubt, look impressive, but there are too much code.
On the explanatory video, there are numbers aligned along axes. In your examples, just a couble of writing(s) “teste”. How do they (writings) have to behave?
Hello, I’m sorry. I couln’t write it yesterday. Here it is;
What I want to do is to have sprites every time that I have this “extra lines”, containing the respective axis text. Something like that (trying to make something like the video I posted yesterday, just with the values side by side):
I have here a Fiddle: https://jsfiddle.net/mqdevWG/Lsuqdfnh/16/
I tried to use de function GridGeometry, every time we create an extra line like that one, I tried using its width to set sprint coordinates, but the effect wasn’t like expected.
Here is the GridGeometry function:
function GridGeometry(width = 1, height = 1, wSeg = 1, hSeg = 1, lExt = [0, 0]){
let seg = new THREE.Vector2(width / wSeg, height / hSeg);
let hlfSeg = seg.clone().multiplyScalar(0.5);
let pts = [], sprite, count=0;
for(let y = 0; y <= hSeg; y++){
pts.push(
new THREE.Vector2(0, y * seg.y),
new THREE.Vector2(width + (hlfSeg.x * lExt[0]), y * seg.y)
)
if(lExt[0]>0){
let msg = 'pt'+count
sprite = makeTextSprite(msg)
scene.add(sprite)
sprite.position.set(width + (hlfSeg.x * lExt[0]) + 1, y * seg.y , 1)
count++;
}
}
for(let x = 0; x <= wSeg; x++){
pts.push(
new THREE.Vector2(x * seg.x, 0),
new THREE.Vector2(x * seg.x, height + (hlfSeg.y * lExt[1]))
)
if(lExt[1]>0){
let msg = 'pt'+count
sprite = makeTextSprite(msg)
scene.add(sprite)
sprite.position.set(x * seg.x, height + (hlfSeg.y * lExt[1]), 1)
count++;
}
}
return new THREE.BufferGeometry().setFromPoints(pts);
}
sprite.scale.set(50, 25, 1.0);
Not sure if sprites need such big scaling. I would comment that line out.
Setting of positions of sprites at the moment of creation of a grid geometry, doesn’t take in count, that after that, you rotate the geometry, so positions of sprites don’t match the grid lines.
Would be a better approach to use a simple 2d text?
Hadn’t thought about this issue of changing position with rotation.
Pass the rotation in the function of creation of grid and rotate vectors there, including positions of sprites
Example: https://jsfiddle.net/prisoner849/mnhkgz3L/
Picture:
I have no words to express such gratitude! 
