From 0a4df2e264753443ea29c0485da06a34e79978c6 Mon Sep 17 00:00:00 2001 From: Cailean Finn Date: Tue, 18 Jun 2024 22:57:09 +0100 Subject: [PATCH] optimised textgeo code --- public/js/main.js | 153 +++++++++++++++++++++++----------------------- 1 file changed, 76 insertions(+), 77 deletions(-) diff --git a/public/js/main.js b/public/js/main.js index a9b067e..6f9b288 100644 --- a/public/js/main.js +++ b/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(); + + // 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 = []; - // 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; + 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); - } + 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 }); }