Tyrahell

ArcRotateCamera and right click translation

Recommended Posts

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 :)

Share this post


Link to post
Share on other sites

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) {		}}	

Share this post


Link to post
Share on other sites

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 :D

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

You must set the angularSensibility stronger for lighter acceleration.

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

Share this post


Link to post
Share on other sites

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 B)

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

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 :huh:

Share this post


Link to post
Share on other sites

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 :wacko:

Share this post


Link to post
Share on other sites

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: :rolleyes: :rolleyes:

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.