importing 3d models into babylon when using react - reactjs

Question

I have been using babylonjs within a reactjs environment and so far it's very good. However i've been having trouble loading 3d models into the canvas. I've managed to load models into a non-react environment but not the react environment.
You can see a simple example of my current code below.
import React from 'react'
import {useEffect, useState, useRef} from 'react'
import path from 'path'
import * as BABYLON from '#babylonjs/core'
import 'babylonjs-loaders'
import SceneComponent from 'babylonjs-hook'; // ^^ point to file we created above or 'babylonjs-hook' NPM.
import SceneComp from '../components/babylonComponent'
const MyPage = () =>{
var box = undefined
var page = "landing"
//this configures the scene
const onSceneReady = (scene) =>{
scene.clearColor = BABYLON.Color3.Black()
//create and position free camera
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene)
//this targets the camera to scene of origin
const canvas = scene.getEngine().getRenderingCanvas()
//attatch camera to canvas
camera.attachControl(canvas, true)
//this creates a light aiming 0,1,0 - to the sky (non - mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0,1,0), scene)
//default intensity is 1, let's dim the light a small amount
light.intensity = 0.7
var myModel = BABYLON.SceneLoader.Append("./3dAssetts/untitled-scene-babylon/", "untitled-scene.babylon", scene, function(meshes){
})
return scene
}
//this funciton will run on every frame render
const onRender = (scene) =>{
}
return(
<div>
<div style={canvasStyler}>
<SceneComp antialias onSceneReady={onSceneReady} onRender={onRender} id='my-canvas' />
</div>
</div>
)
}
const menuButton= {
color:'black',
textDecoration:'none',
}
const canvasStyler ={
position:'absolute',
width:'100%',
top:'0px',
zIndex:'-1'
}
export default MyPage
The canvas and the page loads fine but the 3d model does not and I am getting the following error.
Unable to load from ./3dAssetts/untitled-scene-babylon/untitled-scene.babylon: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse
Unable to work out what i'm doing wrong, anybody got any ideas?

Answer 1

I have managed to get .babylon 3d model files imported using the following
I created an assets folder within the create-react-app /public folder.
I then put my .babylon file within this folder and called it in the import mesh code using the following.
var car = BABYLON.SceneLoader.Append("./assets/", "carModel.babylon", scene, function(meshes){
})
However i'm still having problems loading other object file types such as .gltf and .OBJ
for further info see the following useful link
https://www.html5gamedevs.com/topic/40304-trouble-loading-assets-in-react/

Answer 2

If you are using version 4, try replacing
import 'babylonjs-loaders'
with
import '#babylonjs/loaders'