ROS3D.MouseHandler code example ?

[Ghofrane101]

Hello Guys ,

I am trying to use ros3d.MouseHandler to get mouse click position in my map in a 3d viewer. is there a code example i can refer to ?

Thank you !!

[Huyhust13]

@Ghofrane101 do you have any update or answer for this question?

[leocorp96]

Just in case anyone is still wondering how to do this. Here is my implementation of "HOW TO GET THE MOUSE/TOUCH UP events"

It involves modifying the ros3d.js code a bit and passing callback functions to be called when the event is triggered

Step 1: After this.lineTypePanAndZoomFrame = options.dashedPanAndZoomFrame || 'full'; in the OrbitControls class constructor, add:

this.cmouseUpCB = options.mouseUpCB;

this.ctouchUpCB = options.touchUpCB;

Step 2: Now in the onMouseUp() function, you can call the corresponding callback after the state = STATE.NONE;

this.cmouseUpCB(event3D.domEvent);

Step 3: Repeat the same for touch events in the onTouchEnd() function. Add this as the last line;

this.ctouchUpCB(event);

Step 4: Now modify the Viewer constructor to look like this:

constructor(options) {
	    options = options || {};
	    var divID = options.divID;
	    var elem = options.elem;
	    var width = options.width;
	    var height = options.height;
	    var background = options.background || '#111111';
	    var antialias = options.antialias;
	    var intensity = options.intensity || 0.66;
	    var near = options.near || 0.01;
	    var far = options.far || 1000;
	    var alpha = options.alpha || 1.0;
	    var cameraPosition = options.cameraPose || {
	      x : 3,
	      y : 3,
	      z : 3
	    };
	    var cameraZoomSpeed = options.cameraZoomSpeed || 0.5;
	    var displayPanAndZoomFrame = (options.displayPanAndZoomFrame === undefined) ? true : !!options.displayPanAndZoomFrame;
	    var lineTypePanAndZoomFrame = options.lineTypePanAndZoomFrame || 'full';
		var mouseUpCB = options.mouseUpCB || function(e){};
		var touchUpCB = options.touchUpCB || function(e){};

Note the mouseUpCB and touchUpCB variables.

Step 5: Also modify the cameraControls instance to look like this:

this.cameraControls = new OrbitControls({
	      scene : this.scene,
	      camera : this.camera,
	      displayPanAndZoomFrame : displayPanAndZoomFrame,
	      lineTypePanAndZoomFrame: lineTypePanAndZoomFrame,
		  mouseUpCB: mouseUpCB,
		  touchUpCB: touchUpCB
	    });

Making sure to pass the callbacks to the OrbitControls class.

Step 6: Now create your viewer using a similar structure to this:

viewer = new ROS3D.Viewer({
                    divID: 'idviewerROSDiv',
                    width : 213,
                    height : 120,
                    antialias : true,
                    background : '#242424',
                    mouseUpCB : this.customMouseUpEventUsageCB,
                    touchUpCB : this.customTouchUpEventUsageCB
                });

NB: My custom functions have the following structure: function_name(event){}

That should do it. You can modify it to receive other types of events as well. If anyone figures out a much cleaner way to do this, please update this post!!