cailean/garden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimised textgeo code

Browse Source
This commit is contained in:
Cailean Finn
2024-06-18 22:57:09 +01:00
parent 9c0f5f4bb5
commit 0a4df2e264
1 changed files with 72 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
public/js/main.js
View File

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