devwiki:babylon_js

Differences

This shows you the differences between two versions of the page.


devwiki:babylon_js [2021/08/22 19:50] (current) – created ying
Line 1: Line 1:
 +====== 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 <code>MAYA_CUSTOM_TEMPLATE_PATH = </code>
 +      - 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 <code javascript>camera.lowerRadiusLimit = camera.upperRadiusLimit = camera.radius = 4.0; </code>
 +
 +**Limite mouse scroll zoom**
 +  * javascript <code javascript>
 +camera.lowerRadiusLimit = 1;
 +camera.upperRadiusLimit = 50;
 +</code>
 +
 +**Disable right mouse button drag pan**
 +  * you can set a camera target <code javascript>
 +camera.setTarget(box, true, true);
 +</code>
 +  * you can also use make pan not working<code javascript>
 +camera.panningSensibility = 0;
 +</code>
 +
 +**invert camera drag rotation direction**
 +  * javascript <code javascript>camera.angularSensibility = -5000;</code>
 +
 +**Force all material backface culling off**
 +  * add that function for import mesh process<code javascript>
 +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;} });
 +</code>
 +====== Problem and Solution ======
 +
 +  * Foundation tutorial: https://www.youtube.com/watch?v=X_a_PyV_wt4&list=PLS9MbmO_ssyCT1KHSi1GYX73ayv_9GusY&index=1
 +  * 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 <code css>
 +canvas {
 +  outline: none;
 +  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
 +}
 +</code>
 +
 +====== Extra Resource ======
 +
 +  * hdr to dds (common image based lighting image format to babylon supported format)
 +    * https://convertio.co/hdr-dds/
 +
 +  * babylon wp plugin (simpler way than hardcore js code way): 
 +    * https://github.com/eldinor/babylon-wordpress-plugin/blob/master/babylon-shortcode.php
 +    * demo site: https://igiuk.com/babylon-3d-wordpress/3d-examples/another-3d-example/
 +
 +  * 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): 
 +    * https://help.sketchfab.com/hc/en-us/articles/202508396-Supported-3D-File-Formats
 +