Working on a 3D graph visualization within an Angular project using the 3D Force Graph library. I'm attempting to incorporate 3D models created in Blender as nodes in the graph. However, when trying to import the object using three.js, it returns undefined and generates multiple warning messages, such as:
Offscreen-For-WebGL-0000014E33B8D990]RENDER WARNING: Render count or primcount is 0.
The code snippet I've used thus far looks like this:
var self = this;
var loader = new THREE.JSONLoader();
var house = loader.load("assets/model/house.json",
function ( obj ) {
// Upon successful loading of the object
console.log("house -- "+house); // returns undefined
self.showGraph(gData,house,themeNum);
console.log("graph drawn");
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.error( 'An error occurred -- '+err );
}
);
// Function to render the graph - triggered upon model load
showGraph(gData:any, house:any, themeNum: any){
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.nodeThreeObject(({ group }) => new THREE.Mesh(
[
new THREE.BoxGeometry(Math.random() * 20, Math.random() * 20, Math.random() * 20),
house,
new THREE.CylinderGeometry(Math.random() * 10, Math.random() * 10, Math.random() * 20),
new THREE.DodecahedronGeometry(Math.random() * 10),
new THREE.SphereGeometry(Math.random() * 10),
new THREE.TorusGeometry(Math.random() * 10, Math.random() * 2),
new THREE.TorusKnotGeometry(Math.random() * 10, Math.random() * 2)
][group],
new THREE.MeshLambertMaterial({
color: this.themes[themeNum][group],
transparent: true,
opacity: 0.75
})
))
.nodeAutoColorBy('group')
.onNodeClick(node => {
this.attach3DNodeClickEvent(node);
})
.graphData(gData);
}The graph display works with other available shapes from three.js but encounters issues specifically with the imported 3D model showing as undefined in the graph (visible by links without shape). Each shape is assigned based on node group.
https://i.sstatic.net/EaAXH.png
I have Blender version 2.79 installed along with the latest Blender JSON exporter and "three.min.js" from Github.
The exported house.json file content is shown below. The "Face Materials" option was selected during export.
{
"geometries":[{
"data":{ ... long data string here }
],
"name":"CubeGeometry.2",
"uuid":"1D367B89-D7FF-406F-90CF-EAEE8DFD2C3F",
"materials":[{...}],
"type":"Geometry"
}],
"materials":[{...},{...},{...}],
"animations":[{...}],
"metadata":{...},
"textures":[],
"images":[],
"object":{
"matrix":[...],
"children":[{...},{...}]}
}Your insights on what could be amiss are greatly welcome.
Please excuse the lengthy query.