Delving into the realm of a basic "Hello World" Three.js application has left me pondering over its mysterious workings.
To kick things off, I orchestrate the appearance of a perfectly centered "Hello World" using the following code snippet. This piece of code governs the alignment of the text and nudges it back by 20 units.
/* The Magic is about to Begin */
let loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function (font) {
/* Bringing Geometry into Existence */
let geometry_text = new THREE.TextGeometry( "Hello World", {
font: font,
size: 5,
height: 1,
});
/* Constructing a bounding box for pinpointing the center location of our textual masterpiece */
geometry_text.computeBoundingBox();
let x_mid = geometry_text.boundingBox.max.x - geometry_text.boundingBox.min.x;
geometry_text.translate(-0.5 * x_mid, 0, 0); // Finding solace in symmetry through offsetting half the width
/* Slapping on a mere Basic Material due to the absence of light, rendering Phong pitch black */
let material_text = new THREE.MeshBasicMaterial({
color: new THREE.Color( 0x006699 )
});
let textMesh = new THREE.Mesh(geometry_text, material_text);
textMesh.position.set(0, 0, -20);
scene.add(textMesh);
console.log('mesh integrated')
} );
What fascinates me here is the sequence of events — translation takes the front seat firstly
geometry_text.computeBoundingBox();
let x_mid = geometry_text.boundingBox.max.x - geometry_text.boundingBox.min.x;
geometry_text.translate(-0.5 * x_mid, 0, 0);
and then position swoops in afterwards to displace the mesh
let textMesh = new THREE.Mesh(geometry_text, material_text);
textMesh.position.set(0, 0, -20);
The point of contention arises when I remove my translation; suddenly, my serene "Hello World" isn't nestled in the center anymore. Surprisingly, once the translation dance concludes and I assign the position to my mesh as (0, 0, -20), one would assume this positioning directive wipes out my prior translation and hurtles the object to coordinates (0, 0, -20). Why then does my text retain its balance even though set_position prances onto the stage after the translation?