Newbie question.How to generate floor plan with shape points and apply textrue images

[lhx880619]

hi all,

i just want to migrate my project from threejs to babylon, the first problem i have is that how to generate shape mesh.

 

i have floor shape point in 2d 

[{"x":-4.72,"y":-1.955},{"x":-4.72,"y":3.015},{"x":5.47,"y":3.015},{"x":5.47,"y":-1.955},{"x":0,"y":-3.955}]

In threejs:

var geometry = new THREE.ShapeGeometry( floorshape);

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

var mesh = new THREE.Mesh( geometry, material ) ;

 

for babylon:

                var shape= []; 
                $.each(area.points, function (index, point) {
                    shape.push(new BABYLON.Vector3(point.x, -0.1 ,point.y)); 
                })
                shape.push(new BABYLON.Vector3(area.points[0].x,-0.1, area.points[0].y ));

               var path =  [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0,0.1 ,0 )]
                var s = BABYLON.MeshBuilder.ExtrudeShape('extruded',
                                                    { shape: shape, path:path, cap: BABYLON.Mesh.CAP_ALL },
                                                    scene);

i have the following img as texture  

mat.diffuseTexture = new BABYLON.Texture("images/floor.jpg", scene);

 

the shape is ok but material is not showing correctly

 

 would you guys please tell me the right way to achieve my goal?

 

[JohnK]

Hi and welcome to the forum. Difficult to answer your question as there are gaps in your code. Whether this is because they are actually missing from your code or it is just that you have decided not to share them we do not know. If your were to put the code for creating the shape and adding the material into a playground then we could see where the error was.

Don't know about the playground then have a read of http://babylonjsguide.github.io/begins/The_Playground

Here is a playground using textures http://www.babylonjs-playground.com/#20OAV9#15 read more here or here

If you want to use an image not available on the playground you will need to host it on imgur as this is acceptable to the playground under CORS.

[lhx880619]

@JohnK thanks for you replay, here is the playground http://www.babylonjs-playground.com/#TF811Y#3

what i expected is something like this(ingor the shape just the tile ):

 

[JohnK]

Two issues one minor one major.

Amended playground http://www.babylonjs-playground.com/#TF811Y#4

Minor - In whatever direction you want to extrude the shape the design of the shape should be based on coordinates in the XOY plane, ie the z component should be 0. Changed in above playground.

Major - I think that because of the way CAPS are designed you cannot you cannot get a rectangular tiled pattern. I'll ask a new question and check this.

[JohnK]

The brilliant shader expert @NasimiAsl has come up with this solution using his Geometry Builder ( see first few lines) http://www.babylonjs-playground.com/#TF811Y#8

Still trying to see if there is a simpler solution at this post

 

[lhx880619]

thanks @JohnK and @NasimiAsl, as you said that shaderbulider  did solved my problem,but let's see if there's any simpler solution. if not,would you pls make some comments about the magic shaderbuilder code for me?  And i'm wondering if this is the best way to achieve my goal,i mean to use ExtrudeShape, are there any other options?

[JohnK]

As I said as far as I am concerned shader builder is magic so I am not able to comment on it more than I did in the PG (playground) as to where to set the tile across and down numbers.

This reply to my question gives the problems.

It is possible to design your own mesh http://babylonjsguide.github.io/advanced/Custom the problem with a free formed mesh is to fill it correctly with triangles.

 

[lhx880619]

thank you so much for your help @JohnK, so it means for the time being, there's no solution as elegant as three did. i can use shader builder first, at least it works pretty good 

[NasimiAsl]

hi about shaderBuilder

in github : 

https://github.com/BabylonJS/Extensions/tree/master/ShaderBuilder

documentation : 

http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html

it is just string builder so feel free to ask anything in shaderBuilder

[Convergence]

18 hours ago, lhx880619 said:

thank you so much for your help @JohnK, so it means for the time being, there's no solution as elegant as three did. i can use shader builder first, at least it works pretty good 

Another way is to just edit the uvs of the directly, like so:

http://www.babylonjs-playground.com/#TF811Y#11

[JohnK]

@lhx880619 may I apologise for leading you in the wrong direction. I had forgotten about PolygonMeshBuilder, for which there is little documentation (but I am working to correct this).

This PG is, I hope, a simple way of achieving your needs http://www.babylonjs-playground.com/#TF811Y#13

 

[lhx880619]

@JohnK that's looks like what i'm searching for. but still need to bother you, another question is that polygonmeshbuilder only support polygon, how to add curves? i think path (with lines & curves) is the best data structure to describe what i'm doing. i want to draw 2d map, and  then build 3d visuals.

here is some screenshot for what i'm working with. just a 3d map for shoping mall.

 

 

 do you have any idea?

 

[JohnK]

Instead of an array of vector2 you can use a path2 with an arc, example and documentation

[lhx880619]

@JohnK cool !!!  thank you so much for your help.