optimised textgeo code

public/js/main.js

@@ -136,6 +136,7 @@ const pickHelper = new PickHelper();
 const object_list = []
 const object_count = 20;
 const fontLoader = new FontLoader();
+let group = new THREE.Group();
 
 function init() {
   
@@ -322,99 +323,97 @@ window.addEventListener('resize', () => {
 }
 
 function ClearTextGeoList() {
-    for (let i = 0; i < text_Geometries.length; i++) {
-        scene.remove(text_Geometries[i]);
-    }
-    text_Geometries.length = 0;
+	scene.remove(group)
+	text_Geometries = [];
 }
 
+// Preload font
+let cachedFont = null;
+fontLoader.load('fonts/Redaction 50_Regular.json', (font) => {
+    cachedFont = font;
+});
+
 function MeasureText(text) {
-    fontLoader.load('fonts/Redaction 50_Regular.json', (font) => {
-		ClearTextGeoList();
-        let initialFontSize = 1;
-        if (window.innerWidth < 1024) {
-            initialFontSize = 0.5;
-        } else if (window.innerWidth < 512) {
-            initialFontSize = 0.25;
-        }
+    if (!cachedFont) {
+        // Font is not loaded yet, handle appropriately (e.g., show loading indicator or retry later)
+        return;
+    }
 
-        const aspect = window.innerWidth / (window.innerHeight - 100); // Adjust for nav height
-        const frustumSize = 10;
-        const orthoWidth = (frustumSize * aspect / 2) - (frustumSize * aspect / -2);
-
-        function createTextGeometry(text, size) {
-            return new TextGeometry(text, {
-                height: 2,
-                depth: 1,
-                font: font,
-                size: size,
-				curveSegments: 1
-            });
-        }
+    ClearTextGeoList();
 
-        // Split text into words
-        const split = text.split(" ");
-        const word_count = split.length;
-        const sentences = [];
-
-        let currentText = "";
-        let currentFontSize = initialFontSize;
-        let textGeo;
-
-        for (let i = 0; i < word_count; i++) {
-            const testText = currentText + (currentText ? " " : "") + split[i];
-            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;
-            }
-        }
+    // Adjust font size based on window dimensions
+    let initialFontSize = 1;
+    if (window.innerWidth < 1024) {
+        initialFontSize = 0.5;
+    } else if (window.innerWidth < 512) {
+        initialFontSize = 0.25;
+    }
+
+    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 = [];
 
-        if (currentText) {
-            sentences.push(currentText);
+    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 startY = totalHeight / 2;
 
-        const numSentences = sentences.length;
-        const totalHeight = (numSentences - 1) * (1.5 * currentFontSize);
-        const startY = totalHeight / 2;
+    for (let i = 0; i < sentences.length; i++) {
+        const textGeo = createTextGeometry(sentences[i], currentFontSize);
+        textGeo.computeBoundingBox();
 
-        for (let i = 0; i < sentences.length; i++) {
-            textGeo = createTextGeometry(sentences[i], currentFontSize);
-            textGeo.computeBoundingBox();
-            const proportion = textGeo.boundingBox.max.x / orthoWidth;
+        const textMaterial = new THREE.MeshNormalMaterial();
+        const textMesh = new THREE.Mesh(textGeo, textMaterial);
 
-            if (proportion > 0.8) {
-                currentFontSize *= 0.8 / proportion;
-                textGeo = createTextGeometry(sentences[i], currentFontSize);
-                textGeo.computeBoundingBox();
-            }
+        const centerOffsetX = (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x) / 2;
+        const centerOffsetY = (textGeo.boundingBox.max.y - textGeo.boundingBox.min.y) / 2;
+        const centerOffsetZ = (textGeo.boundingBox.max.z - textGeo.boundingBox.min.z) / 2;
 
-            const textMaterial = new THREE.MeshNormalMaterial();
-            const textMesh = new THREE.Mesh(textGeo, textMaterial);
+        textGeo.translate(-centerOffsetX, -centerOffsetY, -centerOffsetZ);
+        textMesh.rotation.x = Math.PI / 2 * 0.05;
+        textMesh.position.y = startY - (i * (1.5 * currentFontSize));
+        textMesh.position.z = 5;
 
-            const centerOffsetX = (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x) / 2;
-            const centerOffsetY = (textGeo.boundingBox.max.y - textGeo.boundingBox.min.y) / 2;
-            const centerOffsetZ = (textGeo.boundingBox.max.z - textGeo.boundingBox.min.z) / 2;
+        text_Geometries.push(textMesh);
+    }
 
-            textGeo.translate(-centerOffsetX, -centerOffsetY, -centerOffsetZ);
-            textMesh.rotation.x = Math.PI / 2 * 0.05;
-            textMesh.position.y = startY - (i * (1.5 * currentFontSize));
-            textMesh.position.z = 5;
-            text_Geometries.push(textMesh);
-        }
+    group = new THREE.Group();
+    text_Geometries.forEach(mesh => group.add(mesh));
+    scene.add(group);
+}
 
-        for (let i = 0; i < text_Geometries.length; i++) {
-            scene.add(text_Geometries[i]);
-        }
+function createTextGeometry(text, size) {
+    return new TextGeometry(text, {
+        height: 2,
+        depth: 1,
+        font: cachedFont,
+        size: size,
+        curveSegments: 1
     });
 }