ArcRotateCamera and right click translation

[Tyrahell]

Hi everyone,

 

Back from holydays and already got a question for you.

 

I try to add translation to a scene with an ArcRotateCamera by pressing the right mouse like in classic CAD software :

- left click + mousemove rotate object

- right click + mousemove translate object

- mousewheel for zoom

 

Maybe ArcRotateCamera isnt the right camera to start off ?

 

Any suggestion or code snippet to help a fellow babylon dev ?

 

Regards Tyrahell

[eucly2]

I'm very interested in it too

[Dad72]

detect right click. May be that it'll be useful :

canvas.addEventListener("mousedown", clickRight, false);function clickRight(e){		e.preventDefault();	var rightclick;	if (!e) var e = window.event;	if (e.which) rightclick = (e.which == 3);	else if (e.button) rightclick = (e.button == 2);		if(rightclick === true) {							} else if(rightclick === false) {		}}	

[Tyrahell]

Hi dad,

 

Thanks for the tips. I have use window.addEventListener() with mousemove, mouseup and mousedown and now i can tell when i mousemove if my right click is up or down but on the "mouseup" event i still get the classic browser menu, is there a way to disable it ?

 

I have work around your event.preventDefault(); on the "mouseup" and "mousedown" event in vain...

 

Furthermore, i try to disable the ArcRotateCamera rotation on "mousemove" + right click down by nullifying alpha and beta with this combinaison.

 

Any information about that ?

 

Tyrahell

[Tyrahell]

Solution to disable the contextmenu :

window.addEventListener("contextmenu", function (evt){	evt.preventDefault();});	

Now i need to disable the ArcRotateCamera rotation and change it to translation

 

Tyra

[Dad72]

or

canvas.oncontextmenu = function () { return false; }; 

to disable the rotation can be this:

// Limite inférieurcam.lowerAlphaLimit = 0;cam.lowerBetaLimit = 0;// Limite superviseurcam.upperAlphaLimit = 0;cam.upperBetaLimit = 0;

It's just the idea, I never test it.

 

more info here:
http://doc.babylonjs.com/page.php?p=24622

[eucly2]

I think we need a new type of camera for translation and with it we can switch to another camera typed of translation when rightmousedown event fired...

[Tyrahell]

Here is my code sample, the aim is to maintain alpha and beta constant when "mousemove" + rightclick. It does the tricks but when my mouse is idling i got a kind of residual rotation due to mouse accelleration. Did someone know how to disable this mouse acceleration effect with the camera ?

 

Code :

                var rightclickdown = 0;		var alpha_save;		var beta_save;		var angularsensibility_save;				// onContextMenu		window.addEventListener("contextmenu", function (evt)		{			evt.preventDefault();		});					// onMouseMove		window.addEventListener("mousemove", function (evt) 		{				if( rightclickdown == 1 )			{				myScene.activeCamera.alpha = alpha_save;				myScene.activeCamera.beta  = beta_save;				myScene.activeCamera.angularSensibility = angularsensibility_save;			}			else			{				console.log("rightclickdown = 0");			}		});				// onMouseUp		window.addEventListener("mouseup", function (evt) 		{				if( rightclickdown == 1 )			{				rightclickdown = 0;			}		});				// onMouseDown		window.addEventListener("mousedown", function (evt) 		{				evt.preventDefault();						if( evt.button == 2 )			{				rightclickdown = 1;								alpha_save = myScene.activeCamera.alpha;				beta_save  = myScene.activeCamera.beta;				angularsensibility_save = myScene.activeCamera.angularSensibility;                        }		});

Tyrahell

[Dad72]

You must set the angularSensibility stronger for lighter acceleration.

myScene.activeCamera.angularSensibility = 1000;angularsensibility_save = myScene.activeCamera.angularSensibility;

[Tyrahell]

Yes, im toying with camera.inertia = 0; but i need to modify my angularSensibility, both values seems to be linked :

 

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Cameras/babylon.camera.js

 

Tyrahell

[Tyrahell]

The default values are 1500 for angular sensibility and 0.9 for camera inertia. Ive succedd to neutralise the rotation inertia on the right click by using 10000 for angularsensibility and 0 for inertia. Now, i must code the model translation in relation with mouse coordinate.

 

Here the code with inertia control :

        var rightclickdown = 0;        var alpha_save;        var beta_save;        var angularsensibility_save;                // onContextMenu        window.addEventListener("contextmenu", function (evt)        {            evt.preventDefault();        });                    // onMouseMove        window.addEventListener("mousemove", function (evt)        {                //console.log("clientX = "+evt.clientX+" clientY = "+evt.clientY);            if( rightclickdown == 1 )            {                            myScene.activeCamera.alpha = alpha_save;                myScene.activeCamera.beta  = beta_save;                myScene.activeCamera.angularSensibility = angularsensibility_save;                                console.log(myScene.activeCamera.alpha+" "+myScene.activeCamera.beta+" "+myScene.activeCamera.angularSensibility);                        }            else            {                console.log("rightclickdown = 0");            }        });                // onMouseUp        window.addEventListener("mouseup", function (evt)        {                    if( rightclickdown == 1 )                {                    myScene.activeCamera.angularSensibility = 1500;                    myScene.activeCamera.inertia = 0.9;                    rightclickdown = 0;                }        });                // onMouseDown        window.addEventListener("mousedown", function (evt)        {                evt.preventDefault();                        if( evt.button == 2 )            {                rightclickdown = 1;                                myScene.activeCamera.angularSensibility = 1000000;                myScene.activeCamera.inertia = 0;                            alpha_save = myScene.activeCamera.alpha;                beta_save  = myScene.activeCamera.beta;                angularsensibility_save = myScene.activeCamera.angularSensibility;            }        });

If someone got a function to convert event.clientX and Y coordinate to model translation, it will made my day !

 

Edit : translation in world coordinate : myScene.meshes[0].translate(BABYLON.Axis.Y, 0.1, BABYLON.Space.WORLD);

 

Tyrahell

[Tyrahell]

Ok here is the problem : with the usage of myScene.meshes[0].translate(BABYLON.Axis.Y, 0.1, BABYLON.Space.WORLD); i can translate my mesh in WORLD coordinate but im looking for a way to translate my mesh in screen coordinate. Did anyone of you know how to do that ?

 

Is there a way to compute a translation in screen coordinate into world coordinate ?

 

Regards Tyrahell

[Tyrahell]

Ok here is the problem : with the usage of myScene.meshes[0].translate(BABYLON.Axis.Y, 0.1, BABYLON.Space.WORLD); i can translate my mesh in WORLD coordinate but im looking for a way to translate my mesh in screen coordinate. Did anyone of you know how to do that ?

 

Is there a way to compute a translation in screen coordinate into world coordinate ?

 

Regards Tyrahell

 

Up, im still in trouble with this one, any tought ?

 

++Tyra

[Tyrahell]

After some diggin i have found this baby : Vector3.Unproject

 

"Projects a 3D vector from screen space into object space."

 

So i have implement this code to convert a 1,0,0 screen coordinate vector to a world vector to translate my mesh :

				var vM = myScene.activeCamera.getViewMatrix();				var pM = myScene.activeCamera.getProjectionMatrix();				var wM = myScene.activeCamera.getWorldMatrix();				var globalView = myScene.activeCamera.viewport.toGlobal(engine);				var ViewportWidth = globalView.width;				var ViewportHeight = globalView.height;									var screenVector = new BABYLON.Vector3(1,0,0);								var worldVector = BABYLON.Vector3.Unproject(screenVector, ViewportWidth, ViewportHeight, wM, vM, pM );								console.log("X= "+ worldVector.x + " " + worldVector.y +" "+ worldVector.z);								 for ( i = 0; i < myScene.meshes.length; i++ ) 				 {					 myScene.meshes[i].translate(BABYLON.Axis.X, worldVector.x, BABYLON.Space.WORLD);					 myScene.meshes[i].translate(BABYLON.Axis.Y, worldVector.y, BABYLON.Space.WORLD);					 myScene.meshes[i].translate(BABYLON.Axis.Z, worldVector.z, BABYLON.Space.WORLD);				 }

Whatever my screenVector is, Unproject return me the same vector (-0.064; 0.042; 0.1) and obviously, my translation is false...

 

Can someone help me over here ?

 

Regards Tyrahell

[Tyrahell]

Well, well, well,

 

First a huge thanks to DK, Themechon and Dad for their help !

 

Here is the code :

                // onContextMenu - prevent rightclick		window.addEventListener("contextmenu", function (evt)		{			evt.preventDefault();		});					// onMouseMove - translate on right click		window.addEventListener("mousemove", function (evt) 		{				if ( rightclickdown )			{				if( previousMouseX != evt.clientX || previousMouseY != evt.clientY )				{					translateScene( scene, evt.clientX, evt.clientY, previousMouseX, previousMouseY );				}								previousMouseX = evt.clientX;				previousMouseY = evt.clientY;			}		});				// onMouseUp - release translation		window.addEventListener("mouseup", function (evt) 		{				if( rightclickdown == 1 )			{				scene.activeCamera.angularSensibility = 1500;				scene.activeCamera.inertia = 0.9;				rightclickdown = 0;			}		});				// onMouseDown - init translation on right click		window.addEventListener("mousedown", function (evt) 		{				evt.preventDefault();						if( evt.button == 2 ) // Right click			{				// init translation mode				rightclickdown = 1;								previousMouseX = evt.clientX;				previousMouseY = evt.clientY;				// freeze rotate camera				scene.activeCamera.angularSensibility = 1000000;				scene.activeCamera.inertia = 0;			}		});                function translateScene( scene, clientx, clienty, previousClientX, previousClientY  )		{			var pMScene = scene.getProjectionMatrix();			var vMScene = scene.getViewMatrix();			var wMCamera = BABYLON.Matrix.Identity();			var globalView = scene.activeCamera.viewport.toGlobal(engine);			var ViewportWidth = globalView.width;			var ViewportHeight = globalView.height;						var mousesensibility = 1;			var unitX = ( clientx - previousClientX ) * mousesensibility;			var unitY = ( clienty - previousClientY ) * mousesensibility;						var screenVector = new BABYLON.Vector3( 0, 0, 0 );			var screenVector2 = new BABYLON.Vector3( unitX, unitY, 0 );						var worldVector = BABYLON.Vector3.Unproject( screenVector, ViewportWidth, ViewportHeight, wMCamera, vMScene, pMScene );			var worldVector2 = BABYLON.Vector3.Unproject( screenVector2, ViewportWidth, ViewportHeight, wMCamera, vMScene, pMScene );			var res = worldVector2.subtract(worldVector);			res.normalize();						var fluidity = 0.6;						res.x = res.x * fluidity;			res.y = res.y * fluidity;			res.z = res.z * fluidity;							for ( i = 0; i < scene.meshes.length; i++ ) 			{			     scene.meshes[i].locallyTranslate(res);			}		}

Feel free to share,

 

Tyrahell :rolleyes: