cailean
/
garden
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

optimised textgeo code

master
Cailean Finn 6 months ago
parent
9c0f5f4bb5
commit
0a4df2e264
1 changed files with 76 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 153
      public/js/main.js

153
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); // Adjust font size based on window dimensions
let initialFontSize = 1;
function createTextGeometry(text, size) { if (window.innerWidth < 1024) {
return new TextGeometry(text, { initialFontSize = 0.5;
height: 2, } else if (window.innerWidth < 512) {
depth: 1, initialFontSize = 0.25;
font: font, }
size: size,
curveSegments: 1 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 let currentText = "";
const split = text.split(" "); let currentFontSize = initialFontSize;
const word_count = split.length;
const sentences = []; for (let i = 0; i < split.length; i++) {
const testText = currentText + (currentText ? " " : "") + split[i];
let currentText = ""; const textGeo = createTextGeometry(testText, currentFontSize);
let currentFontSize = initialFontSize; textGeo.computeBoundingBox();
let textGeo; const proportion = textGeo.boundingBox.max.x / orthoWidth;
for (let i = 0; i < word_count; i++) { if (proportion > 0.8) {
const testText = currentText + (currentText ? " " : "") + split[i]; if (currentText) {
textGeo = createTextGeometry(testText, currentFontSize); sentences.push(currentText);
textGeo.computeBoundingBox();
const proportion = textGeo.boundingBox.max.x / orthoWidth;
if (proportion > 0.8) {
if (currentText) {
sentences.push(currentText);
}
currentText = split[i];
} else {
currentText = testText;
} }
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
}); });
} }

Write Preview
Loading…
Cancel
Save