search

jupyter-widgets / pythreejs

A Jupyter - Three.js bridge
https://pythreejs.readthedocs.io
Other
936 stars 185 forks source link

2D text overlay "always facing camera" #264

Closed Boomer91 closed 4 years ago

Boomer91 commented 5 years ago

I have a bunch of nodepoints in the 3D scene and would like to label the nodes.

Is there an easy way of adding 2D text to the scene which always faces the camera but is tied to a 3DObject?

Thanks

vidartf commented 5 years ago

A 2D surface always facing the camera is called a sprite in threejs. If you want text on it, you can use the custom pythreejs helper class TextTexture, for rendering a string onto a texture. If you apply that texture to your sprite, you should be ok.

Note: A known "issue" with using a rendered texture of the text is that it has a fixed resolution, meaning that if the user can zoom in on the text, the pixels might be visible. There are workarounds for this, but this might not be an issue when using sprites.

Boomer91 commented 4 years ago

Thanks, this was helpful!

The sprit background is always black. Is there a way to make the sprite background transparent? The opacity parameter does not seem to have an effect.

Thanks

vidartf commented 4 years ago

If you are using a partially transparent texture it should work.