Ngraph.three NPM

ngraph.three

This is a 3d graph renderer, which uses three.js as a rendering engine. This library is a part of ngraph project. Please check out ngraph.pixel - it is also developed with three.js, however it uses lower level primitive (ShaderMaterial) which allows it to be really fast (the price is flexibility of your UI model).

usage

Basic example:

// Create graph:
var createGraph = require('ngraph.graph');
var graph = createGraph();
graph.addLink(1, 2);

// And render it
var nthree = require('ngraph.three');
var graphics = nthree(graph);

graphics.run(); // begin animation loop

Very often it is required to do something with scene before animation frame is rendered. To do so use onFrame() callback:

var nthree = require('ngraph.three');
var graphics = nthree(graph);

graphics.onFrame(function() {
 console.log('Frame is being rendered');
});
graphics.run(); // begin animation loop

Configuration

You can configure renderer in many ways. To do so you can pass settings object to the function. Calling

var nthree = require('ngraph.three');
var graphics = nthree(graph);

Is equivalent of calling:

var nthree = require('ngraph.three');
var graphics = nthree(graph, {
   // allow users to zoom/pan with mouse wheel:
  interactive: true,
  
  // DOM element where to render the graph:
  container: document.body,
  
  // Custom settings for physics engine simulator
  physicsSettings: {
      // Ideal length for links (springs in physical model).
      springLength: 30,

      // Hook's law coefficient. 1 - solid spring.
      springCoeff: 0.0008,

      // Coulomb's law coefficient. It's used to repel nodes thus should be negative
      // if you make it positive nodes start attract each other :).
      gravity: -1.2,

      // Theta coefficient from Barnes Hut simulation. Ranged between (0, 1).
      // The closer it's to 1 the more nodes algorithm will have to go through.
      // Setting it to one makes Barnes Hut simulation no different from
      // brute-force forces calculation (each node is considered).
      theta: 0.8,

      // Drag force coefficient. Used to slow down system, thus should be less than 1.
      // The closer it is to 0 the less tight system will be
      dragCoeff: 0.02,

      // Default time step (dt) for forces integration
      timeStep : 20
   },
  
  // custom 3d layout:
  layout: require('ngraph.forcelayout3d')(graph, this.physicsSettings),
  
  // Custom three.js renderer:
  renderer: isWebGlSupported ? new THREE.WebGLRenderer(this) : new THREE.CanvasRenderer(this),

  // allow clients to reuse custom three.js scene:
  scene: new THREE.Scene(),  
  
  // custom three.js camera:
  camera: new THREE.PerspectiveCamera(75, this.container.clientWidth/container.clientHeight, 0.1, 3000)
});

You can always override any of these settings with your own.