Jump to content

How to add materials to an extruded mesh


Recommended Posts

I have built some simpler structures in BJS, and I am researching how to build more complex ones. I can add materials to the simple meshes, but what if it is more complicated.

Suppose I draw the profile of a car, then extrude it into a 3d car shape, how do I add different materials onto it. E.g. if I have two images for the front and rear windscreens (windshields), how do I add them to just those parts of the mesh?


Link to comment
Share on other sites

Hiya Mark1, welcome to the forum.  I can only give MY opinion... and I'm no expert.

#1 way:  Make windshield, rear window, side windows, door handles, bumpers, headlights, blinkers... from separate mesh.  Set a special material for each one, and position the extra mesh in the proper positions onto the extruded car body.  Probably set each extra mesh .parent = carbody... then position each.

#2 way:  Use picked points as references.  Look at this playground demo, please:  https://www.babylonjs-playground.com/#DBFVA#4

Open your JS console, and see X and Y "textureCoordinates" are being reported... as you click-around on the plane.  They are numbers such as .73 and .04, etc, etc.

Now, enter a 2D paint program and make a texture that is 1000 x 1000. It should probably be a solid-colored texture.  Use the car body main color, for easy painting, later.

Place THAT 1000 x 1000 texture onto carBody.material.diffuseTexture.  Use the same methods as shown in that playground and click around on the car body.  You should be seeing the same kind of numbers... all values between 0 and 1.  You can think of these numbers as percentages.  .73 = 73%.  .04 = 4%, etc.

Now zoom-in your camera, and click on the location where you want ONE corner of the windshield to be.  Record the values.  But this time, if the X value is .73, you write down 730.  If the Y value is .04, you write down 40.

Do the same for ALL 4 corners of the windshield.  Do the same for the rear window.

NOW, return to your 2D paint program... with your 1000 x 1000 blank texture, and use your new texture-coordinates list... to PAINT a windshield and rear window onto the blank texture. 

Be careful here.  I believe these coordinates will be measured from LOWER LEFT corner of texture/image.  SO, using the numbers above as an example... your "point" of interest will be 730 pixels RIGHT, and 40 pixels UP... from image lower left corner.

Now save your image, and put the NEW saved image onto your car.  Is your windshield in the right place?  If so, continue your clicking and writing coordinates... adding more and more things to your 1000x1000 texture.  Soon, you will have a texture that precisely fits your extruded car, and all the "stuff" will be in the right place... because YOU painted it there.  :)

Goofy idea, huh?  Clicking-upon certain points on your car, writing down the numbers, and painting your 1000x1000 texture... little by little.  I think it might work.  Later, you can "resample" your 1000 x 1000 image... to be 500 x 500 or ANY up-scaled or down-scaled size... as long as you keep your square-ness.  The texture will map onto the car... the same way, no matter the texture scaling, as long as you scale X and Y (U and V) identically.

OR... someone else will soon have a much better idea, because my idea sucks.  :)  (Sometimes my ideas DO that.)  heh.  Sometimes textures don't "map" very "uniformly" onto extrudeShapes [like this].  

PolygonMeshBuilder is ANOTHER way to do extrudes.  I don't understand THEIR texture mapping, either.  :)  Perhaps modeling it in Blender or 3dsMax... might be the easiest way.  heh.  Stay tuned for more comments.

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