To use it, you just have to reference the loader file:
<script src="babylon.js"></script>
<script src="babylon.objFileLoader.js"></script>
You can find it here
If you are using ES6 imports via NPM, you need to reference with side-effects:
import 'babylonjs-loaders'
You can read more about NPM support
See how to load from any file type Babylon.js will know how to load the obj file and its mtl file automatically:
If you meet this problem, set the variable:
BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true;
Then, you'll have a better texture, but with a longer loading.
Depending on the modeling program you export your OBJ files from, textures may appear distorted or inverted. As a workaround, you can modify your imported model's UV coordinate scale via setting the variable:
BABYLON.OBJFileLoader.UV_SCALE = new BABYLON.Vector2(xValue, yValue)
Although not part of Wavefront OBJ file format, some OBJ files include vertex colors. If you are loading such a file and want vertices with colors, set the variable:
BABYLON.OBJFileLoader.IMPORT_VERTEX_COLORS = true;
If you have an OBJ file without normals or wish to have them calculated for you, set the variable:
BABYLON.OBJFileLoader.COMPUTE_NORMALS = true;
To have your imported model inverted on the y-axis, set the variable:
BABYLON.OBJFileLoader.INVERT_Y = true;
To invert your imported textures on the y-axis, set the variable:
BABYLON.OBJFileLoader.INVERT_TEXTURE_Y = true;
By default if a MTL file cannot be loaded (missing/error) it will silently fail. The model will still be loaded, but if you want to enforce a stricter loading of materials you can use onSuccess() and onError() callbacks accordingly. Set the variable:
BABYLON.OBJFileLoader.MATERIAL_LOADING_FAILS_SILENTLY = false;
If a MTL is defined in your OBJ and you wish to have it ignored, set the variable:
BABYLON.OBJFileLoader.SKIP_MATERIALS = true;