rotation Freecamera on pivot

[Dad72]

Hi,

I would like to be able to rotate a FreeCamera around a model select on my scene.
I do not want to use ArcRotateCamera. I want to keep the camera position after rotation. The action of pivot is when I click on 'Alt' and when i released 'Alt' the freecamera returns to the normal while retaining its position.

 

Here's the start of what I have written to manage the 'Alt' key on the keyboard.

function onKeyDown(event) {    switch (event.keyCode) {               case 18:            // Pivoter autour d'un objet sélectionner                    break;    }    return false;}function onKeyUp(event) {    switch (event.keyCode) {               case 18:            // revenir a la normale                    break;    }    return false;}

Can you help me. Thank you in advance.

[gwenael]

I suggest you to use a cache and to temporarely parent the camera to your model, to set camera.position, and camera.rotation to BABYLON.Vector3.Zero() (camera.scaling to (1,1,1)) and use a pivot matrix to position, rotate and scale your camera. Thus, the pivot of your camera is the center of your model. Once you release 'Alt', you unparent the camera and use the cache to reset the camera transform.

 

Just a thought. Let me know if it works.

 

Something to help you: http://www.html5gamedevs.com/topic/3083-spaces-world-parent-pivot-local/?p=19938

[Dad72]

Thank You Gwenael.

I am not on to have everything included on the use of a matrix of rotation to position and rotate the camera. Have you a basic example of code to help me. In thanking you.

[gwenael]

http://jsfiddle.net/gwenaelhagenmuller/FkxJ3/

 

Is it what you want?

 

Click (several times if you want) on the first button to rotate the camera on itself, then click on the second button to simulate your 'Alt is pressed' and click again on the first button (several times if you want). You should see the difference Finally click on the last button to simulate your 'Alt is released'.

[Dad72]

No, it is not that. Your example, rotates the object axis Y and not the camera. and your example uses a ArcRotateCamera. Me i would like to use a FreeCamera that this moves freely when alt is not press and which rotates around a selected object when one presses on alt.

 

Thank you for your help

[gwenael]

Sorry I was not enough clear. I used an ArcRotateCamera to see what happens with 'customCamera' (this mesh is to simulate your camera. I can display it whereas you can't display a camera; so in my example if I use a camera you won't understand if the model is rotating or if the camera is rotating). You can notice that 'customCamera' is rotating around 'model' (along Z, not Y like you wrote it)

 

Replace 'customCamera' by your camera and set it as the activeCamera and you'll get what you want. My jsfiddle is only the idea how to get what you want. Good luck for the rest

[gwenael]

Must be clearer with this http://jsfiddle.net/gwenaelhagenmuller/FkxJ3/10/

 

Now customCamera is a FreeCamera that you can set as activeCamera by clicking on the last button.

 

Note that I use customCameraParent only to draw the axis of customCamera.

[gwenael]

I noticed there is BABYLON.FreeCamera.prototype.setTarget

It's not what you want but maybe actually it's what you are looking for

[Dad72]

Your script does not work properly. To me, the object rotates on the axis Y and not Z. In addition I have several error. Context is unefined (i put context2D replace). I,'ve adding my camera, I get mesh._localScaling is undefined, customcamera. Scaling is undefined, customcamera. SetPivotMatrix is not a function ...

 

I do not understand context2D also. I am sorry if I seem negative, but I must say that your 300 lines of code gives me evil has the heads for just a camera rotation.

Have you a simpler example with less than code?

 

[edite] I had not seen your 2 others previous answer. I am going to look.

 

Thanks

[Dad72]

Here is what I would like to make. A function RotateAround(target, axis); but it does not exist in Babylon.

cameraFree[0].RotateAround(mesh.position, BABYLON.Vector3.up));

[gwenael]

X: red, Y: green, Z: blue

 

I made a new jsfiddle with comments: http://jsfiddle.net/gwenaelhagenmuller/FkxJ3/11/

 

There are several of lines only to show axis. You don't need them, it's only because it's easier to understand what happens when axis are drawn.

[gwenael]

From the beginning, I suppose that you want to look at the mesh while rotating but maybe you only want to rotate around the mesh without looking at it. Do you want to look at it?

[Dad72]

The object rotates from top to bottom and not from right to left. I turned around the object by passing through the top and bottom.

[gwenael]

http://jsfiddle.net/gwenaelhagenmuller/FkxJ3/13/

 

It's without the debugging code.

 

I still have to use a dumb parent for customCamera. It would be easier if there were Transform nodes such suggested here http://www.html5gamedevs.com/topic/2796-discussion-about-nodes-meshes-instances/?p=18165. The dumb parent here simulates this kind of Transform node.

[Dad72]

Yes I would like to turn around the object as the fact arcRotateCamera but with one FreeCamera. But can be that it would be simpler to change of camera when I click on Alt and to come back has FreeCamera when I unloose Alt. But I am not on to know how to keep the positions xyz between every change of camera.

[Dad72]

I have done that which operates almost correctly, but the positions are not yet accurate. That is what i done wrong?

function onKeyDown(event) {    switch (event.keyCode) {               case 18: // ALT            // Pivoter autour d'un objet avec la ArcRotateCamera            if(_mesh && objetSelected && CameraChanged == false) {                                scene.activeCamera.detachControl(canvas);                scene.activeCamera = cameraFree[1];                scene.activeCamera.attachControl(canvas);                cameraFree[1].attachControl(canvas);                                    cameraFree[1].target.x = _mesh.position.x;                cameraFree[1].target.y = _mesh.position.y + cameraFree[0].position.y - 3;                cameraFree[1].target.z = _mesh.position.z - 3;                cameraFree[1].radius = cameraFree[0].position.z - _mesh.position.z;                                    CameraChanged = true;            }        break;    }    return false;}function onKeyUp(event) {    switch (event.keyCode) {                case 18: // ALT            // revenir a la normale avec la freeCamera                        if(_mesh && objetSelected == null && CameraChanged) {                scene.activeCamera.detachControl(canvas);                scene.activeCamera = cameraFree[0];                scene.activeCamera.attachControl(canvas);                cameraFree[0].attachControl(canvas);                                cameraFree[0].position.x = cameraFree[1].position.x;                cameraFree[0].position.y = cameraFree[1].position.y;                cameraFree[0].position.z = cameraFree[1].position.z;                cameraFree[0].setTarget(_mesh.position);                CameraChanged = false;            }                                  break;    }    return false;}

[Dad72]

I think that is the calculated the Radius, which is not good. What do you think?

cameraFree[1].radius = cameraFree[0].position.z - _mesh.position.z; // ????

[Dad72]

I finally find a solution for the radius, and I adjust the rest of the errors:

 

I have put a radius of 20 by default when you click on ALT and with the mouse wheel you can zoom unzoom by increasing or decreasing the radius. And I also add 5 by report has the position of the selected object to be at below.

It works correctly for me. Here's the full code:

function zoomIntOut(event){        if(cameraFree[1]) {        if(event.delta > 0) {            cameraFree[1].radius += 2;        }        else if(event.delta < 0) {                 cameraFree[1].radius -= 2;        }            }}function onKeyDown(event) {    switch (event.keyCode) {               case 18: // ALT            // Pivoter autour d'un objet avec la freeCamera                        if(_mesh && objetSelected && CameraChanged == false) {                               scene.activeCamera.detachControl(canvas); // Detach FreeCamera                scene.activeCamera = cameraFree[1]; // active Camera ArcRotate                scene.activeCamera.attachControl(canvas); // attache camera ArcRotate                                                    cameraFree[1].target.x = _mesh.position.x;                cameraFree[1].target.y = _mesh.position.y + 5;                cameraFree[1].target.z = _mesh.position.z;                cameraFree[1].radius = 20;                                    CameraChanged = true;            }                    break;    }    return false;}function onKeyUp(event) {    switch (event.keyCode) {                case 18: // ALT            // revenir a la normale avec la freeCamera            if(_mesh && objetSelected == null && CameraChanged) {                scene.activeCamera.detachControl(canvas); // detach ArcRotateCamera                scene.activeCamera = cameraFree[0]; // Active FreeCamera                scene.activeCamera.attachControl(canvas); // Attache FreeCamera                                                 cameraFree[0].position.x = cameraFree[1].position.x;                cameraFree[0].position.y = cameraFree[1].position.y;                cameraFree[0].position.z = cameraFree[1].position.z;                cameraFree[0].setTarget(_mesh.position);                CameraChanged = false;            }        break;    }    return false;}$(document).ready(function(){        $(this).wheel(function(e) {        e.preventDefault();                    zoomIntOut(e);    });});

[gwenael]

I guess it's what you wanted but for me you shouldn't hardcode 5 and 20. Where are they come from? They should be computed from the boundingInfo for example.

 

Be careful, you attachControl twice on the same camera:

scene.activeCamera.attachControl(canvas); // attache camera ArcRotatecameraFree[1].attachControl(canvas);

since scene.activeCamera equals cameraFree[1]

 

Same thing here:

scene.activeCamera.attachControl(canvas); // Attache FreeCameracameraFree[0].attachControl(canvas);

Pay attention also that it won't work if your cameras don't have the same parent or if your model has a parent.

[Dad72]

Thank you for its precision Gwenaël. I am going to solve.
For the 5 and 20 they are here:

cameraFree[1].target.y = _mesh.position.y + 5;cameraFree[1].radius = 20;

[gwenael]

You shouldn't hardcode them. They are empirical values for your tests. They must be computed. That's something discussed here : http://www.html5gamedevs.com/topic/2912-invalid-mesh-pick/

 

(Tu ne devrais pas les hardcoder. Ce sont des valeurs empiriques pour tes tests. Ces valeurs doivent provenir d'un calcul. Ca aussi été discuté ici : http://www.html5gamedevs.com/topic/2912-invalid-mesh-pick/)

[Dad72]

You may want to say that according to the size of the model, the default value of 50 may be wrong. I might get into the object and not on the outside.
What would you suggest as calculate to have always 50 of radius of the object about his dimensions?
 

En plus claire.

(Vous voulez peut être dire que suivant la taille du modèle, la valeur par défaut de 50 peut être fausse. je pourrais me retrouver dans l'objet et non à l’extérieur.(je vient d'y pensez garce a vous) Que me suggéreriez vous comme calcule de façons à toujours être à 50 de rayon de l'objet quelque soit ses dimensions?)

[gwenael]

That will be maths. You need to frame the object. For this, you need to determine the radius of the bounding sphere for example and use this value to compute a ratio (value / radius of the bounding sphere of your test mesh) that you multiply by 50. Thus, it will be proportional.

[Dad72]

J'ai fait ça :

var modele = _mesh.getBoundingInfo();var valeurSphereRadius = modele.boundingSphere.radius;cameraFree[1].radius =  valeurSphereRadius + 20;

Je récupère le rayon de la sphère englobante  et je lui ajoute 20 pour avoir le radius entre la camera et l'objet sélectionner.

 

J'ai aussi fait avec une boite en récupérant la valeur la plus grande entre x et z et j'ajoute les 20 a la plus grande valeur. (ça me parait mieux avec une boite)

var modele = _mesh.getBoundingInfo();var valeurBoiteMax;if(modele.boundingBox.maximum.x > modele.boundingSphere.maximum.z) valeurBoiteMax = modele.boundingBox.maximum.x;else if(modele.boundingSphere.maximum.z > modele.boundingBox.maximum.x) valeurBoiteMax = modele.boundingBox.maximum.z;   cameraFree[1].radius =  valeurBoiteMax + 20;

Cela vous parait bien ou il y a une autre solution.