juanmajr93 Posted October 28, 2016 Share Posted October 28, 2016 Hi, it is my first post in this forum because I have a question with no answer. I have to draw differents spheres which represent the location of some cities (coordinates UTM). Firstly I have done the conversion to x,y pixels on screen. However after apply the ecuations the sphere doesnt appear, so the question is: which is the reference system that BabylonJS uses? If I define the positon of sphere for example position.x=8, it appear in the limit of screen.What is the meaning of the value 8? Thanks, JuanMa. Quote Link to comment Share on other sites More sharing options...
jerome Posted October 28, 2016 Share Posted October 28, 2016 please have a look at this old topic : then everything depends on the distance between your spheres and the camera Quote Link to comment Share on other sites More sharing options...
juanmajr93 Posted October 31, 2016 Author Share Posted October 31, 2016 ok, but how can I draw this image where each city has a spatial relation with others? I have theirs UTM coordinates and i have to draw this map in canvas using Babylonjs. For me, the real position on screen is very important so if i consider that my canvas is 800*800, this image must be scaled to this size and the cities(black point) should be represented in their good place. Thanks. Quote Link to comment Share on other sites More sharing options...
JohnK Posted October 31, 2016 Share Posted October 31, 2016 Some initial thoughts. The map is not square so scaling to fit 800 x 800 is going to distort the map. Set a ground that has the same proportions of the map. Use the map as a texture for the ground. Knowing the UTM coordinates for the west and east edges of the map and the north and south edges of the map scale the coordinates to fit width and height of map. Knowing origin of ground is at its centre translate scaled coordinates as appropriate. Create spheres and position as wanted using calculated coordinates. Set camera in a good position to view map and spheres. Try out in a playground and if still having difficulties ask again. Forum members are always happy to edit a playground to help. Quote Link to comment Share on other sites More sharing options...
juanmajr93 Posted November 1, 2016 Author Share Posted November 1, 2016 Hi, I have tried to do the steps that you said and i have found the next problems: 1. This image has this size: (764*739 pixels) How can I set a ground with the same proportion if his width and height are units(no pixels). 2. When I converse the UTM coordinates to the screen, I have a random position. Cities that I have to draw in map are: London,England: latitude->-01257;Longitude->51.508 London,Ontario: latitude->-81.233;Longitude->42.983 East London, SA: latitude->27.91162491;Longitude->-33.01529 This is the operation: var X = 5; //This value must be 764 pixels var Y = 3; //This value must be 739 pixels var x1 = X + (("<?php echo $puntos[0]->x;?>" * X) / 180) var y1 = Y - (("<?php echo $puntos[0]->y;?>" * Y) / 180) To sum up, my problem is to translate the UTM coordinates to the correct positon over the ground. Their properties are: //Ground (764*739) var ground = BABYLON.Mesh.CreateGround("ground", 7.5, 7, 1, scene); var material = new BABYLON.StandardMaterial("mapa", scene); material.diffuseTexture = new BABYLON.Texture("textures/mapa.png", scene); material.backFaceCulling = false; ground.material = material; ground.rotation.x = -Math.PI/2; Thanks. JuanMa J.R. Quote Link to comment Share on other sites More sharing options...
JohnK Posted November 1, 2016 Share Posted November 1, 2016 Have you created a playground? If you have can you add a link it makes it a lot easier to help you. Even if the ground is blank we could work with the figures you have included. Well done on what you have done so far. You can make the width of the ground 764 and its height 739 and put the camera further away. Still need UTM coordinates for edges of the map. Quote Link to comment Share on other sites More sharing options...
JohnK Posted November 1, 2016 Share Posted November 1, 2016 Perhaps this will help get you started http://www.babylonjs-playground.com/#SQIFZ#1 Quote Link to comment Share on other sites More sharing options...
juanmajr93 Posted November 2, 2016 Author Share Posted November 2, 2016 Thanks JohnK by your fast answers. This link is the access to my project. http://217.217.131.1:8081/ I can`t create playground because I have a connection with postgres database where I have the UTM coordinates. As you can see, the relation spatial of spheres which represent Ontario(Canada), London(England) and East London(South America) are correct. However, the position are not good because the coordinates are not scaled to the size of ground. I have seen your playground and I dont understand the value of theese variables: var utmTop = 1787; var utmBottom = 309; var utmLeft = 562; var utmRight = 2090; JuanMa J.R Quote Link to comment Share on other sites More sharing options...
JohnK Posted November 2, 2016 Share Posted November 2, 2016 The numbers were just ones I made up utmTop should be the latitude of all the places at the top of the map. utmBottom the latitude of those at the bottom. utmLeft should be the longitude of all the places on the left of the map, utmRight the longitude of all places on the right of the map. Quote Link to comment Share on other sites More sharing options...
juanmajr93 Posted November 7, 2016 Author Share Posted November 7, 2016 Thanks, I got it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.