Three.js TextGeometry() with wordwrap
Trying to get this working to drag everything as a group.
by Alan Halls
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
This is a Three.js that uses TextGeometry() that also does wordwrapping, which seems to be the first time anyone has done so :) That leaves us with a problem where I haven't figured out how to move them as a group. It would be great if it could be wrapped in a transparent box with the faces pressed against the side and then use the transparent box as the handle for dragging.
<BR><BR>
I previously tried over and over to use the regular canvas method of adding text, and even got that working multiline, but it would leave me with a canvas that was much larger than the text which caused problems when having several close together as the cavas would overlap without the text overlapping.
<div id="threejs-viewer"></div>
JavaScript
(function() {
var wordArray = [],
wrapArray = [],
idealLength,
spillLength,
nextWord,
nextWordLen,
valueLen,
newLength,
maxWordLength,
overflow,
eof, tmp, diff,
getNextWord,
showTotalLen = 0,
wordLoop = function(value, i) {
/* returns an array of trimmed lines */
i = i || 0;
tmp = diff = null;
value = value || wordArray[i] || '';
valueLen = value.length;
nextWord = (wordArray[i + 1]) || '';
nextWordLen = nextWord.length || 0;
newLength = (valueLen + nextWordLen);
overflow = (newLength >= idealLength) && (newLength >= spillLength);
maxWordLength = Math.max(idealLength, spillLength);
eof = !wordArray[i + 1];
getNextWord = (!eof && !overflow);
candidate = (value + ' ' + nextWord);
if (getNextWord) {
return wordLoop(candidate, i + 1);
}
/*
Exception catcher:
ensure the next word length is shorter than max length
*/
if (nextWordLen >= maxWordLength) {
tmp = (candidate).slice(0, maxWordLength);
diff = (candidate).length - tmp.length;
wordArray[i + 1] = nextWord.slice(-diff);
value = tmp;
}
/*
Exception catcher:
truncate extremely long strings, update word array,
and recurse the remainder
*/
if (value.length > maxWordLength) {
console.log('!@');
tmp = value.slice(0, maxWordLength);
diff = value.length - tmp.length;
wrapArray.push(tmp);
value = value.slice(-diff);
return wordLoop(value, i);
}
if (value) { // Here is where you can do something with each row of text
wrapArray.push(value.trim());
return wordLoop('', i + 1);
}
return wrapArray;
},
main = function(length, spill) {
wrapArray = []; // clear existing array
wordArray = (this).trim().split(' ');
idealLength = (length && length.constructor...