Mesh Writer
Generate letters in BABYLON meshes.
Basic-Usage
Writer = BABYLON.MeshWriter(scene, {scale:scale});text1 = new Writer("ABC",{"anchor": "center","letter-height": 50,"color": "#1C3870","position": {"z": 20}});
Getting the code
Copy https://github.com/BabylonJS/Extensions/blob/master/MeshWriter/meshwriter.min.js or https://github.com/BabylonJS/Extensions/blob/master/MeshWriter/meshwriter.js and build it into your load sequence.
If you prefer npm
npm i meshwriter
Import in your React/Angular component:
import { MeshWriter } from "meshwriter";
With meshwriter you can use MeshWriter directly like this:
let Writer = MeshWriter(this.scene, { scale: .25, defaultFont: "Arial" });let textMesh = new Writer("Hello World", {"font-family": "Arial","letter-height": 30,"letter-thickness": 12,color: "#1C3870",anchor: "center",colors: {diffuse: "#F0F0F0",specular: "#000000",ambient: "#F0F0F0",emissive: "#ff00f0"},position: {x: 0,y: 10,z: 0}});
Superconstructor - BABYLON.MeshWriter()
After MeshWriter is loaded, BABYLON.MeshWriter is defined. It is called with one or two parameters.
scene required
preferences optional The preferences object may specify up to three values
FIELD DEFAULTdefault-font Helveticascale 1letter-origin "letter-center"
The call to BABYLON.MeshWriter returns a constructor. Call it "Writer".
Constructor - new Writer()
new Writer() is called with a string and an (optional) options parameter. The options object conforms to normal BabylonJS structures and terminology.
FIELD DEFAULTfont-family default-fontanchor leftletter-height 100letter-thickness 1color #808080 # hits emissive onlyalpha 1positionx 0y 0z 0colors # if you need to control more than just emissivediffuse #F0F0F0specular #000000ambient #F0F0F0emissive color # from option field 'color' above
new Writer() builds a mesh with material that is inserted into the scene. This is a multi-step process with interim meshes and holes per letter. These meshes are sucked into an SPS and then disposed. At the end, one mesh, one material and one SPS have been added to the scene.
new Writer() also returns a writer instance with useful methods. See below.
Instance
Each writer instance has methods to allow one to retrieve the BabylonJS objects or to get/set attributes of the SPS.
getSPSgetMeshgetMaterialcolor # sets or gets color but no change to materialalpha # sets or gets alpha but no change to materialsetColor # set emissive color and change color valuesetAlpha # change value and materialoverrideOpac # change material but not valueresetOpac # sets material to current valuedispose
Usage Hints
If you wish to do extensive things with position, rotation or animation, retrieve the meshes and materials from the instance using the methods shown above. The output from new Writer() is an SPS with one particle for each character.
Example: PG: Mesh Writer Example 2
const SCALE =.25const TEXT_SIZE = 35const TEXT_THICKNESS =10Writer = BABYLON.MeshWriter(scene, {scale:SCALE,defaultFont:"Arial"});textMesh = new Writer("BABYLON JS",{"font-family":"Arial",anchor: "center","letter-height": TEXT_SIZE,"letter-thickness": TEXT_THICKNESS,color: "#1C3870",colors:{diffuse :"#F0F0F0",specular :"#000000",ambient :"#F0F0F0",emissive :"#ff00f0"},position: {x:0,y:5,z: 70}});//Text Writer create SPS with Particle for each letterSPS = textMesh.getSPS()//Update animationSPS.updateParticle = (particle)=> {particle.rotation.x -= 0.06;};scene.registerBeforeRender( ()=> {SPS.setParticles();//sps.mesh.rotation.y = k;});
Colors: With most lighting, it is enough just to use the "color" field to specify the letter coloring. However, programmers may specify all four color types by putting a "colors" object in the options object.
Unless you have a specific need, do not specify a font. The default font, Helvetica, has the most extensive characters and the fewest faces; it will be the most efficient if you have a lot of text. Jura was added because the author likes it for numbers.