# Making house floor panaroma image to 3D floor plan converter **URL:** \ **Category:** Questions\ **Created:** [May 6, 2020, 5:18pm UTC](https://forum.babylonjs.com/t/making-house-floor-panaroma-image-to-3d-floor-plan-converter/10611 "2020-05-06T17:18:42Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Atul\_Sharma](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/atul_sharma/32/7124_2.png) [@Atul\_Sharma](https://forum.babylonjs.com/u/Atul_Sharma)\ **Post date:** [May 6, 2020, 5:18pm UTC](https://forum.babylonjs.com/t/making-house-floor-panaroma-image-to-3d-floor-plan-converter/10611/1 "2020-05-06T17:18:42Z")
So i created a sphere with a panaroma texture. this is what i have achieved till now. > **[demo 1 pano to 3d.mp4 (video)](https://drive.google.com/file/d/1W9j93emYNif9zRjniIPkpvDn9EnSoIz9/view?usp=sharing)** > > Google Drive file. I am using custom mesh vertex data(position,uv,indices)doing dynamic calculation. I can create walls using that. For floor and roof I am Struggling as floor can have more then 4 vertices I can calculate position,uv properly not able to figure out how to calculate Indices because that needs some order. WInding order clockwise or anticlock wise. Sharing you a PG [https://www.babylonjs-playground.com/#VKBJN#598](https://www.babylonjs-playground.com/#VKBJN#598) ---
**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\ **Post date:** [May 7, 2020, 4:30pm UTC](https://forum.babylonjs.com/t/making-house-floor-panaroma-image-to-3d-floor-plan-converter/10611/2 "2020-05-07T16:30:25Z")
I’m not exactly sure what you are asking. The PG is a bit hard to follow. Can you maybe be a bit more specific on the issue you are having? ---
**Author:** ![Atul\_Sharma](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/atul_sharma/32/7124_2.png) [@Atul\_Sharma](https://forum.babylonjs.com/u/Atul_Sharma)\ **Post date:** [May 10, 2020, 11:14am UTC](https://forum.babylonjs.com/t/making-house-floor-panaroma-image-to-3d-floor-plan-converter/10611/3 "2020-05-10T11:14:03Z")
hi @bghgary thanks for response. Here is detail explanation. If you need more specific let me know. So I am trying to create a tool where user can create 3d dollhouse from a Panorama image. So I use babylon sphere geometry and panorama texture over it. Then user can click on four corners. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/f7d893fdc027abc638d9fd8a7861c9c93a9347f3.jpeg) As You can see in image camera in Inside sphere and I click on four corners. I got 4 vertices and uv points. Using this I can create a plane for creating a plane I use Babylon custom mesh. var customMesh = new BABYLON.Mesh(“custom”, scene); var vertexData = new BABYLON.VertexData(); for vertexData i need to get positions,indices,normal,and uvs vertexData.positions = array I calculate from corners; YOU CAN CHECK IT IN PG I HAD SHARED vertexData.indices = [0, 1, 3,1,2,3]; vertexData.normals = \_normals; vertexData.uvs = array I calculate from corners; YOU CAN CHECK IT IN PG I HAD SHARED; and then vertexData.applyToMesh(customMesh); and this creates a plane with selected points ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/1/16ed2d4493fa6665b38057f8a153e0724feb0e1b.jpeg) its like cropping a wall from sphere to plane. So I can create walls. This works for walls. For each wall I get 4 points/vertice(x,y,z). This is the output for 3 walls. I exported walls.glb for that. You can check it in sandbox download glb from below link. > **[walls.glb](https://drive.google.com/file/d/14ILKXUx7kieWjzWz5GYClolWW44drxsz/view?usp=sharing)** > > Google Drive file. I am attaching images to of that glb in sanbox in case you dont want to download. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/4/424c80cca49ca97959f3ac94c8faf952705b32b8.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/92415f4dc5f94465b391d0c5689ebf28fb099f63.jpeg) ISSUE : is in creating floor and roof as they can have more then 4 points. ` > **I am getting issue in calculating indices for more then 4 points.** Check out this pg > **[Babylon.js Playground](https://www.babylonjs-playground.com/#VKBJN%23629)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes In place of sphere i added a plane here applied panorama texture. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/0e3df356d87311ec020841edac0b8e54619dc596.jpeg) click on four points ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/f7764e31fe062ff959b242fce1e2f9be8cb6ddc7.jpeg) you can see 0,1,2,3 points around a window (i tried to cut a window) click create create mesh it hides big plane and creates custom mesh ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/b/bd4631ae369fc0067650de1be89843d02847c6b9.png) you can see a output window. Now try to click more then 4 points ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/b/b5ce1b5fef7c41ac01840f9a0c8d3301c51da75e.jpeg) Now create mesh ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/a70c65759edb486a8c465590b8e676aeec3870d0.png) Output comes only for 4 points. in vertex data I am calculating vertices and uv for all clicked points. but because of indices \_indices = [0, 1, 3, 1, 2, 3]; 2 triangles it only display 4 points data. for 6 points indices manual array is \_indices = [0, 1, 3, 1, 2, 3,5,0,3,0,3,4]; ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/a5bdcce8bc9f79a96532b2dcd0f0b6f178c1e72c.png) I need to make it dynamic as indices needs to be in sequence. As I got Indices is named as winding order. It is of two types clockwise and anticlockwise. Like I want capture floor here. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/7ebf7365f4a2b652afd8fc3f583e55bbb3c42b0a.jpeg) As you can see it came with 13 points different panorama can have different no points so that requires this 3 position,uv and indices for vertex data. How can I do that? ---
**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\ **Post date:** [May 11, 2020, 7:41pm UTC](https://forum.babylonjs.com/t/making-house-floor-panaroma-image-to-3d-floor-plan-converter/10611/4 "2020-05-11T19:41:41Z")
I think you are asking how to triangulate a polygon? Like this: [Polygon triangulation - Wikipedia](https://en.wikipedia.org/wiki/Polygon_triangulation)? ---
**Author:** ![Atul\_Sharma](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/atul_sharma/32/7124_2.png) [@Atul\_Sharma](https://forum.babylonjs.com/u/Atul_Sharma)\ **Post date:** [May 12, 2020, 7:05pm UTC](https://forum.babylonjs.com/t/making-house-floor-panaroma-image-to-3d-floor-plan-converter/10611/5 "2020-05-12T19:05:18Z")
@bghgary thanks I will try this update it here back asap.