Browse Source

optimised textgeo code

master
Cailean Finn 4 months ago
parent
commit
0a4df2e264
  1. 65
      public/js/main.js

65
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,15 +323,25 @@ 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 = [];
}
function MeasureText(text) {
// Preload font
let cachedFont = null;
fontLoader.load('fonts/Redaction 50_Regular.json', (font) => {
cachedFont = font;
});
function MeasureText(text) {
if (!cachedFont) {
// Font is not loaded yet, handle appropriately (e.g., show loading indicator or retry later)
return;
}
ClearTextGeoList();
// Adjust font size based on window dimensions
let initialFontSize = 1;
if (window.innerWidth < 1024) {
initialFontSize = 0.5;
@ -339,31 +350,18 @@ function MeasureText(text) {
}
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
});
}
const orthoWidth = 10 * aspect;
// 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++) {
for (let i = 0; i < split.length; i++) {
const testText = currentText + (currentText ? " " : "") + split[i];
textGeo = createTextGeometry(testText, currentFontSize);
const textGeo = createTextGeometry(testText, currentFontSize);
textGeo.computeBoundingBox();
const proportion = textGeo.boundingBox.max.x / orthoWidth;
@ -381,22 +379,13 @@ function MeasureText(text) {
sentences.push(currentText);
}
const numSentences = sentences.length;
const totalHeight = (numSentences - 1) * (1.5 * currentFontSize);
const startY = totalHeight / 2;
for (let i = 0; i < sentences.length; i++) {
textGeo = createTextGeometry(sentences[i], currentFontSize);
textGeo.computeBoundingBox();
const proportion = textGeo.boundingBox.max.x / orthoWidth;
if (proportion > 0.8) {
currentFontSize *= 0.8 / proportion;
textGeo = createTextGeometry(sentences[i], currentFontSize);
const textGeo = createTextGeometry(sentences[i], currentFontSize);
textGeo.computeBoundingBox();
}
const textMaterial = new THREE.MeshNormalMaterial();
const textMesh = new THREE.Mesh(textGeo, textMaterial);
@ -409,12 +398,22 @@ function MeasureText(text) {
textMesh.rotation.x = Math.PI / 2 * 0.05;
textMesh.position.y = startY - (i * (1.5 * currentFontSize));
textMesh.position.z = 5;
text_Geometries.push(textMesh);
}
for (let i = 0; i < text_Geometries.length; i++) {
scene.add(text_Geometries[i]);
group = new THREE.Group();
text_Geometries.forEach(mesh => group.add(mesh));
scene.add(group);
}
function createTextGeometry(text, size) {
return new TextGeometry(text, {
height: 2,
depth: 1,
font: cachedFont,
size: size,
curveSegments: 1
});
}

Loading…
Cancel
Save