Add lights getter/setter to 3d graph

Author: vasturiano

README.md

@@ -175,6 +175,7 @@ Note that not all props listed below apply to all 4 components. The last 4 colum
 | <b>zoom</b> | ([<i>number</i>], [<i>ms</i>]) | Set the 2D canvas zoom amount. The zoom is defined in terms of the scale transform of each px. A value of `1` indicates unity, larger values zoom in and smaller values zoom out. An optional 2nd argument defines the duration of the transition (in ms) to animate the canvas motion. By default the zoom is set to a value inversely proportional to the amount of nodes in the system. | :heavy_check_mark: | | |
 | <b>zoomToFit</b> | ([<i>ms</i>], [<i>px</i>], [<i>nodeFilterFn</i>]) | Automatically zooms/pans the canvas so that all of the nodes fit inside it. If no nodes are found no action is taken. It accepts two optional arguments: the first defines the duration of the transition (in ms) to animate the canvas motion (default: 0ms). The second argument is the amount of padding (in px) between the edge of the canvas and the outermost node (default: 10px). The third argument specifies a custom node filter: `node => <boolean>`, which should return a truthy value if the node is to be included. This can be useful for focusing on a portion of the graph. | :heavy_check_mark: | :heavy_check_mark: | | |
 | <b>cameraPosition</b> | ([<i>{x,y,z}</i>],[<i>lookAt</i>], [<i>ms</i>]) | Re-position the camera, in terms of `x`, `y`, `z` coordinates. Each of the coordinates is optional, allowing for motion in just some dimensions. The optional second argument can be used to define the direction that the camera should aim at, in terms of an `{x,y,z}` point in the 3D space. The 3rd optional argument defines the duration of the transition (in ms) to animate the camera motion. A value of 0 (default) moves the camera immediately to the final position. By default the camera will face the center of the graph at a `z` distance proportional to the amount of nodes in the system. | | :heavy_check_mark: | | |
+| <b>lights</b> | ([<i>array</i>]) | Getter/setter for the list of lights to use in the scene. Each item should be an instance of [Light](https://threejs.org/docs/#api/en/lights/Light). | | :heavy_check_mark: | | |
 | <b>scene</b> | *-* | Access the internal ThreeJS [Scene](https://threejs.org/docs/#api/scenes/Scene). | | :heavy_check_mark: | | |
 | <b>camera</b> | *-* | Access the internal ThreeJS [Camera](https://threejs.org/docs/#api/cameras/PerspectiveCamera). | | :heavy_check_mark: | | |
 | <b>renderer</b> | *-* | Access the internal ThreeJS [WebGL renderer](https://threejs.org/docs/#api/renderers/WebGLRenderer). | | :heavy_check_mark: | | |

src/packages/react-force-graph-3d/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Scene, Camera, WebGLRenderer, Object3D, Material } from 'three';
+import { Light, Scene, Camera, WebGLRenderer, Object3D, Material } from 'three';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { ConfigOptions, ForceGraph3DInstance as ForceGraphKapsuleInstance } from '3d-force-graph';
 
@@ -150,6 +150,8 @@ export interface ForceGraphMethods<
   cameraPosition(position: Partial<Coords>, lookAt?: Coords, transitionMs?: number): ForceGraphKapsuleInstance;
   zoomToFit(durationMs?: number, padding?: number, nodeFilter?: (node: NodeObject<NodeType>) => boolean): ForceGraphKapsuleInstance;
   postProcessingComposer(): EffectComposer;
+  lights(): Light[];
+  lights(lights: Light[]): ChainableInstance;
   scene(): Scene;
   camera(): Camera;
   renderer(): WebGLRenderer;

src/packages/react-force-graph-3d/index.js

@@ -18,6 +18,7 @@ const ForceGraph3D = fromKapsule(
       'screen2GraphCoords',
       'graph2ScreenCoords',
       'postProcessingComposer',
+      'lights',
       'scene',
       'camera',
       'renderer',

src/packages/react-force-graph-3d/package.json

@@ -43,7 +43,7 @@
     "dist/**/*"
   ],
   "dependencies": {
-    "3d-force-graph": "1",
+    "3d-force-graph": "^1.73",
     "prop-types": "15",
     "react-kapsule": "2"
   },