Best practice importing an .obj

Hello all,

I’m starting to investigate about importing files (geometries) into my babylon projects, and I’m having my first questions with that. Since I want to do things right from the beginning (and so far they are not going as I wanted them to :smiley: ) I will welcome any help and guidance you can provide me with!

First of all, I want to import .obj files into my projects, and as a mock-up example I wanted to use this file: 3d lamborghini aventador model (free for download if somebody wants to try it). Now, that is what I would like to see when I import it into my scene, but instead I’m getting this:


Which yeah… It has the shape but… It’s pretty sad. Now, I’ve been following the steps in the documentation I found about importing .obj files: Load from any file type - glTF, OBJ, STL, etc. - Babylon.js Documentation which basically summarizes into using this line of code:

BABYLON.SceneLoader.Append($ContentHere$)

This seems a somewhat concise approach, and I’m sure there is a wide variety of things that I’m missing here, so that’s why I’m asking for your advices :slight_smile:

Regarding some code, I don’t know if it’s possible to import files from Playground, so I’ve used this typescript+BJS boilerplate: GitHub - pandadelphin/babylonjs-typescript-webpack-starter: babylonjs-typescript-webpack-starter

And I’ve added a main.ts file, and edited index.ts file with the following code:
main.ts

import * as BABYLON from 'babylonjs';

export class Main {
    private _canvas: HTMLCanvasElement;
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
    private _camera: BABYLON.ArcRotateCamera;

    constructor(canvasElement: string) {
        // Create canvas and engine
        this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
        this._engine = new BABYLON.Engine(this._canvas, true);
    }

    /**
     * Creates the BABYLONJS Scene
     */
    createScene(): void {
        // create a basic BJS Scene object
        this._scene = new BABYLON.Scene(this._engine);
        // create an ArcRotateCamera
        this._camera = new BABYLON.ArcRotateCamera(
            'camera',
            0,
            0,
            10,
            BABYLON.Vector3.Zero(),
            this._scene
        );
        this._camera.attachControl(this._canvas, true);

        const light = new BABYLON.HemisphericLight(
            'light',
            new BABYLON.Vector3(0, 1, 0),
            this._scene
        );

        this._engine.runRenderLoop(() => {
            this._scene.render();
        });
    }

    importObj(): void {
        BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true;
        BABYLON.SceneLoader.Append(
            './assets/mesh/',
            'Lamborghini_Aventador.obj',
            this._scene,
            () => {
                console.log('Mesh Loaded');
            }
        );
    }
}

index.ts

import { Main } from './main';
import 'babylonjs-materials';
import 'babylonjs-loaders';

window.addEventListener('DOMContentLoaded', () => {
    const main = new Main('renderCanvas');
    main.createScene();
    main.importObj();
});

the .obj and related files are in a folder located in ./assets/mesh/ and they contain the following files:
image

Can anyone give me a hand on how to import it correctly so I can see the Lamborghini in its full beauty? :smiley:

P.D. I’m getting a console error stating Cannot GET /assets/mesh/Lamborghini_Aventador.obj.manifest, but since my original .zip file (downloaded from the previously mentioned page) does not contain a .manifest, I’m ignoring it. Please let me know if I should worry about it!.

Thanks for the detailed information and you do not have to worry about the manifest. It is only used if present.

About your issue it looks like there are 2 models overlapping each others. You should try to look at it in the sandbox to better see the different meshes composing the model. I even suspect the flat grey to be use for collision or LOD purpose.

If it is a model issue you are lucky we have @PatrickRyan @gryff @Vinc3r @JCPalmer who are all fluent in authoring tools :slight_smile:

I was about to say that raw import from 3D libraries often leads to issue and cleaning model necessity, but for once this one seems OK! (except it comes from Maya, and so by importing it into Blender I had to scale * 0.01, not a big deal here).

The overlapping you’re seeing can be easy resolved by reading the naming (good naming is rare also, nice!) :wink:

1 Like

Ohhhhhh yeaaaahhhh this was obvious for the collider :slight_smile: