ngraph.three - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

example/dynamic/index.js

@@ -10,3 +10,3 @@ module.exports.main = function () {
     var size = Math.random() * 10 + 1;
-    var nodeGeometry = new THREE.CubeGeometry(size, size, size);
+    var nodeGeometry = new THREE.BoxGeometry(size, size, size);
     var nodeMaterial = new THREE.MeshBasicMaterial({ color: getNiceColor() });
@@ -31,3 +31,3 @@ return new THREE.Mesh(nodeGeometry, nodeMaterial);
   threeGraphics.run();
-}
+};
 
@@ -34,0 +34,0 @@ var niceColors = [

index.js

@@ -208,2 +208,3 @@ var THREE = require('./lib/three');
       controls.removeEventListener('change', renderOneFrame);
+      controls.dispose();
     }
@@ -340,3 +341,3 @@ }
     var Controls = require('three.trackball');
-    controls = new Controls(camera);
+    controls = new Controls(camera, renderer.domElement);
     controls.panSpeed = 0.8;
@@ -343,0 +344,0 @@ controls.staticMoving = true;

lib/defaults.js

@@ -32,3 +32,3 @@ /**
   var nodeMaterial = new THREE.MeshBasicMaterial({ color: 0xfefefe });
-  var nodeGeometry = new THREE.CubeGeometry(NODE_SIZE, NODE_SIZE, NODE_SIZE);
+  var nodeGeometry = new THREE.BoxGeometry(NODE_SIZE, NODE_SIZE, NODE_SIZE);
   return new THREE.Mesh(nodeGeometry, nodeMaterial);
@@ -35,0 +35,0 @@ }

package.json

 {
   "name": "ngraph.three",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "3D graph rendered powered by three.js",
@@ -24,4 +24,4 @@ "main": "index.js",
     "ngraph.merge": "0.0.1",
-    "three": "^0.67.0",
-    "three.trackball": "0.0.0"
+    "three": "0.68.0",
+    "three.trackball": "0.0.1"
   },
@@ -28,0 +28,0 @@ "devDependencies": {

README.md

@@ -16,4 +16,4 @@ # ngraph.three
 // And render it
-var createThree = require('ngraph.three');
-var graphics = createThree(graph);
+var nthree = require('ngraph.three');
+var graphics = nthree(graph);
 
@@ -23,2 +23,77 @@ 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:
+
+``` js
+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
+
+``` js
+var nthree = require('ngraph.three');
+var graphics = nthree(graph);
+```
+
+Is equivalent of calling:
+
+``` js
+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.
+
 # examples
@@ -25,0 +100,0 @@ Many examples are available in [ngraph](https://github.com/anvaka/ngraph/tree/master/examples/three.js) repository

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20521

increased by12.67%

Lines of code

456

increased by0.22%

Number of lines in readme file

111

increased by208.33%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedthree@0.68.0(transitive)

• + Addedthree.trackball@0.0.1(transitive)

• - Removedthree@0.67.0(transitive)

• - Removedthree.trackball@0.0.0(transitive)

• Updatedthree@0.68.0

• Updatedthree.trackball@0.0.1