Add geometry in ROS3D viewer

edit

Hello,

I am trying to add a few circles in a ROS3D.viewer in predetermined locations but I am getting a weird behaviour. When I add the geometries my robot model breaks (why??). I tried adding ROS3D.Arrow instead just to test if it would work and it works just fine, but if I copy the exact same code of the ROS3D.Arrow and paste it in my javascript the same weird problem occurs.

I tired doing like this:

var geometry = new THREE.CircleGeometry( 0.1, 32 );
geometry.translate(goal[0], goal[1], 0.05 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh( geometry, material );

viewer.scene.add(mesh)

And I also tried modifying the ROS3D.Arrow to create a new class called Circle and adding it like this:

viewer.scene.add(new Circle({
    origin: new THREE.Vector3(goal[0], goal[1], 0.05),
    material: new THREE.MeshBasicMaterial( { color: 0xff0000 } ),
}));

This is an example of the bug, you can notice that there are a couple of black arrows on top of the robot model, I did not add those arrows, I added only the red ones, it can also be noticed that even one of the red arrows is missing a part.