examples/html-import/markers.html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.js"></script>
    <script type="module">
      import * as ROS3D from './node_modules/ros3d/build/ros3d.esm.js'

      /**
       * Setup all visualization elements when the page is loaded.
       */
      function init() {
        // Connect to ROS.
        var ros = new ROSLIB.Ros({
          url: 'ws://localhost:9090'
        });

        // Create the main viewer.
        var viewer = new ROS3D.Viewer({
          divID: 'markers',
          width: 400,
          height: 300,
          antialias: true
        });

        // Setup a client to listen to TFs.
        var tfClient = new ROSLIB.TFClient({
          ros: ros,
          angularThres: 0.01,
          transThres: 0.01,
          rate: 10.0,
          fixedFrame: '/my_frame'
        });

        // Setup the marker client.
        var markerClient = new ROS3D.MarkerClient({
          ros: ros,
          tfClient: tfClient,
          topic: '/visualization_marker',
          rootObject: viewer.scene
        });
      }

      // Trigger init after DOM loads
      document.addEventListener('DOMContentLoaded', init)
    </script>
  </head>

  <body>
    <h1>Simple Marker Example</h1>
    <p>Run the following commands in the terminal then refresh this page.</p>
    <ol>
      <li><tt>roscore</tt></li>
      <li><tt>rosrun visualization_marker_tutorials basic_shapes</tt></li>
      <li><tt>rosrun tf2_web_republisher tf2_web_republisher</tt></li>
      <li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
    </ol>
    <div id="markers"></div>
  </body>
</html>