I am trying to merge multiple TextGeometries (i.e. multiple sentences of text) using THREE.js. However TextGeometries don’t seem to act the same as normal BufferedGeometries?
To demonstrate, here is a simple scene (using AFRAME to reduce code):
<html>
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script>
AFRAME.registerComponent( 'text-merge', {
init: function() {
var geometries = [];
this.el.object3D.traverse(function (mesh) {
if (mesh.type !== 'Mesh' || mesh.el === self.el) { return; }
mesh.geometry.applyMatrix(mesh.matrixWorld);
geometries.push(mesh.geometry.clone());
mesh.parent.remove(mesh);
});
this.mesh = new THREE.Mesh( geometries[0], new THREE.MeshBasicMaterial( { color: 0x0000ff } ));
this.el.setObject3D('mesh', this.mesh );
}
} );
</script>
</head>
<body>
<a-scene background="color: #222">
<a-entity text-merge position="0 1.5 -1">
<!--<a-entity text="value: Foo!; width: 1"></a-entity>-->
<a-box material="color: yellow"></a-box>
</a-entity>
</a-scene>
</body>
</html>
I am not even trying to merge here (we’ll get to that!). I’m just trying to clone a child’s geometry.
I can clone the cube fine (you’ll see it shows up blue, because it’s using the parent’s material but cloning the child’s geometry). But if you swap the commented code to use the text instead of the box:
<a-entity text="value: Foo!; width: 1"></a-entity>
<!--<a-box material="color: yellow"></a-box>-->
Now we see nothing at all.
Why can’t I clone the TextGeometry?