How to make a zoom animation on an image by a mouse click

[elkyu]

Hi,

 

I have a mesh with a hole, through this hole, there is an image.

Like that : http://www.babylonjs-playground.com/#272WDW#7

 

 

What I would like to do is that when I click on this image through the hole, there is a zoom effet, like if we come in the mesh from the hole.

 

I know that the hole, is not really one, so for the click, I verify with a pickinginfo that the clicked face, has its normal inversed.

 

Like that : 

scene.onPointerDown = function(evt, pickResult){                                if(pickResult.hit){                   var  faceId = pickResult.faceId;                    var position0 = BABYLON.Vector3.FromArray(positions, indices[faceId * 3] * 3);                    var position1 = BABYLON.Vector3.FromArray(positions, indices[faceId * 3 + 1] * 3);                    var position2 = BABYLON.Vector3.FromArray(positions, indices[faceId * 3 + 2] * 3);                    var p0p1 = position0.subtract(position1);                    var p2p1 = position2.subtract(position1);                    var normal = BABYLON.Vector3.Normalize(BABYLON.Vector3.Cross(p0p1, p2p1));                    var faceNormal = normal.asArray();                    if(faceNormal[1]<0){                        //This is a hole, the click is allowed                        //Zoom animation                                           }else{                        //unauthorized click.                    }                }            };

Any idea ? 

 

 

 

EDIT: It seems that this code doesn't work on the example . If someone can fix it, I have already done that with a plane, not with a ground, I think it's not different but .. 

[GameMonetize]

Here is it :

http://www.babylonjs-playground.com/#272WDW#9

 

Simpler than expected, right

​

For the record:

if(pickResult.hit){	        if(pickResult.getNormal().y<0){	            //This is a hole, the click is allowed								var animationBox = new BABYLON.Animation("tutoAnimation", "fov", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,				  BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);				    var keys = [];			    keys.push({			        frame: 0,			        value: scene.activeCamera.fov			    });						    keys.push({			        frame: 100,			        value: 0.1			    });				    			    animationBox.setKeys(keys);			    scene.activeCamera.animations.push(animationBox);						    scene.beginAnimation(scene.activeCamera, 0, 100, false);                       	        }else{	            //unauthorized click.	        }		    }

​

[elkyu]

Hi ! Thanks !

 

Very simple in reality

 

At the end of the zoom, when we have the image in fullscreen, is it possible to load a new page html ? with something like a "loading bar" ?

[iiceman]

Not sure how you imagine the loading bar. A simple redirect after the animation is complete could look like this:

scene.beginAnimation(scene.activeCamera, 0, 100, false, 1, function () {    window.location = "http://www.test.de";});

But then the loading bar would need the be displayed on the new page, I think. If you want to stay on the page and just hide your scene and load like a new template in your current html (then you could create a loading icon or something) you would have to use ajax to get your data or already have that data ready in the current html somewhere. Sooo... depends on how exactly. But it's all possible

[elkyu]

Little problem, the zoom works because the image is in the middle. But if I move the image like that : http://www.babylonjs-playground.com/#272WDW#10

 

The zoom still in the middle .. not on the image

[iiceman]

http://www.babylonjs-playground.com/#272WDW#11

[elkyu]

Thanks !

 I think i will modify the target value (frame 100) and set the middle of my hole

[elkyu]

How to transform the mouse cursor into a "hand cursor" at the hovering of a hole ?

 

I know we can do that for an entire mesh with that :

 ground.actionManager = new BABYLON.ActionManager(scene);            ground.actionManager.registerAction(                    new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function () {} )  );

(Code from this playground : http://www.babylonjs-playground.com/#EETGB#4 )

Can we attach to the mouse (without click) a function to calculate the normal of a face at  hovering of this face, and in the case where we are above a hole, we put this code ?

[elkyu]

Any idea ? I think I just have to attach a picking info at the mouseover , but how ? 

[iiceman]

Maybe something like this:

scene.registerBeforeRender(function () {      // check if the pickresult is on the flipped face and then directly manipulate the css attributes for the canvas to make the pointer a cursor?  var pickResult = scene.pick(scene.pointerX, scene.pointerY);  if (pickResult.getNormal() && pickResult.getNormal().y < 0) {    $('canvas').css('cursor', 'pointer');  }});

Seems to have some issues but it's close to what you want I think: http://www.babylonjs-playground.com/#272WDW#12

[elkyu]

Weird, it's working in the playground, but not in my code the cursor is not modify and the wave animation is totally stopped. Even if I download the playground files I have the same problem

[iiceman]

Hmm, sounds like there is a javascript error? Nothing in the console?

[elkyu]

No, nothing in the console ..

If you download the playground files, it's working ?

[iiceman]

Okay, I tried and it works. I was confused because I forgot that I had to add the scene.render() in the renderLoop while creating the scene:

engine.runRenderLoop(function () {    scene.render();});

You don't get an error if you forget, so maybe you missed that one, too?

[elkyu]

I have already have this one in my code and it doesn't work

 

EDIT : Sorry.I hadn't realized that you were using the jQuery (I have no big experience in javacript / jquery )   It's working

[elkyu]

Other problem ! yes ... 

 

I wish that when clicked , zoom is at the center of the hole.

I have several hole so I can't get  all the faces of the hole and calculated the middle.

I'm stuck , any ideas ? how I could do that ?

[iiceman]

Hm, what about simply keeping track of the faces taht belong to a hole when you create them? So when you poke a hole you save the ids of the faces that you flip for that hole. It's just an idea but should work. Not sure how to calculate the middle of a hole, though.

[elkyu]

Hi,

After thought, I would like to provide a modification on the zoom effect to have a better result.

What I would like is that we have the feeling to "go inside" the hole, I don't want a zoom on the image. I would like that at the end of the zoom, the image be in full screen.

Then when the image is in full screen, I will need an html page to reduce the image and put a description (I know how to do that).

I thinking of 2 solutions but I don't know how to do for the both :

Solution 1 : Remove the images from the scene to put it behind the canvas with HTML. The problem is that to put the images I have to calculate the hole center, but I don't know how to transfer this coordinate on the html page to place the image.

Solution 2 : Keep the images in the canvas, and at the zoom end, "switched" on the html when the image is in full screen.

In both cases, I think that a kind of parallax effect will be necessary to zoom in the hole, while extending the image to put it in full screen.
 

[elkyu]

anyone ?

Maybe should I create a new topic ?

[iiceman]

Sorry, at least I don't have an idea at the moment how to make that look cool and achieve what you want. Maybe that's really a question for a new topic.