Hello, I’m trying to load a model in my react project using babylon…
I have no idea what’s going on, It should work fine but so far none of my models loads…
If anyone can help me I would be gratefull!
The model loads fine if I drag and drop on the https://sandbox.babylonjs.com…
The error:
Unable to load from model/RoboCop/RoboCop.obj: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse
Here is the main file:
import * as React from 'react';
import * as BABYLON from 'babylonjs';
import { GLTFFileLoader } from "@babylonjs/loaders/glTF"
import { OBJFileLoader } from '@babylonjs/loaders'
var createScene = function (engine: BABYLON.Engine, canvas: HTMLElement) {
GLTFFileLoader.IncrementalLoading = false;
console.log(OBJFileLoader.name);
// Create a basic BJS Scene object
var scene = new BABYLON.Scene(engine);
// Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
// Target the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// Attach the camera to the canvas
camera.attachControl(canvas!, false);
// Create a basic light, aiming 0, 1, 0 - meaning, to the sky
//var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
// Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
//var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);
var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
// Return the created scene
BABYLON.SceneLoader.Append("model/RoboCop/", "RoboCop.obj", scene, function (scene) {
// do something with the scene
});
return scene;
}
export default class BabylonViewer extends React.Component<{}, {}> {
constructor({ }, { }) {
super({}, {});
}
componentDidMount() {
const canvas = document.getElementById('renderCanvas');
(canvas! as HTMLCanvasElement).width = document.body.clientWidth; //document.width is obsolete
(canvas! as HTMLCanvasElement).height = document.body.clientHeight;
const engine = new BABYLON.Engine(canvas! as HTMLCanvasElement, true, { preserveDrawingBuffer: true, stencil: true });;
var scene = createScene(engine, canvas!);
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener('resize', function () {
engine.resize();
});
}
render() {
return (
<>
<canvas id="renderCanvas" ></canvas>
</>
)
}
}
