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

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <script src="//unpkg.com/@babel/standalone"></script>

  <script src="//unpkg.com/react-force-graph-vr"></script>
  <!--<script src="../../src/packages/react-force-graph-vr/dist/react-force-graph-vr.js"></script>-->

  <script src="../datasets/random-data.js"></script>
</head>

<body>
  <div id="graph"></div>

  <script type="text/jsx" data-type="module">
    import * as THREE from '//unpkg.com/three/build/three.module.js';

    ReactDOM.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
          })
        )}
      />,
      document.getElementById('graph')
    );
  </script>
</body>