Flat shading

[piaaaac]

Hi, thank you for this great library.

Would it be possible to adopt flat shading = removing shades on the spheres representing the nodes? I guess adopting something like THREE.FlatShading would do the trick but I have no clue where to edit that.

[piaaaac]

Maybe a direct access to the THREE object could be a solution? That could allow also for more control over the camera? (Since I'm not familiar with three.js, hope this makes sense)

[vasturiano]

@piaaaac thanks for reaching out. The spheres are using MeshLambertMaterial which reflect the light and create the shades effect that you described. The material is being applied here: https://github.com/vasturiano/three-forcegraph/blob/master/src/forcegraph-kapsule.js#L285

You could simply replace the default node objects with your custom version which uses non-reflective material, like MeshBasicMaterial.

You can do this using the .nodeThreeObject(Object3d) method. Here's an example with custom node objects: https://vasturiano.github.io/3d-force-graph/example/custom-node-geometry/ source

As for the camera motion, you should use the .cameraPosition(x, y, z) method. This example uses it to orbit: https://vasturiano.github.io/3d-force-graph/example/camera-auto-orbit/

[piaaaac]

@vasturiano thanks a lot for your time.

About materials, thanks for pointing me to the right example. For anyone who might need to render flat spheres, the code is:

Graph
  .backgroundColor("#000")
  .nodeResolution(16)
  .nodeThreeObject(({ id }) => new THREE.Mesh(
    new THREE.SphereGeometry(3),
    new THREE.MeshBasicMaterial()
  ))

Antialias would be needed at that point, also not sure how to add it.

About Camera movement, I'd need also the ability to choose where to point to – I guess issue #23 and maybe #38 are related..

[vasturiano]

@piaaaac I've added the ability to aim the camera at a point, this can be passed as a second optional argument to the cameraPosition method. Here's an example of it in use:

https://vasturiano.github.io/3d-force-graph/example/click-to-focus/ (click on a node to aim the camera at the node itself)