Add lights getter/setter method

README.md

@@ -154,6 +154,7 @@ ForceGraph3d({ configOptions })(<domElement>)
 | <b>cameraPosition</b>([<i>{x,y,z}</i>], [<i>lookAt</i>], [<i>ms</i>]) | Getter/setter for the camera position, 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. |
 | <b>zoomToFit</b>([<i>ms</i>], [<i>px</i>], [<i>nodeFilterFn</i>]) | Automatically moves the camera so that all of the nodes become visible within its field of view, aiming at the graph center (0,0,0). If no nodes are found no action is taken. It accepts three optional arguments: the first defines the duration of the transition (in ms) to animate the camera motion (default: 0ms). The second argument is the amount of padding (in px) between the edge of the canvas and the outermost node location (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. | `(0, 10, node => true)` |
 | <b>postProcessingComposer</b>() | Access the [post-processing composer](https://threejs.org/docs/#examples/en/postprocessing/EffectComposer). Use this to add post-processing [rendering effects](https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing) to the scene. By default the composer has a single pass ([RenderPass](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/postprocessing/RenderPass.js)) that directly renders the scene without any effects. || 
+| <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). | [AmbientLight](https://threejs.org/docs/?q=ambient#api/en/lights/AmbientLight) + [DirectionalLight](https://threejs.org/docs/#api/en/lights/DirectionalLight) (from above) |
 | <b>scene</b>() | Access the internal ThreeJS [Scene](https://threejs.org/docs/#api/scenes/Scene). Can be used to extend the current scene with additional objects not related to 3d-force-graph. | |
 | <b>camera</b>() | Access the internal ThreeJS [Camera](https://threejs.org/docs/#api/cameras/PerspectiveCamera). | |
 | <b>renderer</b>() | Access the internal ThreeJS [WebGL renderer](https://threejs.org/docs/#api/renderers/WebGLRenderer). ||

package.json

@@ -50,19 +50,19 @@
     "kapsule": "1",
     "three": ">=0.118 <1",
     "three-forcegraph": "1",
-    "three-render-objects": "1"
+    "three-render-objects": "^1.29"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.15",
-    "@babel/preset-env": "^7.22.15",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-terser": "^0.4.3",
-    "postcss": "^8.4.29",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.28.1",
-    "rollup-plugin-dts": "^6.0.1",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "postcss": "^8.4.31",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.1.4",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "typescript": "^5.2.2"
   },

src/3d-force-graph.js

@@ -93,6 +93,7 @@ const linkedRenderObjsProps = Object.assign(...[
 ].map(p => ({ [p]: bindRenderObjs.linkProp(p)})));
 const linkedRenderObjsMethods = Object.assign(
   ...[
+    'lights',
     'cameraPosition',
     'postProcessingComposer'
   ].map(p => ({ [p]: bindRenderObjs.linkMethod(p)})),
@@ -184,10 +185,18 @@ export default Kapsule({
     ...linkedRenderObjsMethods
   },
 
-  stateInit: ({ controlType, rendererConfig, extraRenderers }) => ({
-    forceGraph: new ThreeForceGraph(),
-    renderObjs: ThreeRenderObjects({ controlType, rendererConfig, extraRenderers })
-  }),
+  stateInit: ({ controlType, rendererConfig, extraRenderers }) => {
+    const forceGraph = new ThreeForceGraph();
+    return {
+      forceGraph,
+      renderObjs: ThreeRenderObjects({ controlType, rendererConfig, extraRenderers })
+        .objects([forceGraph]) // Populate scene
+        .lights([
+          new three.AmbientLight(0xcccccc, Math.PI),
+          new three.DirectionalLight(0xffffff, 0.6 * Math.PI)
+        ])
+    }
+  },
 
   init: function(domNode, state) {
     // Wipe DOM
@@ -344,11 +353,6 @@ export default Kapsule({
     // config renderObjs
     state.renderObjs.renderer().useLegacyLights = false; // force behavior for three < 155
     state.renderObjs
-      .objects([ // Populate scene
-        new three.AmbientLight(0xcccccc, Math.PI),
-        new three.DirectionalLight(0xffffff, 0.6 * Math.PI),
-        state.forceGraph
-      ])
       .hoverOrderComparator((a, b) => {
         // Prioritize graph objects
         const aObj = getGraphObj(a);

src/index.d.ts

@@ -1,4 +1,4 @@
-import { Scene, Camera, WebGLRenderer, WebGLRendererParameters, Renderer } from 'three';
+import { Scene, Light, Camera, WebGLRenderer, WebGLRendererParameters, Renderer } from 'three';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { ThreeForceGraphGeneric } from 'three-forcegraph';
 
@@ -64,6 +64,8 @@ export interface ForceGraph3DGenericInstance<ChainableInstance>
   cameraPosition(position: Partial<Coords>, lookAt?: Coords, transitionMs?: number): ChainableInstance;
   zoomToFit(durationMs?: number, padding?: number, nodeFilter?: (node: object) => boolean): ChainableInstance;
   postProcessingComposer(): EffectComposer;
+  lights(): Light[];
+  lights(lights: Light[]): ChainableInstance;
   scene(): Scene;
   camera(): Camera;
   renderer(): WebGLRenderer;