First two THREE.js objects added to scene change shape after camera movement

[Sevilaa]

Description When I try to add multiple THREE.js objects to the scene, it first looks fine, but as soon as I move the camera, the first two objects take the shape of arrow components (see image). Currently my only solution is to remove them and add new objects.

• Library Version: 1.1.0
• ROS Version: noetic
• Platform / OS: ubuntu

Steps To Reproduce

this.viewer = new ROS3D.Viewer({
    divID: 'viewer3d',
    width: this.read_width,
    height: this.read_height,
    antialias: true
});

for (var i = 1; i <= 6; i++) {
    const geometry = new THREE.BoxGeometry(0.1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x008800 });
    const cube = new THREE.Mesh(geometry, material);
    this.viewer.addObject(cube, true);
    cube.position.x = i;
}

Expected Behavior Objects don't change shape after camera movement. The above code should work as in #149

Actual Behavior The first two object change shape to arrow components. This behavior is also described in #291.

[MatthijsBurgh]

@Sevilaa I will drop your code in a simple example and run it later today.

[MatthijsBurgh]

@Sevilaa I was able to reproduce the issue. I think the issue is in the viewer/scene. I think the arrow shapes come from the axis frame. I need some time to debug the issue. It could be fast, it could be complex. When you have time, you can take a look in the source code of the viewer/scene.

[MatthijsBurgh]

I just had a quick look. I think the problem might be in Three itself or in the combination of Viewer, OrbitsControls, Axis. But the viewer itself looks fine.

[MatthijsBurgh]

I think the problem lies within Three. As I don't see an issue in the OrbitControls and Axes.

@Sevilaa could you take a look at the code?

[Sevilaa]

Thank you for the quick response. I will have a look at the code. Currently I get around the bug by simply removing the first two objects from the scene.

[MatthijsBurgh]

I am in the process of migrating to newer Three version. I am not sure from what version exactly this problem was solved, as I didn't run the test with each release. but definitely from r110, this was fixed.

[myli-xdu]

I suggest that you can perform self-defined three.js operations in compiled ros3d.js. For your issue, In ros3d.esm.js, add the following code

var drawshape = function(viewer){
    for (var i = 1; i <= 6; i++) {
    const geometry = new THREE.BoxGeometry(0.1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x008800 });
    const cube = new THREE.Mesh(geometry, material);
    viewer.addObject(cube, true);
    cube.position.x = i;
    }
};

and then add drawshape in export{} at the end of the file.

In your main js,

this.viewer = new ROS3D.Viewer({
    divID: 'viewer3d',
    width: this.read_width,
    height: this.read_height,
    antialias: true
});

ROS3D.drawshape(this.viewer)

This problem may be caused by loading multiple three.js and I don't know if there is a better solution.

[MatthijsBurgh]

@myli-xdu as I mentioned. The issue was in Three library.

Adding code to compiled code is NEVER a good idea.

[MatthijsBurgh]

@myli-xdu As your suggestion is very very very wrong. And it will not fix the issues at all. I am deleting it, to prevent other people from doing it.