Babylon.js 3D web solution
- Maya to Babylon format:
- Download and Install Exporter: https://doc.babylonjs.com/resources/maya
- for maya: put dlls into ~\Documents\maya\MAYA_VERSION\plug-ins
- put templates folder into ~\Documents\maya\MAYA_VERSION\scripts
- edit maya.env in ~\Documents\maya\MAYA_VERSION\Maya.env to include that 2 templates folder path in
MAYA_CUSTOM_TEMPLATE_PATH =
- Launch Maya > Windows > Settings > Plug-in managers, check load of “Maya2Babylon.nll.dll”
- top menu bar > Babylon menu > Babylon File Exporter, then the non standard export window show up to export the file
- Blender to Babylon format
- Blender is best, better than Maya,Max,Substance Painter, as it is free and well supported and more than all you need to do all 3d related.
- download Blender 2.8 to Babylon exporter: https://github.com/BabylonJS/BlenderExporter
- install guide for blender: https://doc.babylonjs.com/resources/blender#installation
Basic
Extra code control
Disable mouse scroll zoom
- javascript code after camera creation
camera.lowerRadiusLimit = camera.upperRadiusLimit = camera.radius = 4.0;
Limite mouse scroll zoom
- javascript
camera.lowerRadiusLimit = 1; camera.upperRadiusLimit = 50;
Disable right mouse button drag pan
- you can set a camera target
camera.setTarget(box, true, true);
- you can also use make pan not working
camera.panningSensibility = 0;
invert camera drag rotation direction
- javascript
camera.angularSensibility = -5000;
Force all material backface culling off
- add that function for import mesh process
BABYLON.SceneLoader.ImportMesh("", "https://example.com/video/3d/", "my3d.babylon", scene, function (newMeshes) { for(let i = 0; i < newMeshes.length; i++){ newMeshes[i].material.backFaceCulling = false;} });
Problem and Solution
- Babylon.js official QnA: https://doc.babylonjs.com/resources/
- Official github: https://github.com/BabylonJS/Babylon.js
- Embed Babylon as html block: https://www.youtube.com/watch?v=5FAmoUmLlYg
- Problem: Blender Babylon export error after import FBX into blender:
- Solution:
- go shading view, select each geometry to check its material network, delete those empty normal map node
- Problem: my model in babylon view looks like backface culling, not display some face
- Solution:
- go 3d software, check if all the face normal facing outside. check normal direction of those poly face. with face display and show normal to check.
- Problem: chrome, safari shows focus indicator (aka a border line) when mouse select it
- Solution: css
canvas { outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */ }
Extra Resource
- hdr to dds (common image based lighting image format to babylon supported format)
- babylon wp plugin (simpler way than hardcore js code way):
- GLTF to GLB packer (a common web 3d file type than babylon specific 3d file type): https://glb-packer.glitch.me/
Other Tech Soluton
- sketchfab (flickr like 3d view share platform):