|
@ -352,39 +352,15 @@ function MeasureText(text) { |
|
|
const aspect = window.innerWidth / (window.innerHeight - 100); // Adjust for nav height
|
|
|
const aspect = window.innerWidth / (window.innerHeight - 100); // Adjust for nav height
|
|
|
const orthoWidth = 10 * aspect; |
|
|
const orthoWidth = 10 * aspect; |
|
|
|
|
|
|
|
|
// Split text into words
|
|
|
const lines = splitTextIntoLines(text, orthoWidth, initialFontSize); |
|
|
const split = text.split(" "); |
|
|
|
|
|
const sentences = []; |
|
|
|
|
|
|
|
|
|
|
|
let currentText = ""; |
|
|
const numLines = lines.length; |
|
|
let currentFontSize = initialFontSize; |
|
|
const totalHeight = (numLines - 1) * (1.5 * 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 startY = totalHeight / 2; |
|
|
|
|
|
|
|
|
for (let i = 0; i < sentences.length; i++) { |
|
|
for (let i = 0; i < numLines; i++) { |
|
|
const textGeo = createTextGeometry(sentences[i], currentFontSize); |
|
|
const line = lines[i]; |
|
|
|
|
|
const textGeo = createTextGeometry(line.text, line.fontSize); |
|
|
textGeo.computeBoundingBox(); |
|
|
textGeo.computeBoundingBox(); |
|
|
|
|
|
|
|
|
const textMaterial = new THREE.MeshNormalMaterial(); |
|
|
const textMaterial = new THREE.MeshNormalMaterial(); |
|
@ -396,18 +372,47 @@ function MeasureText(text) { |
|
|
|
|
|
|
|
|
textGeo.translate(-centerOffsetX, -centerOffsetY, -centerOffsetZ); |
|
|
textGeo.translate(-centerOffsetX, -centerOffsetY, -centerOffsetZ); |
|
|
textMesh.rotation.x = Math.PI / 2 * 0.05; |
|
|
textMesh.rotation.x = Math.PI / 2 * 0.05; |
|
|
textMesh.position.y = startY - (i * (1.5 * currentFontSize)); |
|
|
textMesh.position.y = startY - (i * (1.5 * initialFontSize)); |
|
|
textMesh.position.z = 5; |
|
|
textMesh.position.z = 5; |
|
|
|
|
|
|
|
|
text_Geometries.push(textMesh); |
|
|
text_Geometries.push(textMesh); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
group = new THREE.Group(); |
|
|
group = new THREE.Group(); |
|
|
text_Geometries.forEach(mesh => group.add(mesh)); |
|
|
text_Geometries.forEach(mesh => group.add(mesh)); |
|
|
scene.add(group); |
|
|
scene.add(group); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function splitTextIntoLines(text, maxWidth, initialFontSize) { |
|
|
|
|
|
const words = text.split(" "); |
|
|
|
|
|
const lines = []; |
|
|
|
|
|
let currentLine = ""; |
|
|
|
|
|
let currentFontSize = initialFontSize; |
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < words.length; i++) { |
|
|
|
|
|
const testLine = currentLine + (currentLine ? " " : "") + words[i]; |
|
|
|
|
|
const textGeo = createTextGeometry(testLine, currentFontSize); |
|
|
|
|
|
textGeo.computeBoundingBox(); |
|
|
|
|
|
const proportion = textGeo.boundingBox.max.x / maxWidth; |
|
|
|
|
|
|
|
|
|
|
|
if (proportion > 0.8) { // Assuming 80% width utilization threshold
|
|
|
|
|
|
lines.push({ text: currentLine, fontSize: currentFontSize }); |
|
|
|
|
|
currentLine = words[i]; |
|
|
|
|
|
// Adjust fontSize based on line length if needed
|
|
|
|
|
|
} else { |
|
|
|
|
|
currentLine = testLine; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (currentLine !== "") { |
|
|
|
|
|
lines.push({ text: currentLine, fontSize: currentFontSize }); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return lines; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function createTextGeometry(text, size) { |
|
|
function createTextGeometry(text, size) { |
|
|
|
|
|
|
|
|
return new TextGeometry(text, { |
|
|
return new TextGeometry(text, { |
|
|
height: 2, |
|
|
height: 2, |
|
|
depth: 1, |
|
|
depth: 1, |
|
|