Basic text renderer.

src/open.js

@@ -5,9 +5,21 @@ import './open.scss';
 const STAR_POINTS = 5;
 
 let scene, camera, renderer;
-let star;
+let group;
+
+function addStar() {
+    let geometry = new THREE.BufferGeometry();
+    let vertices = starCoordinates(2 / 3, 1, 0);
+    geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
+    geometry.setIndex(filledStarIndices());
+    let material = new THREE.MeshBasicMaterial({color: 0x00ff00});
+    material.side = THREE.DoubleSide;
+    let star = new THREE.Mesh(geometry, material);
+    group.add(star);
+}
 
 function startOpenAnimation() {
+
     scene = new THREE.Scene();
     camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
     camera.position.z = 5;
@@ -16,18 +28,31 @@ function startOpenAnimation() {
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
 
-    let geometry = new THREE.BufferGeometry();
+    group = new THREE.Group();
-    let vertices = starCoordinates(2 / 3, 1, 0);
+    scene.add(group);
-    geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
+    addStar();
-    geometry.setIndex(filledStarIndices());
+    loadFont();
-    let material = new THREE.MeshBasicMaterial({color: 0x00ff00});
-    material.side = THREE.DoubleSide;
-    star = new THREE.Mesh(geometry, material);
-    scene.add(star);
 
     requestAnimationFrame(animate)
 }
 
+function loadFont() {
+    import('../node_modules/three/examples/fonts/helvetiker_bold.typeface').then(function (data) {
+        let font = new THREE.Font(data);
+        let geometry = new THREE.TextGeometry('Ja!', {
+            font: font,
+            size: 0.5,
+            height: 0.1,
+            curveSegments: 12
+        }).center();
+
+        let textMaterial = new THREE.MeshBasicMaterial({color: 0xff00ff});
+
+        let mesh = new THREE.Mesh(geometry, textMaterial);
+        group.add(mesh);
+    });
+}
+
 /**
  * Construct the vertex indices needed to create a filled star.
  * @returns {Number[]}
@@ -82,8 +107,8 @@ function starCoordinates(innerRadius, outerRadius, z) {
 function animate() {
     requestAnimationFrame(animate);
 
-    star.rotation.z += 0.01;
+    group.rotation.z += 0.01;
-    star.rotation.y += 0.01;
+    group.rotation.y += 0.01;
 
     renderer.render(scene, camera);
 }