react-force-graph icon indicating copy to clipboard operation
react-force-graph copied to clipboard

Using .OBJ 3D models as graph nodes

Open ncodeit21 opened this issue 5 years ago • 1 comments

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

ncodeit21 avatar Aug 08 '19 09:08 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

bayerlse avatar Sep 10 '20 08:09 bayerlse