vasturiano / 3d-force-graph-vr Goto Github PK

When I open up the examples in VR (Oculus quest) the graph is seemingly rendered large and far away (as if laid out across a sports field) compared to my scale (room or table-top size) as i move around in the real world.

Being able to physically move or look around as you would a physical object would make it more understandable.

If the scale could be easily configured with a scalar value that should cover it.

I did simulate this by setting scale on the forcegraph component really small (to '0.01 0.01 0.01') but it has side effects (requiring zooming in to make text readable which makes it vary jumpy if moving with controls).

Having looked into the underlying code, to do this properly i'm guessing it might require configuration of the charge forces down in d3-force-3d?

I am trying to provide the user in Meteor/Vue with a choice between a 3D and VR presentation of the same graph. Switching from 3D to VR view gives the above error.
I have set up a Vue-Sandbox at https://codesandbox.io/s/flamboyant-bohr-6ek32?file=/src/Graph.js
I do not expect the VR to open in the sandbox, but I expect to see the VR button without error - which it does, if 'VR' is the preselected choice.
I am aware that this may be a duplicate of vasturiano/3d-force-graph#77 - it would be great if my sandbox could help provide the code example requested for solving that as well.

Is it possible to access the camera object and get/set its attributes?

Hi,

My graph has 153 nodes and 313 links but it crashes when I open it on Firefox on the Oculus, as well as on my laptop (it freezes).
That is alarming because I'm not sure how your large ~4k element graph can run smoothly but mine does not.
My project does have a videosphere and particles on the links but I do not think that is heavy enough to cause crashing.

Any ideas why this may be occurring?

Best regards,

Calling a Vue component using ForceGraphVR I get the following error:

Uncaught TypeError: Class constructor Loader cannot be invoked without 'new'
    at new THREE.DRACOLoader (3d-force-graph-vr:2)
    at r.init (3d-force-graph-vr:83)
    at r.t.exports.System (3d-force-graph-vr:83)
    at new r (3d-force-graph-vr:83)
    at HTMLElement.value (3d-force-graph-vr:83)
    at HTMLElement.value (3d-force-graph-vr:83)
    at HTMLElement.value (3d-force-graph-vr:83)
    at HTMLElement.value (3d-force-graph-vr:83)
    at g (3d-force-graph-vr:2)
    at o (3d-force-graph-vr:2)

The main.html contains

<script src="https://unpkg.com/3d-force-graph-vr"></script>
  <script src="https://unpkg.com/3d-force-graph"></script> 
  <script src="https://unpkg.com/force-graph"></script>
  <script src="https://unpkg.com/d3-force"></script>
  <script src="https://unpkg.com/three"></script>

Components are loaded in this sequence with vr first. each component is called with its own data object

Hi, thanks so much for your work. I also posted about mobile node labels showing up. I was wondering if you could add mobile navigation, so that when the user pinches the screen on mobile the graph zooms in and out. Thank you!

add gitignore

Hi,

I'm attempting to add a video as the background - behind the graph. I can't seem to figure out how to do that.

I have added to index.html:

<video id="background-video" autoplay loop muted crossorigin="anonymous"> 
  <source src="https://static.videezy.com/system/resources/previews/000/012/740/original/Particles_4_-_30s_-_4k_res.mp4" type="video/mp4">
</video>

and

.backgroundColor("rgba(0,0,0,0)")
which by the way, gives me this message: 'THREE.Color: Alpha component of rgba(0,0,0,0) will be ignored.' - not sure why!

Then, in the .css

#background-video { width: 100vw; height: 100vh; object-fit: cover; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; }

Maybe I'm doing it completely incorrectly but I'm not sure how I can do this. Any guidance would be appreciated. Thank you!

Using the color grouping example, on mobile when the user taps a node, or the phone faces the node, the label is not displayed. This means node labels are never displayed on mobile.

Describe the bug
Running the 'basic' example modified only to move the JavaScript code to a separate ES6 module file, and importing ForceGraphVR from '3d-force-graph-vr', gives warnings:

WebXR emulator extension overrides native WebXR API with polyfill.
A-Frame:warn Put the A-Frame <script> tag in the <head> of the HTML *before* the scene to ensure everything for A-Frame is properly registered before they are used from HTML. 
A-Frame Version: 1.3.0 (Date 2022-02-04, Commit #cc3516ce)
THREE Version (https://github.com/supermedium/three.js): ^0.137.0
WebVR Polyfill Version: ^0.10.12
WARNING: Multiple instances of Three.js being imported.
core:schema:warn Unknown property `model` for component/system `generic-tracked-controller-controls`. 
core:schema:warn Unknown property `model` for component/system `generic-tracked-controller-controls`. 

To Reproduce
Bundle and run:

<head>
  <style> body { margin: 0; } </style>
</head>
<body>
  <div id="3d-graph"></div>
  <script src="./index.js" type="module"></script>
</body>

with

import ForceGraphVR from '3d-force-graph-vr';
// Random tree
    const N = 300;
    const gData = {
      nodes: [...Array(N).keys()].map(i => ({ id: i })),
      links: [...Array(N).keys()]
        .filter(id => id)
        .map(id => ({
          source: id,
          target: Math.round(Math.random() * (id-1))
        }))
    };

    const Graph = ForceGraphVR()
      (document.getElementById('3d-graph'))
        .graphData(gData);

and look at the DevTools console.
Expected behavior
No warnings

Desktop (please complete the following information):

• OS: MacOs 12.2
• Browser Chrome with WebXR API Emulator extension
• Version 98

Additional context
Same behaviour using Firefox with emulator

Hi!

Great project! I've played with this about a year ago and it worked fine in my google cardboard. The other day when I used my old toy demo again, the motion was all over the place. Is there an incompatibility with recent Android versions?

Interestingly, with the examples on this website, the gyro doesn't get picked up at all.

Oh, and on iphone xs the examples on this website don't show the cardboard icon.

Is this a known issue? Would be great to hear from you. Keep up the good work.

Best
Ulrich

Hey,

I tried to play the graph using Oculus Rift ,
Everything works fine except off the touch handles that have no response when trying to move back and forward around the graph.
While not in vr mode the touch handles works fine.
Any ideas for a solution ?

Describe the bug
3d-force-graph displays the node name over the node when the cursor is hovered over it. The same node object attribute, nodeLabel, is listed in the ReadMe for 3d-force-graph-vr, but the node name does not appear over the node, but near the centre of the graph when viewing the initial display (the one with the VR button). When one switches to VR mode, the names do not appear at all.

To Reproduce
Run the 'basic' example, with a modification to line 16:
instead of

     nodes: [...Array(N).keys()].map(i => ({ id: i})),

use

     nodes: [...Array(N).keys()].map(i => ({ id: i, name: i })),

to use the node id as its name

Expected behavior
Something similar to the display of node names of 3d-force-graph

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 69 with WebXR emulation API

Additional context
I also tried extending the nodes with a SpriteText holding the name, similar to the Text In Links example, but the sprite text is then hidden behind the node sphere.

Hi Vastiriano,

We really love the Force-Graph-VR but since the update from Google chrome to version 79 our Graph-VR is not working anymore

Only 'error' a get is this one:

VM1014 3d-force-graph-vr.min.js:84 [Deprecation] WebVR is deprecated and will be removed as soon as M79, around December 2019. Please use WebXR instead. See https://www.chromestatus.com/feature/4532810371039232 for details.

If is set "WebXR Device API" to default then i get the error:

device:error WebXR session support error: Cannot read property 'hasLoaded' of null

Do you know what wrong or how mabye i can fix it?

Thank you in advance :)

Greetings,
Bennie

Hi, i'm trying to make all my nodes (3D meshes) look at the camera position at all times, I am getting the camera position and making the mesh look at its position whenever its rendered the problem is that it only gets executed when nodeThreeObject is called, is there a way for me to make the nodes look at the camera at all times despite not getting rerendered ?

EDIT : After running some tests I found out that while I'm getting a camera, the vector is always (0,0,0) (even atfer moving the camera and triggering a rerender), here is the code I'm using to get the camera and print the position vector inside the nodeThreeObject :

  let cameraEl = document.querySelector("a-entity[camera]");
    if (!cameraEl) {
      cameraEl = document.querySelector("a-camera");
    }
    let camera = cameraEl.components.camera.camera;
    console.log(camera.position) // Always 0,0,0

Thanks.

Hello Vasco..
How can I add properties to the node so that an interaction can be made by dragging and dropping it through a library 3d-force-graph-vr tp large graph 4k?
please help me .. i'm beginner to this

Hi, after many attempts, I was finally able to get VR working with another github project quite easily (https://github.com/mister-blanket/blood-lines)

But, now I am facing another issue: when I click on the Enter VR button, the 360 video appears correctly but the graph does not, at all. If anyone has any ideas at all, that would be super appreciated as I'm not sure what the issue is.

I'm wondering if this is a container issue? Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>

//font
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.rawgit.com/mister-blanket/portfolio/master/css/fontawesome/css/all.css" rel="stylesheet">
  <title>Blood Lines</title>

</head>

<body>
  <div id='root'></div>
//container for 360 video
  <div id="container"></div>
    <canvas data-engine="three.js r135" width="563" height="706" z-index="-1"
    style="display: block; width: 563; height: 706;"></canvas>
</div>

//360 video
<video id="background-video" autoplay loop muted>
 <source src="http://altartnet.com/~malani/Test360VRCam_CorrectFPS_1.mp4" type="video/mp4">
</video>



</body>


</html>

Thank you

Hey! I believe this should be a quick question, simple solution, but I can't seem to add a video BEHIND the graph/a background video.

My code in Graph.js:

// Display
  width={width}
  height={height}
  backgroundColor={"#background-video"}
  showNavInfo={false}

In style.scss:

#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;

Despite making it backgroundColor and z-index -1, the video still appears in front of the graph.

Any ideas?

Thank you

I'm trying to add a custom force to the graph, but somehow it works for the 3d-force-graph and when I'm trying it with 3d-force-graph-vr, I'm getting an error " .d3Force is not a function".
If it's possible to add custom forces, if yes, then how to do it. It would be of great help!

I have been trying to add a background image, instead of the default background color.

I have gone through some solutions but none of them worked, I have also looked into the React force graph in which you can access the current.scene and then work your way from there.

However in this particular library it doesn't seem to work. Is it something I am doing wrong or is it just not possible in this library yet?

Hello, I would like to make a VR browser simulator to help people understand how the web works. I would really like to use this library since the web is at its core a graph and I think the ability to have different depths for progression through pages will be useful. However, I have been unable to find a combination that supports the targetted feature combination, or at least when I tried, I ran across underlying errors that seemed to indicate incompatibilities between libraries & features. I spent a few hours at it but could never get it to work, the multiple versions of this library led to more uncertainty.

Here is what I would like to combine: a-frame, gaze, 3d-force-graph, laser and keyboard controls, project images/video onto the nodes, labelled edges. Basically, the user would start facing a node that represents a page, with edges going to its assets and "forward" in depths to its links. The user can use gaze, laser, or keyboard to inspect or follow assets & links. Ideally the nodes could be (live) video, but updating images would be ok too.

I am a pretty good typescript developer, but not familiar with 3d libraries, a-frame seems like a good choice at my level. I am developing in VR with a Quest Pro.

Is the combination possible with this library? Can you point me to an example that combines these features?

If it requires some work, I would be happy to fund some open source development.

Thank you!

Would be awesome to have this as an AFrame Component.

I can work on this if you like -- just message me about this so we don't duplicate work.

Looks like the issue causing touch screen movement controls to break in c-frame has been fixed and released.

Maybe we can re-enable them now?

Hi,

I'm not sure if this already exists but I'm making a family tree using this 3d force graph and I have family members with the same names. Because of that, the node links connect the wrong names together, confusing them. Is there a way to differentiate same name nodes? If not, adding a way to do that would be great!

Thanks

Hi, i'm currently displaying 2D icons in the VR graph using sprites and I found another example to display only text as well, i'm looking for away to display my image sprite AND a text below, I haven't found a way to do so yet.

Here's how I'm rendering my nodes currently (just displaying a sprite based on a field in my node)

nodeThreeObject={(node) => { const imgTexture = new THREE.TextureLoader().load( get_icon(node["node_label_type"]).src ); const material = new THREE.SpriteMaterial({ map: imgTexture, }); const sprite = new THREE.Sprite(material); sprite.scale.set(12, 12); return sprite; }}

Is there a way I can add some text on top of the sprite I'm rendering ? I'm looking for a way to render multiple sprites for a single node instead of just one as i'm doing currently. Thanks a lot

how challenging would it be to represent nodes with user defined meshes instead of spheres? presuming you had (reference to) those assets.

Describe the bug
Error when providing a nested HTML element as domNode:

plugin:obsidian-3d-graph:53529 Uncaught TypeError: Cannot read properties of undefined (reading 'xr')
    at HTMLElement.value (plugin:obsidian-3d-graph:53529:31)
    at HTMLElement.wrappedMethod (plugin:obsidian-3d-graph:52596:36)
    at gt (plugin:obsidian-3d-graph:2035:248)
    at st (plugin:obsidian-3d-graph:1988:15)
    at eval (plugin:obsidian-3d-graph:1996:37)
    at n2 (plugin:obsidian-3d-graph:2113:59)
    at MutationObserver.eval (plugin:obsidian-3d-graph:2118:82)

To Reproduce
Steps to reproduce the behavior:

1. const nestedHtmlElement = document.querySelector(#some-nested-object)
2. this.instance = ForceGraphVR()(nestedHtmlElement).graphData(data);

Expected behavior
It should work like the example code projects. But when providing an element other than body > div, it doesn't work.

Desktop (please complete the following information):

• OS: macOS
• Browser electron
• Version latest

Additional context
Add any other context about the problem here.

Hello,

For some reason, when I try to implement nodes and text at the same time, it throws this error:

THREE.Sprite: "Raycaster.camera" needs to be set in order to raycast against sprites.
Uncaught TypeError: e.camera is null

You can see this happening in the example too: https://vasturiano.github.io/3d-force-graph-vr/example/text-links/

Any idea how I can fix this? I'd ideally like to have both the sphere nodes and text apparent.

Thank you!

Hi, I am wondering if there's any chance of letting the VR User navigate through the space using the VR controllers? That would be awesome, just like the rest of your work, thank you!

Hey there, I'm considering on using this to visualize large networks of 100k+ links. How does this vis handle large datasets?

I've been able to sort-of pull this off with the d3v3 force graph by precomputing positions and using css transitions rather than re-rendering every frame, but it's glitchy with more than about 5000 links. I was thinking of rewriting the UI to use Canvas/WebGL, and it looks like you've been down the same path already and produced the 2d canvas version. Curious about your experience with that, and your thoughts on using canvas for 3D and VR.

Thanks. I know this isn't really an "issue" but I don't see how else to send a message. Maybe hit me on twitter @paul4nandez if desired. :)

Is there a specific reason why the 2d and 3d variants have support for emitParticle(), while this one does not?

This would be a really nice addition to generate more real-time visualizations.

Im Trying to implement a graph in angular. Unfortunately I cant build it because three-forcegraph imports 'three'

import { Object3D, Material } from 'three';

This cannot be found and throws an error:
Error: ./node_modules/three-forcegraph/dist/three-forcegraph.module.js
Module not found: Error: Can't resolve 'three' in '/Users/s***/Projects///node_modules/three-forcegraph/dist'

Is there anything I'm missing?

Is your feature request related to a problem? Please describe.
For an upcoming demo this would be useful.

Describe the solution you'd like
I am wondering if something like this is available in 3d-force-graph-vr.

Describe alternatives you've considered
(See link)

Additional context
It would be useful to render the graph with the passthrough camera feed as the background. Not sure how react-xr does it but I imagine it would just require a tweak to the underlying three render object. Not sure if we can currently do that from the 3d-force-graph-vr API. If so, please let me know as this would be great!

Hi,

Im trying to render graph with text nodes by using text-nodes example. Unfortunately it renders textSprites only for right eye. Edges looks good for both eyes. The issue only exist in Oculus Browser, other examples seems to work properly. I'm not sure if this is the right place, to bring this up. Maybe this is three.js, or oculus browser issue.

Regards,
Dawid Cech

Describe the bug
The HTML 5 standard requires an informational declaration <!DOCTYPE html> at the start of an html file.
The source file provided on the README page for the basic example does not include this declaration - it starts with the <head> element. To my astonishment, if you add the missing declaration (and the required <html> and </html> elements) the example no longer works - the generated web page is blank although there are no errors reported in the console.
To Reproduce
Copy the basic example into a file, prepend <!DOCTYPE html><html> and append </html>, and then access this file through a browser. You will see a blank, white page.

Expected behavior
The same as the file without these additions.

Desktop (please complete the following information):

• OS: Mac OS Monterey
• Browser Any (tested on Chrome and Firefox) with WebXR emulator extension
• Version 98

Additional context
I am mystified what could cause this to happen - and Google hasn't helped. It took me a long time to discover that the apparently innocuous DOCTTYPE declaration was causing grief!

I received the following error when I try my code below:

3d-force-graph-vr.min.js:136 Uncaught TypeError: Cannot read property 'components' of undefined
at Function.d3Force (3d-force-graph-vr.min.js:136)
at Function.n.(anonymous function) [as d3Force] (https://unpkg.com/[email protected]/dist/3d-force-graph-vr.min.js:133:695254)
at datavis_a2.js:104
d3Force @ 3d-force-graph-vr.min.js:136
n.(anonymous function) @ 3d-force-graph-vr.min.js:133
(anonymous) @ datavis_a2.js:104

The relevant code is the following:
const graph = ForceGraphVR()
.d3Force('collision', d3.forceCollide(node => Math.cbrt(node.numLinks) * NODE_REL_SIZE))

Any idea what is the issue?
Thank you so much for the amazing work.

Hi!

We are trying to upgrade this project https://github.com/mister-blanket/blood-lines to replace 3d-force-graph with 3d-force-graph-vr. We installed the latest react-force-graph-vr and replaced the import here https://github.com/mister-blanket/blood-lines/blob/master/src/Graph.js#L4 with import ForceGraphVR from "react-force-graph-vr" and the module here https://github.com/mister-blanket/blood-lines/blob/master/src/Graph.js#L423 with ForceGraphVR. Here are the errors we are getting.

Do you have a recommendation on the right combination of versions we should use or a path to upgrade this older project to enable VR?

Thank you!

Hi,

I was trying to create a graph by passing labels in the data as follows:

{
    "nodes": [ 
        { 
          "id": "id1",
          "name": "name1",
          "val": 1 
        },
        ....
}

I see that the name attribute is used for displaying labels:

nameField([str]) | Node object accessor attribute for name (shown in label) | name

Is it possible to add an enhancement to show all labels below the nodes of the graph, instead of on pointing/hovering on the node?

Love the project by the way :)

I need to restart the simulation at a certain point of time, it would be of great help if anyone could help me with that. Thanks in advance.

Hello,

I believe this was reported and fixed before but just an FYI: the movement controls do not work on the Oculus for my graph. It works for the examples though! See my github rep here: https://github.com/malani-art/April2022_FC

Is there an issue with my project?

Best regards,

Describe the bug
Web example using images for nodes is broken and does not render properly

console error message:

Raycaster.camera" needs to be set in order to raycast against sprites.

aslo

Uncaught TypeError: Cannot read property 'matrixWorld' of null
    at kl.raycast (3d-force-graph-vr:2)
    at up (3d-force-graph-vr:2)
    at up (3d-force-graph-vr:2)
    at lp.intersectObjects (3d-force-graph-vr:2)
    at n.checkIntersections (3d-force-graph-vr:83)
    at n.tock (3d-force-graph-vr:83)
    at HTMLElement.value (3d-force-graph-vr:83)
    at t.object3D.onAfterRender (3d-force-graph-vr:83)
    at dl.render (3d-force-graph-vr:2)
    at HTMLElement.value (3d-force-graph-vr:83)

To Reproduce
Steps to reproduce the behavior:

1. Go to https://vasturiano.github.io/3d-force-graph-vr/example/img-nodes/

I am also able to reproduce in a local environment

Expected behavior
Should render graph with image icons for nodes as exampled here

Desktop (please complete the following information):

• OS: Mac
• Browser [brave, safari]
• Version [
  brave: Version 1.25.68 Chromium: 91.0.4472.77 (Official Build) (x86_64),
  safari: Version 14.0.3 (15610.4.3.1.7, 15610)
  ]

Thank you as I really appreciate this project.

Hey, I would really like to use the touch controllers of my Oculus Quest to interact with the visualization. For instance, hovering nodes with a laser pointer instead of the head or moving nodes would be great.

Is this already possible in the current version, planned, or do you see a simple way of implementing this?

Describe the bug
I'm trying to create a DAG where the nodes expand or collapse when clicked on.

I'm following this demo - https://github.com/vasturiano/3d-force-graph/blob/master/example/expandable-nodes/index.html

Changing the library to

<script src="//unpkg.com/3d-force-graph-vr"></script>

And the graph to

const Graph = ForceGraphVR()(elem)

Allows me to display the initial graph. I can view it in my VR headset, but I can't interact with the nodes.

Clicking on them in a regular browsers produces the error:

Uncaught TypeError: cyclic object value

Is there any way to have interactive nodes in the VR view? Thanks!