If you’re working with Three.js, Babylon.js, Unreal Engine, or Bitbybit, and you’re wondering how to bring everything together—this tutorial is for you. In this short but powerful walkthrough, Matas demonstrates a workflow that allows developers using Three.js or Babylon.js to export 3D models generated by Bitbybit configurators directly into Unreal Engine.
Find open-source project on StackBlitz
Unreal Engine, known for its cinematic visuals and real-time rendering power, can be used to build everything from interactive games and simulations to animated films. The core file format we’ll be working with is GLTF, along with its binary version, GLB—standard formats for modern 3D workflows.
Matas will walk you through a live demo project on StackBlitz that’s set up with Three.js and includes the essential GLTF export functionality. You’ll see how to export two slightly different models, both built around a shared hexagon-based pattern. This tutorial highlights the creative flexibility of web-based configurators and proves they’re more than capable of generating high-quality assets ready for use in Unreal Engine.
Finally, you’ll learn how to import and combine multiple models in Unreal, apply basic materials, and tweak settings to achieve a beautiful, atmospheric “evening” look and feel.
#unrealengine #threejs #babylonjs #bitbybit #glb #gltf #stackblitz #webgl #javascript #typescript #configurator #game #gamedev #gamedevtools #indiedev #rendering #graphics #3d #3dmodeling #3dexport #cad #cam #parametric #computational #design #architecture #visualization #realtime #shader #geometry #web3d #interactive #simulation #procedural #animation #materials #textures #mesh #uv #lighting #engine #scenes #workflow #frontend #webdev #webdesign #uiux #ar #vfx #vr #unity #modeling #coding #scripting #code #exporter #pipeline #assets #hexagon #patterns #customization #modelling #unreal #bitbybitxyz #toolkit #framework #openweb #creativecode #visualcoding #nodes #visuals #creative #modelviewer #webbased #polygon #vertices #parametricscripting #codebaseddesign #glsl #raymarching #pbr #realtimerender #gameassets #devtools #interactive3d #online3d #modelconfigurator #customassets #geometrygeneration #three #bitbybit3d #ue #ue5 #blueprints #nanite #lumen #materialseditor #blender #designtech #computationaldesign
00:00 Unreal Engine 5 animation of hexagon based parametric design
00:22 Intro to Bitbybit project on StackBlitz which uses ThreeJS game engine
00:58 Intro to Download GLTF button
01:08 Learn how to increase the quality of the mesh for export
02:05 Learn to disable drawing of the edges as we don’t need them in UE5
02:20 Press Download GLTF button to get the file for UE5
02:25 Create slightly different parametric model by adjusting the algorithm
03:10 Save adjusted 3D model
03:30 Reset to old parameters
03:35 Explanation how StackBlitz works and why it’s useful when demonstrating bitbybit open-source npm packages
05:00 Intercept with small Bitbybit promotion, explanation how best to support our work and an offer with promo code for discounted subscription price
05:40 Importing GLTF files to Unreal Engine’s basic scene
07:14 Inspect imported 3D model
08:10 Move the model sideways to make room for the second one
08:45 Import second model
09:15 Adjust second model and scale the ground
10:05 Apply some standard UE materials on the models
10:50 Apply metal material to the ground for nice reflections
11:00 Adjust sun settings to create evening atmosphere
11:55 If you’re building configurators with ThreeJS and BabylonJS you can export those as assets
12:20 Conclusion
Voir sur youtube
? which game engine is the best?