Я использовал babylon js в среде reactjs, и пока это очень хорошо. Однако у меня возникли проблемы с загрузкой 3D-моделей на холст. Мне удалось загрузить модели в нереагирующую среду, но не в реакционную среду.
Вы можете увидеть простой пример моего текущего кода ниже.
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
Холст и страница загружается нормально, но 3D-модель не загружается, и я получаю следующую ошибку.
Невозможно загрузить из ./3dAssetts/untitled-scene-babylon/untitled-scene.babylon: importScene of undefined из неопределенной версии: undefined, версия экспортера: undefinedimportScene не удалось JSON parse
Невозможно понять, что я делаю неправильно, у кого-нибудь есть идеи?