<head>
<style> body { margin: 0; } </style>
<script type="importmap">{ "imports": {
"react": "https://esm.sh/react",
"react-dom": "https://esm.sh/react-dom/client"
}}</script>
<script type="module">
import * as React from 'react';
window.React = React;
</script>
<script src="//unpkg.com/react-force-graph-vr" defer></script>
</head>
<body>
<div id="graph"></div>
<script src="//unpkg.com/@babel/standalone"></script>
<script type="text/jsx" data-type="module">
import { createRoot } from 'react-dom';
import * as THREE from '//esm.sh/three';
import { genRandomTree } from '../datasets/random-data.js';
createRoot(document.getElementById('graph')).render(
<ForceGraphVR
graphData={genRandomTree(100)}
nodeThreeObject={({ id }) => new THREE.Mesh(
[
new THREE.BoxGeometry(Math.random() * 20, Math.random() * 20, Math.random() * 20),
new THREE.ConeGeometry(Math.random() * 10, Math.random() * 20),
new THREE.CylinderGeometry(Math.random() * 10, Math.random() * 10, Math.random() * 20),
new THREE.DodecahedronGeometry(Math.random() * 10),
new THREE.SphereGeometry(Math.random() * 10),
new THREE.TorusGeometry(Math.random() * 10, Math.random() * 2),
new THREE.TorusKnotGeometry(Math.random() * 10, Math.random() * 2)
][id%7],
new THREE.MeshLambertMaterial({
color: Math.round(Math.random() * Math.pow(2, 24)),
transparent: true,
opacity: 0.75
})
)}
/>
);
</script>
</body>