From 9e0bd802438863b32c33a8bd2080b2f61473d5f7 Mon Sep 17 00:00:00 2001 From: Bert Peters Date: Wed, 13 Mar 2019 15:05:45 +0100 Subject: [PATCH] Nicer text. --- src/open.js | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/open.js b/src/open.js index 5a6f4e7..70f17e8 100644 --- a/src/open.js +++ b/src/open.js @@ -3,7 +3,7 @@ import * as THREE from "three"; const STAR_POINTS = 5; let scene, camera, renderer; -let group; +let coreStarGroup; let lights = {}; /** @@ -37,16 +37,16 @@ function addStar() { let star = new THREE.Mesh(frontGeometry, material); star.receiveShadow = true; - group.add(star); + coreStarGroup.add(star); let backStar = new THREE.Mesh(backGeometry, backMaterial); backStar.receiveShadow = true; - group.add(backStar); + coreStarGroup.add(backStar); let ringGeometry = generateStarRing(2, 3, 0.4); let ring = new THREE.Mesh(ringGeometry, material); ring.receiveShadow = ring.castShadow = true; - group.add(ring); + coreStarGroup.add(ring); } /** @@ -115,8 +115,8 @@ function startOpenAnimation() { renderer.shadowMap.autoUpdate = true; document.body.appendChild(renderer.domElement); - group = new THREE.Group(); - scene.add(group); + coreStarGroup = new THREE.Group(); + scene.add(coreStarGroup); initLighting(); addStar(); @@ -140,14 +140,20 @@ function initLighting() { lights.ambient = ambient; } +/** + * Load the font data and render the message. + */ function loadFont() { import('three/examples/fonts/helvetiker_bold.typeface').then(function (data) { let font = new THREE.Font(data); let geometry = new THREE.TextGeometry('Ja!', { font: font, size: 1.2, - height: 0.3, - curveSegments: 12 + height: 0.5, + curveSegments: 12, + bevelEnabled: true, + bevelSize: 0.05, + bevelThickness: 0.05 }).center(); geometry.computeFaceNormals(); @@ -158,7 +164,7 @@ function loadFont() { let mesh = new THREE.Mesh(geometry, textMaterial); mesh.castShadow = true; mesh.receiveShadow = true; - group.add(mesh); + coreStarGroup.add(mesh); }); } @@ -216,8 +222,8 @@ function starCoordinates(innerRadius, outerRadius, z) { function animate() { requestAnimationFrame(animate); - group.rotation.z += 0.01; - group.rotation.y += 0.01; + coreStarGroup.rotation.z += 0.01; + coreStarGroup.rotation.y += 0.01; renderer.render(scene, camera); }