How to load a obj/babylon/gltf file while using parcel bundler

Questions
1

Hi I am building using parcel bundler and everything worked fine. I was even able to load Skybox CubeTexture files with the help of CreateFromImages static method from CubeTexture. As I am simply import the Image using the import keyword and just pass it in.

But it doesnt seems to be the case for Mesh Loading.

Please let me know how to Load a Mesh just by simply importing using the import keyword.

PS: Parcel is able to import using the Import keyword. Only needed a way to load it into the scene.

EDIT: Does anyone know how to do it?

2

Could you share your repo as a start point to help the community digging into the issue ?

3

@sebavan Here is my link to the repo

I am using Parcel-bundler to bundle babylon js but parcel requires absolute imports to be mentioned in the js file so no internal file loading like we specify in SceneLoader or AssetManager will work. But parcel can import the .babbylon file with no issues so there should be an API to simply pass in the imported variable and create a mesh out of it and place it in the scene

4

Let s check if other Babylonians are using Parcel in order to help :slight_smile:

Thanks for the repro.

5

@sebavan Unfortunately from what I have asked around the community and discord no one seems to use parcel bundler. Provided such as easy to use bundler I am surprised to see no one is still adapting to parcel bundler. Will raise a ticket on github issues to see if someone else can help me.

1 Like
6

You should try on the parcel repo you might have better chances there. The think is you should not bundle the assets and it might be better to keep them aside of your bundle statically served ?

7

Guess I have to just stick with webpack and just move on :frowning:

8

@sebavan I have figured out how to load static files using parcel bundler. I used the below plugin to simply copy to my dist folder while parcel bundles.

I have it working perfectly in my repo.

2 Likes
9

I just bootstrapped a project using Parcel which makes it so simple to get started.

I came across that issue as well but found how to make it work and even though the topic is quite old, I’ll share exactly what I did from the start:

  • yarn init (fill up everything you want to on the interactive prompt but can just press enter all the way as well)
  • yarn add --dev -E parcel parcel-reporter-static-files-copy
  • yarn add -E @babylonjs/core @babylonjs/loaders
  • Create ./tsconfig.json 
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}
  • Create .parcelrc 
{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}
  • Create ./src/index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="main.ts" type="module"></script>
    <title>BabylonJS app</title>
    <style>
      html,
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
      }
    </style>
  </head>
  <body>
    <canvas id="renderCanvas" touch-action="none"></canvas>
  </body>
</html>
  • Create ./src/main.ts 
import {
  ArcRotateCamera,
  Engine,
  HemisphericLight,
  Scene,
  SceneLoader,
  Vector3,
} from '@babylonjs/core';
import '@babylonjs/core/Meshes/meshBuilder';
import '@babylonjs/loaders/OBJ';

const canvas = document.getElementById('renderCanvas') as HTMLCanvasElement;
const engine = new Engine(canvas, true);

var createScene = function () {
  var scene = new Scene(engine);

  SceneLoader.ImportMeshAsync(
    '',
    // DON'T FORGET TO UPDATE THE PATH HERE
    new URL('../static/your-obj.obj', import.meta.url).toString()
  );

  const camera = new ArcRotateCamera(
    'camera',
    -Math.PI / 2,
    Math.PI / 2.5,
    15,
    new Vector3(0, 0, 0),
    scene
  );
  camera.attachControl(canvas, true);
  const light = new HemisphericLight('light', new Vector3(1, 1, 0), scene);

  return scene;
};

const scene = createScene();

engine.runRenderLoop(function () {
  scene.render();
});

window.addEventListener('resize', function () {
  engine.resize();
});
  • Create ./static folder where you’ll put your OBJ file (don’t forget in main.ts to put the correct path!)
  • Finally, start the app: yarn parcel src/index.html

Everything should be running fairly smoothly from there when you access localhost:1234 by default :slight_smile: