optimise by character count

public/js/main.js

@@ -352,39 +352,15 @@ function MeasureText(text) {
     const aspect = window.innerWidth / (window.innerHeight - 100); // Adjust for nav height
     const orthoWidth = 10 * aspect;
 
-    // Split text into words
-    const split = text.split(" ");
-    const sentences = [];
+    const lines = splitTextIntoLines(text, orthoWidth, initialFontSize);
 
-    let currentText = "";
-    let currentFontSize = initialFontSize;
-
-    for (let i = 0; i < split.length; i++) {
-        const testText = currentText + (currentText ? " " : "") + split[i];
-        const textGeo = createTextGeometry(testText, currentFontSize);
-        textGeo.computeBoundingBox();
-        const proportion = textGeo.boundingBox.max.x / orthoWidth;
-
-        if (proportion > 0.8) {
-            if (currentText) {
-                sentences.push(currentText);
-            }
-            currentText = split[i];
-        } else {
-            currentText = testText;
-        }
-    }
-
-    if (currentText) {
-        sentences.push(currentText);
-    }
-
-    const numSentences = sentences.length;
-    const totalHeight = (numSentences - 1) * (1.5 * currentFontSize);
+    const numLines = lines.length;
+    const totalHeight = (numLines - 1) * (1.5 * initialFontSize);
     const startY = totalHeight / 2;
 
-    for (let i = 0; i < sentences.length; i++) {
-        const textGeo = createTextGeometry(sentences[i], currentFontSize);
+    for (let i = 0; i < numLines; i++) {
+        const line = lines[i];
+        const textGeo = createTextGeometry(line.text, line.fontSize);
         textGeo.computeBoundingBox();
 
         const textMaterial = new THREE.MeshNormalMaterial();
@@ -396,18 +372,47 @@ function MeasureText(text) {
 
         textGeo.translate(-centerOffsetX, -centerOffsetY, -centerOffsetZ);
         textMesh.rotation.x = Math.PI / 2 * 0.05;
-        textMesh.position.y = startY - (i * (1.5 * currentFontSize));
+        textMesh.position.y = startY - (i * (1.5 * initialFontSize));
         textMesh.position.z = 5;
 
         text_Geometries.push(textMesh);
     }
 
-    group = new THREE.Group();
+	group = new THREE.Group();
     text_Geometries.forEach(mesh => group.add(mesh));
     scene.add(group);
 }
 
+function splitTextIntoLines(text, maxWidth, initialFontSize) {
+    const words = text.split(" ");
+    const lines = [];
+    let currentLine = "";
+    let currentFontSize = initialFontSize;
+
+    for (let i = 0; i < words.length; i++) {
+        const testLine = currentLine + (currentLine ? " " : "") + words[i];
+        const textGeo = createTextGeometry(testLine, currentFontSize);
+        textGeo.computeBoundingBox();
+        const proportion = textGeo.boundingBox.max.x / maxWidth;
+
+        if (proportion > 0.8) { // Assuming 80% width utilization threshold
+            lines.push({ text: currentLine, fontSize: currentFontSize });
+            currentLine = words[i];
+            // Adjust fontSize based on line length if needed
+        } else {
+            currentLine = testLine;
+        }
+    }
+
+    if (currentLine !== "") {
+        lines.push({ text: currentLine, fontSize: currentFontSize });
+    }
+
+    return lines;
+}
+
 function createTextGeometry(text, size) {
+	
     return new TextGeometry(text, {
         height: 2,
         depth: 1,