example/custom-node-shape/index-three.html

<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>
  <!--<script src="../../src/packages/react-force-graph-vr/dist/react-force-graph-vr.js" 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>