Load Blender mesh not working

Questions
1

I have a Babylon.js project that uses TypeScript, Webpack and InversifyJS. When I try load a blender exported mesh (exported using this plugin: Exporters/Blender at master · BabylonJS/Exporters · GitHub - Blender2Babylon-5.6.zip) I get errors.

If I use the import syntax as below I then get a compile error Module parse failed: Unexpected token (1:11) You may need an appropriate loader to handle this file type. > {"producer":{"name":"Blender","version":"2.79 (sub 0)","exporter_version":"5.6.4","file":"box.babylon"}, etc.

If I remove the comment that has string params for the ImportMesh method (and comment out the import related lines) my compiler is fine but I get a console error in my browser Unable to import meshes from ../../assets/box.babylon: Failed to load scene. Error status: 404 Not Found - Unable to load ../../assets/box.babylon.

I know it has nothing to do with the path or the existence of the file as I have tested loading a JPG in the same class as seen below and that works fine.

I also have a typings file which contains the below:

declare module '*.jpg'
declare module '*.png'
declare module '*.babylon';

The class:

import { Color3, Mesh, SceneLoader, StandardMaterial, Texture, Tools, Vector3 } from 'babylonjs';
import 'babylonjs-loaders';
import { inject, injectable } from 'inversify';

import Scene from '../_core/scene/scene';

import meshzor from '../../assets/box.babylon';
import groundTexture from '../../assets/floor.jpg';

@injectable()
export default class Logo {

  constructor(
    @inject(Scene) scene: Scene,
  ) {
    const ground = Mesh.CreateBox('ground', 1, scene.instance);
    ground.scaling = new Vector3(1000, 1, 10);
    ground.position = new Vector3(-500, -0.5, 0);

    const groundMaterial: any = new StandardMaterial('groundMaterial', scene.instance);
    groundMaterial.specularColor = new Color3(0.1, -1, 0.1);
    groundMaterial.diffuseTexture = new Texture(groundTexture, scene.instance);
    groundMaterial.diffuseTexture.uScale = 2;
    groundMaterial.diffuseTexture.vScale = 200;

    ground.material = groundMaterial;

    SceneLoader.ImportMesh('', '', meshzor,
    // SceneLoader.ImportMesh('', '../../assets/', 'box.babylon',
      scene.instance, (newMeshes) => {
        newMeshes.forEach((mesh) => {
          mesh.rotation = new Vector3(Tools.ToRadians(
            45), 0, 0);
        });

        console.debug('SUCCESS', newMeshes);
      },
      (response) => console.debug('PROGRESS', response),
      (response, error) => console.debug('ERROR', error),
    );
  }

}

I saw this question Babylonjs + Typescript + glTF Loader + webpack revisited and thought it may be related but even after importing the babylonjs-loaders package I still get the same error. I assume it’s because the loaders package only caters for OBJ, STL and gITF. Do I need to export the Blender mesh as a gITF? The example here Blender - Babylon.js Documentation generates a .babylon file.

Below is the first line of the box.babylon file:

{"producer":{"name":"Blender","version":"2.79 (sub 0)","exporter_version":"5.6.4","file":"box.babylon"},
2

Pinging our module master @sebavan

3

You should rely on the string syntax to prevent loading from embedded json. Then i suspect the file not being accessible at runtime on …/…/… this is the only reason we can output the 404.

Could you check that your file is in the expected location at runtime not compile time ?

4

@sebavan After your reply I tried running a npm run build and saw the file was not being included in the build so I thought the issue may be with Webpack. After some fiddling while running npm run start I managed to fixed the problem and it actually had nothing to do with Webpack… I had to remove the ../../ and change the path so my mesh path is now src/app/assets/. The strangest thing is if I make the path ../../src/app/assets/ it still works…

I do however still need a Webpack file copy plugin to copy the .babylon file to the dist folder when running npm run build.

Thanks for help BTW :slight_smile:

1 Like