Three.js useScreenCoordinates is not a property of this material

[CursingThomas]

Description

• Library Version:
  1.1.0
• ROS Version:
  Noetic
• Platform / OS:
  Linux

Steps To Reproduce
I have literally copied this guide, it can be found right here:
https://answers.ros.org/question/358085/how-to-use-markerarrayclient-in-ros3djs/

It links another tutorial which is built upon, I copied all the code from there; and adjusted MarkerClient to MarkerArrayClient
https://wiki.ros.org/ros3djs/Tutorials/VisualizingAMarkerTopic

Expected Behavior
My markers show up in the viewer

Actual Behavior
My markers do not show up on the screen. Whenever I post a marker, the web console immideately starts spewing errors about Three.js: "THREE.SpriteMaterial: 'useScreenCoordinates' is not a property of this material."
This goes on indefinately and rapidly adds up to numbers in the thousand.

[CursingThomas]

Noone who can provide any insight to this??

[MatthijsBurgh]

@CursingThomas please be a bit more patient.

[Pandananana]

I have the same issue. Don't know what I am doing wrong.
I am using three.js r89 and roslib.js 1.3.0
Removing the PointCloud material size does nothing. If I remove the ROS3D.MarkerArrayClient then the warnings go away

This is my code:

var ros = new ROSLIB.Ros({
  url: 'ws://scanner1.local:9090' // Change this to the actual URL of your rosbridge server
});

ros.on('connection', function () {
  console.log('Connected to rosbridge server.');
  initVisualization(ros);
});

ros.on('error', function (error) {
  console.log('Error connecting to rosbridge server:', error);
});

ros.on('close', function () {
  console.log('Connection to rosbridge server closed.');
});

function initVisualization(ros) {
  // Create the main viewer.
  var viewer = new ROS3D.Viewer({
    divID: 'viewer', // Make sure you have a div with this ID in your HTML
    width: window.innerWidth,
    height: window.innerHeight / 2,
    antialias: true,
    background: '#000000' // Background color
  });

  // Add a grid.
  var gridClient = new ROS3D.Grid({
    color: '#038cfc',
    cellSize: 1, // Size of each cell in the grid in meters
    num_cells: 10 // Number of cells in the grid
  });

  viewer.scene.add(gridClient);

  // Setup a client to listen to TFs.
  var tfClient = new ROSLIB.TFClient({
    ros: ros,
    angularThres: 0.01,
    transThres: 0.01,
    rate: 10.0,
    fixedFrame: '/map' // Change this to the appropriate fixed frame in your setup
  });

  // Setup the PointCloud2 client.
  var cloudClient = new ROS3D.PointCloud2({
    ros: ros,
    tfClient: tfClient,
    rootObject: viewer.scene,
    topic: '/vins_estimator/point_cloud', // Your actual topic name
    material: { size: 0.05, color: 0xff00ff } // Adjust point cloud appearance
  });

  // Setup the MarkerArray client.
  var markerArrayClient = new ROS3D.MarkerArrayClient({
    ros: ros,
    tfClient: tfClient,
    topic: '/vins_estimator/camera_pose_visual', // Your actual topic name
    rootObject: viewer.scene
  });

  // Setup the Path client.
  var pathClient = new ROS3D.Path({
    ros: ros,
    tfClient: tfClient,
    rootObject: viewer.scene,
    topic: '/vins_estimator/path', // Your actual topic name
    color: '#00ff00', // Adjust path color
    lineWidth: 0.1 // Adjust path line width
  });

  // Add event listener for window resize
  window.addEventListener('resize', function() {
    viewer.width = window.innerWidth;
    viewer.height = window.innerHeight / 2;
    viewer.camera.aspect = viewer.width / viewer.height;
    viewer.camera.updateProjectionMatrix();
    viewer.renderer.setSize(viewer.width, viewer.height);
  });
}