I am currently working on developing a 3D network (network of people) for a browser using three.js and ngraph. The graph has been successfully created, but the nodes are currently displayed as squares. My goal is to replace these squares with the text "node" (which will later be substituted with the names of the individuals in the network). However, I am struggling with the process of displaying text instead of the current squares. Any assistance would be greatly appreciated!
Upon investigation, I came across this code snippet in .../ngraph.three/lib/default.js, where the squares are being created:
function createNodeUI(node) {
var nodeMaterial = new THREE.MeshBasicMaterial({ color: 0xfefefe });
var nodeGeometry = new THREE.BoxGeometry(NODE_SIZE, NODE_SIZE, NODE_SIZE);
return new THREE.Mesh(nodeGeometry, nodeMaterial);
}Additionally, I identified this snippet in .../ngraph.three/node_modules/three/three.js:
case 'BoxGeometry':
case 'CubeGeometry': // backwards compatible
geometry = new THREE.BoxGeometry(
data.width,
data.height,
data.depth,
data.widthSegments,
data.heightSegments,
data.depthSegments
);It appears that I may require something similar to the above code snippets to display text instead of squares, but my current knowledge of JavaScript is limited.
Despite referencing various tutorials and manuals, my attempts to replace the squares with text have resulted in the entire graph disappearing.
For instance, I tried the following code:
function createNodeUI(node) {
var nodeMaterial = new THREE.MeshBasicMaterial({color: 0xfefefe});
var nodeGeometry = new THREE.TextGeometry("text", {font:'helvetiker'});
return new THREE.Mesh(nodeGeometry, nodeMaterial);
}implemented with:
THREE.TextGeometry = function ( text, parameters ) {
parameters = parameters || {};
var textShapes = THREE.FontUtils.generateShapes( text, parameters );
// translate parameters to ExtrudeGeometry API
parameters.amount = parameters.height !== undefined ? parameters.height : 50;
// defaults
if ( parameters.bevelThickness === undefined ) parameters.bevelThickness = 10;
if ( parameters.bevelSize === undefined ) parameters.bevelSize = 8;
if ( parameters.bevelEnabled === undefined ) parameters.bevelEnabled = false;
THREE.ExtrudeGeometry.call( this, textShapes, parameters );
this.type = 'TextGeometry';
};
THREE.TextGeometry.prototype = Object.create( THREE.ExtrudeGeometry.prototype );
THREE.TextGeometry.prototype.constructor = THREE.TextGeometry;Thank you in advance for any assistance you can provide!