FDNavigate back to the homepage

How to Get Flooring For a GLTF Model From blender to GLTF and R3F/Threejs

Rick
March 6th, 2022 · 3 min read

This article came of the back of modelling my office in manchester at DEPT UK. The question arose how can you create nice realistic flooring for a 3D model based off the intertnals of a building? (for the web)

The flooring addons shines through! A free addon for blender and it allows you to procedurally generate flooring. But i hear you ask if its for web how do we use this in GLTF? The standard model file format.

Its super easy, just a couple of querks to realise. Took me 30min to figure what the heck ws going on!

So lets start from the beginning, first off download the flooring addon here.

Now open up blender and delete the basic scene and add a plane so it looks like this:

Image of basic plane in blender

One you have this the fun begins 🙂

First of go to preferences and install the zip you just downloaded of the addon github repo.

Search for the addon now and check the checkbox.

(as a side note i use a mac and I think they are the same key bindings for windows)

Once this is done you need to press N and the side pannel will show like this:

Side panel with flooring addon tab

So go ahead and select the plane as the active object and press convert to floorobject.

From an othographic point of view it should look something like this:

Othographic view of the flooring plane after selecting the convert button

Now press the shading tab at the top and then click to create a new principled material in the nodes tab:

Shader tab in blender for the newly created flooring plane

The next bit is to grab some textures which you can get for free by searching for free textures. I got mine from here.

Download a texture and all the maps you need and store in a safe place.

Next go to blenders preferences and make sure the node wrangler is ticked:

Node wrangler addon for texture nodes in blenders preferences

Why have we downloaded this? it makes it very easy to load in metallic maps, opacity maps, base color maps and all sorts of other maps, in the node graph.

So now press crt+shift+t. This will open up a window to select the texture maps we just downloaded. Press enter with all the maps selected and volia.

Node wrangler open box with all maps selected

You should have something which looks like this:

All texture maps loaded into the node wrangler

So we need to modify the uv’s, the grain of the texture doesnt match the wood shapes.

Texture grain wrong way

So select UV random: shuffle and UV rotation 90 degress and you should get the grain the right way:

Texture grain the right way after configuration

Or configure it to which ever way you want 😎

Now one thing to make clear which took me 30min to figure out is make sure vertex colours is not selected when exporting the model to GTLF format.

With vertex colours:

GLTF model with vertex colours exported

Without vertex colours:

GLTF model without vertex colours exported

Im not 100% sure why this happens, I can only guess that vertex colours are used internally by this addon. Vertex colours basically means a colour is stored for each vertex of the the object and directly into the 3D GLTF model format, and with vertex colours no textures should be required.

Final Thoughts

And there you go you’ve configured and used the flooring addon to generate a GLTF model of a floor in a building model.

You can use this in any building, and having done this two ways, first with a seamless texture and secondly using this addon… the results with the addon are 100% better!

Have fun playing around with it and let me know what things you create ❤️

(P.S. alittle sneak peak at my next project:)

Next project of modelling DTUK office

More articles from theFrontDev

Glossy Water From Blender to R3F Using Light Emitting HDR Images

Generating water like surface using blenders shader node graph, baking the normals and exporting to R3F. Also using a hdr light emitting image for realistic lighting.

January 16th, 2022 · 2 min read

Mosaic Tiling With Semi Seamless Textures in a R3F or Threejs Setting

Using GLSL shaders to tile a texture to avoid none repeating patterns or minimize it by rotating UV's around a pivot point for each tile. Essentially mosaic rotation or UV rotations.

January 12th, 2022 · 2 min read
© 2021–2024 theFrontDev
Link to $https://twitter.com/TheFrontDevLink to $https://github.com/Richard-ThompsonLink to $https://www.linkedin.com/in/richard-thompson-248ba3111/