How correctly import SceneLoader to load 3D files?

Questions
1

Hi, I am trying to import a 3D file using scene loader, but the code isn’t working, constantly firing an import error:
importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse

I think it has something to do with the way I import the BabylonJS loader lib, but I don’t know what I am doing wrong. I’ve already read post with similar problems, corrected my imports method, but I still have the error.

I have these version of BabylonJS:
“babylonjs”: “^4.1.0”,
“babylonjs-loaders”: “^4.1.0”,

My imports at the top of my class:
import * as BABYLON from “babylonjs”;
import “babylonjs-loaders”;

I am using this snippet of code, using the exact same base64 object:
https://playground.babylonjs.com/#7F6S08#15

var base64_model_content = "data:base64,Z2xURgIAAAD4CAAAl...";
BABYLON.SceneLoader.Append(
"", base64_model_content, this.scene, () => {
               console.log("model loaded!");
               //scene.createDefaultCamera(true, true, true);
             }, (err_) => console.warn(err_)
);

Note than I am using BabylonJS into a ReactJS application. Here is the complete Class:

import * as BABYLON from "babylonjs";
import "babylonjs-loaders";
//import { Map } from "./Map";
import Map from "./Map";
 
let box;
let camera;
let ground;
 
const PLAYER_HEIGHT = 4; // The player eyes height
const SPEED = 1;
const INTERTIA = 0.9;
const GRAVITY = -0.9;
const ANGULAR_SENSITIVITY = 1000;
 
export const onSceneReady = (scene, mapId_, subscribeToUIAction) => {
 // We need a scene to create all our geometry and babylonjs items in
 scene.audioEnabled = false;
 const canvas = scene.getEngine().getRenderingCanvas();
 
 //Camera FPS
 let map = new Map(scene, mapId_);
 camera = new BABYLON.FreeCamera(
   "freeCamera",
   //new Vector3(0, 5, 0),
   new BABYLON.Vector3(
     map.getPlayerFirstPosition().x,
     5,
     map.getPlayerFirstPosition().z
   ),
   scene
 );
 
 subscribeToUIAction((e_) => {
   map.handeUIAction(e_);
 });
 
 camera.attachControl(canvas);
 scene.gravity = new BABYLON.Vector3(0, GRAVITY, 0);
 camera.applyGravity = true;
 
 camera.ellipsoid = new BABYLON.Vector3(2.5, PLAYER_HEIGHT, 2.5);
 camera.ellipsoidOffset = new BABYLON.Vector3(0, PLAYER_HEIGHT, 0);
 camera.checkCollisions = true;
 
 //GameUtils.setKeyBoardMapping(this);
 camera.speed = SPEED;
 camera.inertia = INTERTIA;
 
 let handleCameraUpdate = (evt_) => {
   map.updateFrontBlock(camera);
 };
 
 map.getPlayerLegacyPosition(camera);
 
 camera.onViewMatrixChangedObservable.add(handleCameraUpdate);
 map.addPlayerCollision(camera);
 
 //Add sky
 scene.clearColor = new BABYLON.Color4(132 / 255, 197 / 255, 232 / 255, 1);
 
 //Add ground
 ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 2, scene);
 ground.checkCollisions = true;
 ground.position.y = -0.1;
 
 let mat = new BABYLON.StandardMaterial("matVolcano", scene);
 let texture = new BABYLON.Texture(
   "/assets/textures/volcanic_text.jpg",
   scene,
   true,
   true,
   BABYLON.Texture.NEAREST_NEAREST
 );
 mat.diffuseTexture = texture;
 ground.material = mat;
 
 // Hemispheric light to enlight the scene
 let hLight = new BABYLON.HemisphericLight(
   "hemi",
   new BABYLON.Vector3(0, 0.5, 0),
   scene
 );
 hLight.intensity = 0.99;
 
 var base64_model_content =
   "data:base64,Z2xURgIAAAD4CAAAlAUAAEpTT05..";
 BABYLON.SceneLoader.Append(
   "",
   base64_model_content,
   scene,
   () => {
     console.log("model loaded!");
     //scene.createDefaultCamera(true, true, true);
   },
   (err_) => console.warn(err_)
 );
};

What am I doing wrong?

2

You should try to use our latest version for this as it was not supported in 4.1. Just change your packages info to :slight_smile:
“babylonjs”: “^4.2.0-alpha.23”,
“babylonjs-loaders”: “^4.2.0-alpha.23”,

1 Like
3

Thanks, it’s working!