Currently, I am immersed in a project that involves creating web components using Three.js. One of the challenges I face is generating objects for these components, particularly those with text attributes. My goal is to encapsulate the text mesh within a THREE.Group() object to enhance accessibility and facilitate future modifications.
var Button = {
init : function(text, textSize, textFont, textMaterial, other attributes ...) {
this._geo = new THREE.Group();
this.createTextDesign(text, textSize, textFont, textMaterial);
this._textMesh = this.createText()
this._geo.add(this._textMesh);
...
},
createTextDesign : function() {
this._text = text;
this._textMaterial = textMaterial;
this._textFont = textfont;
if (textSize == "lg") {
this._textSize = 2.5;
} else if (textSize == "sm"){
this._textSize = 1.5;
} else if (textSize == "xs"){
this._textSize = 1;
} else {
this._textSize = 2;
},
createText : function(){
var text = null;
var fontLoader = new THREE.FontLoader();
fontLoader.load('fonts/' + this._textFont + '.typeface.json', function(font) {
var textGeometry = new THREE.TextGeometry(this._text, {
font: font,
size: this._textSize,
height: this._textSize
});
fontLoader.load();
text = new THREE.Mesh(textGeometry, this._textMaterial);
});
return text;
},
getGroup : function(){
return this._geo;
},
...
};
The challenge arises when trying to instantiate the object using generic code for instantiation and display as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - ASCII Effect</title>
<meta charset="utf-8">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/build/three.js"></script>
<script src="components/Button.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var mat2 = new THREE.MeshBasicMaterial( {color: 0xff0000} );
var mat3 = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var mat4 = new THREE.MeshBasicMaterial( {color: 0x0000ff} );
var button = Object.create(Button);
button.init("test", "lg", "optimer_regular", mat2, mat3, mat4);
scene.add(button.getGroup());
camera.position.z = 50;
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
An error message is thrown during execution:
THREE.Object3D.add: object not an instance of THREE.Object3D. nullthree.js:10826:5
.add() three.js:10826
Button.init() Button.js:10
<anonymous> test4.html:31
The issue seems to stem from line 10 in the Button.js file where this._textMesh gets added to this._geo.
I have explored alternative methods for generating text meshes without relying on textLoader, but encountered issues with displaying the text without any specific console errors...
If anyone has insights or solutions to this perplexing problem, your assistance would be greatly appreciated!