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 ) 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
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:
Can anyone give me a hand on how to import it correctly so I can see the Lamborghini in its full beauty?
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!.