Jump to content

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


Recommended Posts

I have a mesh with a hole, through this hole, there is an image.
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 .. 

Link to comment
Share on other sites

Here is it :



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.	        }		    }

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites


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.

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...