Babylon.js 3D web solution

  • Maya to Babylon format:
    1. Download and Install Exporter: https://doc.babylonjs.com/resources/maya
      1. for maya: put dlls into ~\Documents\maya\MAYA_VERSION\plug-ins
      2. put templates folder into ~\Documents\maya\MAYA_VERSION\scripts
      3. edit maya.env in ~\Documents\maya\MAYA_VERSION\Maya.env to include that 2 templates folder path in
        MAYA_CUSTOM_TEMPLATE_PATH = 
      4. Launch Maya > Windows > Settings > Plug-in managers, check load of “Maya2Babylon.nll.dll”
      5. top menu bar > Babylon menu > Babylon File Exporter, then the non standard export window show up to export the file

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

  • 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

Other Tech Soluton