Description
For short, simple notes and labels, use the Text design. The Text can be used in a viewPort and as a child in the model project.
The Text design is not draggable and its location is set by the position parameter rule.
Shown here is a Text design and a DraggableText design.
Parameter Rules
| font: | A font is a collection of characters with a similar design. These characters include lowercase and uppercase letters, numbers, punctuation marks, and symbols. |
| Example: | Arial ; |
| fontFamily: | The name of the fontFamily to use. This is supported by 2D text only at this time... An example of a font family is Times New Roman, which consists of a roman, italic, bold and bold italic version of the same typeface. |
| Example: | "Times New Roman" |
| FontSpec: | 2D Text only. This object gets added to spec sent to HTML5, and is a way to further customize the output. Not all HTML5 features are supported. |
| Example: | {} |
| fontUrl: | The path to the 3D font file. This is required for 3D Text only. Font files must be specially created; these are not 'Windows fonts', but specially converted outlines. |
| Example: | "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json" |
| height: | Text vertical size is based on the height of an uppercase 'M' in world units. Ascendents and descendents add to this. |
| Example: | 0.125; |
| horizontalJustification: | One of: 'left', 'center', or 'right'. This only applies to multiline blocks of 2D text only. |
| Example: | "center" |
| resolution: | The total number of count of pixels in an digital image.Default is set at 100 but can be adjusted. |
| Example: | 100; |
| showBox: | If true, draws a tight (width x height) bounding box around the text. |
| Example: | false; |
| showOutline: | If true, strokes the text outline. Used by 2D text only. |
| Example: | false; |
| text: | The set of characters to be rendered as text. Add text here to show up in your drawing. |
| Example: | "" |
| use3D: | Set to true to use 3D text modeling. |
| Example: | false; |
| verticalJustification: | One of: 'top', 'center', 'baseline', or 'bottom'. 2D text only. This is currently not used. |
| Example: | "center" |
| position: | Specifies the PositionSpec to be used for positioning this model. |
| Example: | return { origin: p(7, 4 , 0, this.parent.transform ) }; |
Mixins
DragMixin
Text
RULE NAME |
TYPE |
DEFAULTS |
CATEGORY |
FLAGS |
|---|---|---|---|---|
font |
string |
"default" |
Inputs |
Cached |
fontFamily |
string |
"default" |
Inputs |
Cached |
FontSpec |
any |
{} |
Inputs |
Cached |
fontUrl |
string |
"https://threejs.org/examples/ fonts/helvetiker_regular.typeface.json" |
Inputs |
Cached |
height |
number |
1 |
Inputs |
Cached |
horizontalJustification |
string |
"center" |
Inputs |
Cached |
resolution |
number |
100 |
Inputs |
Cached |
showBox |
boolean |
false |
Inputs |
Cached |
showOutline |
boolean |
false |
Inputs |
Cached |
text |
string |
"" |
Inputs |
Cached |
use3D |
boolean |
false |
Inputs |
Cached |
verticalJustification |
string |
"center" |
Inputs |
Cached |
position |
string |
{origin: p(0, 0, 0,this.parent.transform)} |
Inputs |
Cached |
Project Example:
In your kBridge Examples Projects folder open the project called ‘DrawingUtilitiesTableDemo’.
Reference Location:
“world.mytable.mysheet.fonts”
Link: https://knowledgebridge.engineer/projects
Open the DrawingUtilitiesTableDemo project.
Click on the Fonts / Text / Sheet1 to view the different fonts and see how they look.
A Fonts design was created and Text was added as its child. Because the Fonts design was added as a child
of MySheet, it will only show up in Sheet1.
kBridge uses a web browser as its platform and should load faster when you use a web-safe font.
All fonts on this list are web-safe, so you don’t have to worry about compatibility or performance issues.
However you can use fonts that are not on this list, these are just recommended.
"Arial";
"Times New Roman";
"Helvetica";
"Times";
"Courier New";
"Verdana";
"Courier";
"Arial Narrow";
"Candara";
"Geneva";
"Calibri";
"Optima";
"Cambria";
"Garamond";
"Perpetua";
"Monaco";
"Didot";
"Brush Script MT";
"Lucida Bright";
"Copperplate"
To create a custom 3D Font.
1.Download the font you want at dafont.com.
2.If your font is in a .zip file, extract the .ttf to your desktop.
3.Go to http://gero3.github.io/facetype.js/.
4.Click on Select Files and open the ttf file that you extracted.
5.Click Convert. Make sure .json is selected.
6.Take your .json file(in the example: Masked Hero Demo_Regular.json) and drag it into the Resources folder.
The use3D rule must be set to true and the fontUrl must point to the 'Masked Hero Demo_Regular.json' file in the Resources folder. Your custom 3D font may have a different name.
The Text3d_MaskedHero design in the tree shows this example.
