react-force-graph
react-force-graph copied to clipboard
Using .OBJ 3D models as graph nodes
Hi guys,
i'm building a 3d graph of my company's IT infrastructure as part of a bigger infrastructure documentation webapp, and i'm facing some difficulties trying to render 3d models (in OBJ format) of servers and databases as graph nodes.
I'm following ThreeJS documentation about OBJLoader class and trying some examples, assigning the loaded Object3d instance to the nodeThreeObject prop without getting errors but without result on the graph, nodes are not rendered.
Have any of you already tried to load a 3d OBJ model into a node? Hints? Suggestions? Working code snippets?
Thank you very much, any help would be appreciated.
/ncodeit21
Hey @ncodeit21
I'm also trying this one. For me it's working partially. The object is loaded and rendered. My problem is, that just one node gets rendered as my passed OBJ.
My Code so far:
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import cloudObj from './assets/island-cloud-mod.obj';
import cloudMTL from './assets/island-cloud-mod.mtl';
const mtlLoader = new MTLLoader();
let cloud;
mtlLoader.load(cloudMTL, materials => {
materials.preload();
const loader = new OBJLoader();
loader.setMaterials(materials);
loader.load(cloudObj, object => {
cloud = object;
});
});
const nodeThreeObject = node => cloud; // This is what you pass to nodeThreeObject prop