{"id":27969213,"url":"https://github.com/anvaka/ngraph.three","last_synced_at":"2025-05-07T21:09:05.648Z","repository":{"id":13439454,"uuid":"16128604","full_name":"anvaka/ngraph.three","owner":"anvaka","description":"3D graph renderer powered by three.js","archived":false,"fork":false,"pushed_at":"2019-04-01T02:40:52.000Z","size":521,"stargazers_count":45,"open_issues_count":1,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-07T21:09:00.246Z","etag":null,"topics":["3d-graph-renderer","ngraph"],"latest_commit_sha":null,"homepage":"https://github.com/anvaka/ngraph/tree/master/examples/three.js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anvaka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-22T04:22:25.000Z","updated_at":"2024-04-02T06:32:37.000Z","dependencies_parsed_at":"2022-09-16T01:11:21.417Z","dependency_job_id":null,"html_url":"https://github.com/anvaka/ngraph.three","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvaka%2Fngraph.three","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvaka%2Fngraph.three/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvaka%2Fngraph.three/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvaka%2Fngraph.three/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anvaka","download_url":"https://codeload.github.com/anvaka/ngraph.three/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252954409,"owners_count":21830905,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-graph-renderer","ngraph"],"created_at":"2025-05-07T21:09:05.070Z","updated_at":"2025-05-07T21:09:05.616Z","avatar_url":"https://github.com/anvaka.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngraph.three\n\nThis is a 3d graph renderer, which uses [three.js](https://github.com/mrdoob/three.js) as a rendering engine. \nThis library is a part of [ngraph](https://github.com/anvaka/ngraph) project. \nPlease check out [ngraph.pixel](https://github.com/anvaka/ngraph.pixel) - it is also developed with three.js,\nhowever it uses lower level primitive ([ShaderMaterial](http://threejs.org/docs/#Reference/Materials/ShaderMaterial))\nwhich allows it to be really fast (the price is flexibility of your UI model).\n\n# usage\n\nBasic example:\n\n``` js\n// Create graph:\nvar createGraph = require('ngraph.graph');\nvar graph = createGraph();\ngraph.addLink(1, 2);\n\n// And render it\nvar nthree = require('ngraph.three');\nvar graphics = nthree(graph);\n\ngraphics.run(); // begin animation loop\n```\n\nVery often it is required to do something with scene before animation frame is rendered. To do so\nuse `onFrame()` callback:\n\n``` js\nvar nthree = require('ngraph.three');\nvar graphics = nthree(graph);\n\ngraphics.onFrame(function() {\n console.log('Frame is being rendered');\n});\ngraphics.run(); // begin animation loop\n```\n\n# Configuration\n\nYou can configure renderer in many ways. To do so you can pass `settings` object to the function. Calling\n\n``` js\nvar nthree = require('ngraph.three');\nvar graphics = nthree(graph);\n```\n\nIs equivalent of calling:\n\n``` js\nvar nthree = require('ngraph.three');\nvar graphics = nthree(graph, {\n   // allow users to zoom/pan with mouse wheel:\n  interactive: true,\n  \n  // DOM element where to render the graph:\n  container: document.body,\n  \n  // Custom settings for physics engine simulator\n  physicsSettings: {\n      // Ideal length for links (springs in physical model).\n      springLength: 30,\n\n      // Hook's law coefficient. 1 - solid spring.\n      springCoeff: 0.0008,\n\n      // Coulomb's law coefficient. It's used to repel nodes thus should be negative\n      // if you make it positive nodes start attract each other :).\n      gravity: -1.2,\n\n      // Theta coefficient from Barnes Hut simulation. Ranged between (0, 1).\n      // The closer it's to 1 the more nodes algorithm will have to go through.\n      // Setting it to one makes Barnes Hut simulation no different from\n      // brute-force forces calculation (each node is considered).\n      theta: 0.8,\n\n      // Drag force coefficient. Used to slow down system, thus should be less than 1.\n      // The closer it is to 0 the less tight system will be\n      dragCoeff: 0.02,\n\n      // Default time step (dt) for forces integration\n      timeStep : 20\n   },\n  \n  // custom 3d layout:\n  layout: require('ngraph.forcelayout3d')(graph, this.physicsSettings),\n  \n  // Custom three.js renderer:\n  renderer: isWebGlSupported ? new THREE.WebGLRenderer(this) : new THREE.CanvasRenderer(this),\n\n  // allow clients to reuse custom three.js scene:\n  scene: new THREE.Scene(),  \n  \n  // custom three.js camera:\n  camera: new THREE.PerspectiveCamera(75, this.container.clientWidth/container.clientHeight, 0.1, 3000)\n});\n```\n\nYou can always override any of these settings with your own.\n\n# examples\nMany examples are available in [ngraph](https://github.com/anvaka/ngraph/tree/master/examples/three.js) repository\n\n# install\n\nWith [npm](https://npmjs.org) do:\n\n```\nnpm install ngraph.three\n```\n\n# license\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanvaka%2Fngraph.three","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanvaka%2Fngraph.three","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanvaka%2Fngraph.three/lists"}