Now understanding the CSS3DRenderer is flat + DOM.
Been learning about the WebGLRenderer:
Is there a way to create 3D text at runtime?
Without using the sIFR approach:
https://threejs.org/docs/#api/geometries/TextGeometry
helvetiker_regular.typeface.json
There are ways, yes. What are your goals? TextGeometry is included in three.js because it’s an easy and useful option, if there’s something that makes you need to avoid it, it would be helpful to know what that constraint is.
For example, you can use something like html2canvas to create a texture. Handles arbitrary characters, but not efficient for large amounts of body text, may not be very crisp.
In A-Frame we use three-bmfont-text. Crisp and performs well, you can generate MSDF fonts easily, but if you need to be prepared to generate any character in the Chinese alphabet at runtime, that’s harder.
These are flat text alternatives, similar to three-bmfont-text mentioned above:
http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
Why do fonts need to be represented in the .json format? = educate me
Is it not possible to create 3D text at runtime in Three.js?
What font?
Any ideas? Examples?
A font coming from Google Fonts
link href=“https://fonts.googleapis.com/css?family=Roboto”
Yep. And how to tell to Three.js to draw those glyphs of Google Fonts?
Drawing glyphs with typeface.json and possibly the only way with the WebGLRenderer, wondering if there is another way to load a font without using .json @ runtime?
Why not to use textures with text of desired font for displacement, normal and bump maps?
When using typeface.json to load a font that was a .ttf = 45K can increase as much as 450K in a json file.
I like the idea of what you mentioned would like to take it a step further
Found a related article after going through this discussion, which would have filled in a gap of knowledge not known at the time:
Paraphasing from stackoverflow:
Using @font-face is the standard way and does not require a JavaScript encoding of a font when using HTML/CSS
if you want to be able to write 3D text into the scene using TextGeometry then you must use typeface.js
In order to use arbtirary fonts within Three.JS, first you must convert the font into a usable form e.g. a typeface javascript file by processing a .ttf file = Facetype.js
Which can then be encapsulated within a Mesh object and rendered in a Scene.
I’m saying about something like that https://threejs.org/examples/?q=displ#webgl_materials_displacementmap
Wow I had forgotten about this demo that is a good point with displacement map, I know this technique, thinking to save on time of editing the map this could be done with a runtime google font?
This is all about the glyph that is how a font is represented, yes. I didn’t pick up on glyphs until i opened: https://github.com/mrdoob/three.js/blob/master/examples/fonts/helvetiker_bold.typeface.json
What intrigues me is the capability of setText inside of TextGeometry:
https://threejs.org/docs/#api/geometries/TextGeometry
Need someone to educate me as to why typeface.json is the way to load a font into Three.js?
This is because of the Three.js Font to FontLoader, why typeface.json is used
Origins on glyph are from WebGL