Example for events with ngraph.three

[Matthi0uw]

Hi,
Again nice work (like Vivagraph) !
Have you an example to show how events works in with threejs render like with for Vivagraph?
Thanks :)

[Matthi0uw]

After little search, I found solution using this threejs example

More informations next week :)

[anvaka]

Yep, ray tracing is the way to go. Maybe it should be part of ngraph.three itself. Not sure yet.

btw, three.js become much much faster, and with recent introduction of particles you can render 100k nodes at constant 60fps. See here: http://threejs.org/examples/#webgl_buffergeometry_particles

I'm super impressed by its performance.

Looking forward to seeing your demo!

[anvaka]

btw, more demos for interactive stuff in three.js is available there: http://threejs.org/examples/#webgl_interactive_cubes

[Matthi0uw]

There is 60fps because all element are merged in 1 object3D :

var mergedGeo = new THREE.Geometry();
var geometry = new THREE.CubeGeometry( 20, 20, 20 );
for ( var i = 0; i < 2000; i ++ ) {
    var color = Math.random() * 0xffffff;
    var material = new THREE.MeshLambertMaterial( { color: color });
    var object = new THREE.Mesh( geometry,  material ); 
    THREE.GeometryUtils.merge(mergedGeo, object);
}
basicMaterial = new THREE.MeshLambertMaterial();
group = new THREE.Mesh(mergeGeo, basicMaterial);
scene.add( group );

With this, you can got thousands nodes before FPS decrease.

I try to use this with ngraph... but have some problems with links and interactions.

[anvaka]

What are the problems with links and interactions?

[Matthi0uw]

Problems on interactions : as I have all on 1 mesh, I've got some problems to find which element is under the mouse position because the raycaster find only the merged element.
Problems with links :

nodes A,B,C and bezier curve links A-C and C-B (in green on the picture).
I create some mesh line, then I merged all in one other mesh line : it display orange links because it's LINE_STRIP (I go from C to A by green way, then i came back at C by orange way to display the next link).