From 73c149731b71d65d942db1aed10886d621aefc70 Mon Sep 17 00:00:00 2001 From: Adam Powers Date: Fri, 1 Mar 2024 22:49:47 -0800 Subject: [PATCH 1/2] use setAnimationLoop for rendering --- src/3d-force-graph.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/3d-force-graph.js b/src/3d-force-graph.js index d4879dfa..2649adad 100644 --- a/src/3d-force-graph.js +++ b/src/3d-force-graph.js @@ -148,20 +148,15 @@ export default Kapsule({ return this; }, pauseAnimation: function(state) { - if (state.animationFrameRequestId !== null) { - cancelAnimationFrame(state.animationFrameRequestId); - state.animationFrameRequestId = null; - } + this.renderer().setAnimationLoop(null); return this; }, resumeAnimation: function(state) { - if (state.animationFrameRequestId === null) { - this._animationCycle(); - } + this.renderer().setAnimationLoop(this._render); return this; }, - _animationCycle(state) { + _render(state) { if (state.enablePointerInteraction) { // reset canvas cursor (override dragControls cursor) this.renderer().domElement.style.cursor = null; @@ -170,7 +165,6 @@ export default Kapsule({ // Frame cycle state.forceGraph.tickFrame(); state.renderObjs.tick(); - state.animationFrameRequestId = requestAnimationFrame(this._animationCycle); }, scene: state => state.renderObjs.scene(), // Expose scene camera: state => state.renderObjs.camera(), // Expose camera @@ -421,7 +415,7 @@ export default Kapsule({ // // Kick-off renderer - this._animationCycle(); + this.renderer().setAnimationLoop(this._render); } }); From 51b022c3d37e5c60a8133787c0b9b1a209c4cf21 Mon Sep 17 00:00:00 2001 From: Adam Powers Date: Sat, 2 Mar 2024 00:26:06 -0800 Subject: [PATCH 2/2] add WebXR support --- example/webxr/index.html | 39 +++++++++++++++++++++++++++++++++++++++ src/3d-force-graph.js | 8 ++++++++ 2 files changed, 47 insertions(+) create mode 100644 example/webxr/index.html diff --git a/example/webxr/index.html b/example/webxr/index.html new file mode 100644 index 00000000..d23103ea --- /dev/null +++ b/example/webxr/index.html @@ -0,0 +1,39 @@ + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/src/3d-force-graph.js b/src/3d-force-graph.js index 2649adad..81a9d52b 100644 --- a/src/3d-force-graph.js +++ b/src/3d-force-graph.js @@ -5,6 +5,7 @@ const three = window.THREE : { AmbientLight, DirectionalLight, Vector3 }; import { DragControls as ThreeDragControls } from 'three/examples/jsm/controls/DragControls.js'; +import { XRButton as ThreeXRButton } from 'three/addons/webxr/XRButton.js'; import ThreeForceGraph from 'three-forcegraph'; import ThreeRenderObjects from 'three-render-objects'; @@ -124,6 +125,7 @@ export default Kapsule({ triggerUpdate: false }, enableNodeDrag: { default: true, triggerUpdate: false }, + enableWebXR: { default: true, triggerUpdate: false }, onNodeDrag: { default: () => {}, triggerUpdate: false }, onNodeDragEnd: { default: () => {}, triggerUpdate: false }, onNodeClick: { triggerUpdate: false }, @@ -414,6 +416,12 @@ export default Kapsule({ // + // config WebXR + if (state.enableWebXR) { + document.body.appendChild( ThreeXRButton.createButton( renderer ) ); + renderer.xr.enabled = true; + } + // Kick-off renderer this.renderer().setAnimationLoop(this._render); }