importing 3d models into babylon when using react

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/