Zoom in to a particular mesh with FreeCamera

[neelepl87]

Hello,

 

I have multiple hexagon in the screen. My requirement is when user clicks on a particular hexagon, it needs to be zoomed in, favorably

 

that particular hexagon occupying the total canvas. I can get the hexagon clicked on, get it's id, but unable to zoom it in. 

 

I am using FreeCamera. Can anyone please help.

 

Thanks much in advance.

 

Neel.

[RaananW]

Hi Neel and welcome to the forum!

 

A FreeCamera has a setTarget() function that accepts a Vector3, which can be the picked mesh position. a very simple demo would be this : 

http://www.babylonjs-playground.com/#2HJZBR

try clicking on both meshes, you will see how it works.

This will not zoom in, but will focus on this mesh. 

Zooming in can be done this way - http://www.babylonjs-playground.com/#2HJZBR#1

 

Hope it helps :-)

[neelepl87]

Hi Rannan,

 

Thanks for your reply. Your code for zooming works like a charm in the example you have shown. Somehow I can not get it worked for my code. 

 

Right now I have created two hexagon with all their vertices manually defined. In your example you have set the position of the sphere as: sphere.position.y = 1;

 

I am not sure what will be the position of the hexagons in my case. I tried to set the position as the center point of the hexagon. My hexagons are

 

all flat. But then also it is not working as it is working in your case.

 

Any idea what to set as position in case of a 2D hexagon, so the camera points to it perfectly?

 

I am practically new to Babylon js, so struggling.

 

Thanks,

Neel.

[iiceman]

Hi Neel,

 

maybe you can do a playground version of your problem so we can see whats going on and try to make it work for you. Your hexagons still have a position so RaananWs code should still work since it reads the position directly from your mesh.

[neelepl87]

Yeah, I should have done that earlier.

 

I have tried this: http://www.babylonjs-playground.com/#1XBFPL.

 

When I click on individual hexagon, it is behaving strangely, as I am sure have done some mad coding here.

 

Kindly help me understand what I am doing wrong.

 

Thanks,

Neel.

 

 

 

[iiceman]

Okay, I gave it a try. Check this out and let me know if that's basically what you want: http://www.babylonjs-playground.com/#1XBFPL#1

 

I changed the way of zooming in on a certain polygon. Instead of calculating a direction vector I would suggest simply placing the camera above that polygon. You can use the boundingBoxInfo to find the center of it. I added some comments in the code and did some formatting, but didn't change too much I think.. You really did some fancy coding there

 

I am not sure what you want to achieve in the end. Some kind of hex based game with a really big board? You seem very concerned about being ... well... efficient. There might be easier ways to create a hex grid (you can make nice hexagons with the createClyinder method I think). But yeah, if you only need a 2D hexagon creating it from scratch might be a good solution. Something else I noticed: you set the vertices potion for each hexagon by defining those chunks. Wouldn't it be easier to handle if you just create a polygon and then clone it to place it somewhere according to you grid instead of having to define the vertices positions for every chunk?

 

As I said, I don't know what you want to achieve in the end. But I like those hexagon stuff and I have something like that, too, that I want to play around with (someday) when I have time. So I am just curious and would love to hear a bit more about your project and your ideas

 

Well I talk/write too much anyways, let me know if it helped or if it's not what you need yet.

[jerome]

Just use CreateDisc with tessellation = 6 to create a 2D hexagon

[iiceman]

Oh, there is a CreateDisc, cool! Still feel like I don't know half of all those function after playing with it for almost a year now O_o

[neelepl87]

Okay, I gave it a try. Check this out and let me know if that's basically what you want: http://www.babylonjs-playground.com/#1XBFPL#1

 

I changed the way of zooming in on a certain polygon. Instead of calculating a direction vector I would suggest simply placing the camera above that polygon. You can use the boundingBoxInfo to find the center of it. I added some comments in the code and did some formatting, but didn't change too much I think.. You really did some fancy coding there

 

I am not sure what you want to achieve in the end. Some kind of hex based game with a really big board? You seem very concerned about being ... well... efficient. There might be easier ways to create a hex grid (you can make nice hexagons with the createClyinder method I think). But yeah, if you only need a 2D hexagon creating it from scratch might be a good solution. Something else I noticed: you set the vertices potion for each hexagon by defining those chunks. Wouldn't it be easier to handle if you just create a polygon and then clone it to place it somewhere according to you grid instead of having to define the vertices positions for every chunk?

 

As I said, I don't know what you want to achieve in the end. But I like those hexagon stuff and I have something like that, too, that I want to play around with (someday) when I have time. So I am just curious and would love to hear a bit more about your project and your ideas

 

Well I talk/write too much anyways, let me know if it helped or if it's not what you need yet.

Hello iiceman,

 

It worked perfectly. I was trying to use babylon 2.2.js statically from my html, so it was giving some strange effect with your code, now it is working absolutely fine. Is it anyway possible to tell which version is used when I write '<script src="http://www.babylonjs.com/babylon.js"></script>' ?

 

Coming to what I am working on, I will try to tell a long story shortly. Basically we are trying to make a 3-D simulation of car driving through some different terrains. But (unfortunately) we are not doing this using any standard language, rather a new lesser known scripting language based on javascript only ( in other words, reinventing many wheels) . We also need a simplified version ( call it Tester Interface) of the whole 3-D scene to facilitate random scene modification. Fortunately that part we are doing in babylon js. We have divided our actual terrains into multiple hexagons ( with some irregularity), and the hexagon vertices will come to this Tester Interface as an input. That is why I created the hexagons with manually defined points.

 

The desire is endless and passions are high, so we are not enough sure where we will put the boundary

 

Thanks much for your help. 

Neel.

[iiceman]

Wow, that definitely sounds like a lot of work. Glad I could help. About the babylon version: I don't think so. But I always download the version I want and name it myself. If you use bower you can download and update babylon js easily, too.

 

Good luck with your project and don't forget to show us if you made somethink cool!

 

 

By the way: If you question is answered feel free to mark the thread as answered, too