使用反应时将3d模型导入巴比伦

Question

我一直在 reactjs 环境中使用 babylonjs，到目前为止它非常好。但是，我一直无法将 3d 模型加载到 canvas。我已经设法将模型加载到非反应环境而不是反应环境中。

您可以在下面看到我当前代码的一个简单示例。

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

canvas 和页面加载正常，但 3d 模型没有，我收到以下错误。

无法从 ./3dAssetts/untitled-scene-babylon/untitled-scene.babylon 加载：未定义的 importScene 来自未定义版本：未定义，导出器版本：undefinedimportScene 失败 JSON 解析

无法弄清楚我做错了什么，有人有什么想法吗？

Answer 1

我已经成功地使用以下方法导入了 .babylon 3d 模型文件

我在 create-react-app /public 文件夹中创建了一个资产文件夹。

然后我将我的 .babylon 文件放在这个文件夹中，并使用以下命令在导入网格代码中调用它。

var car = BABYLON.SceneLoader.Append("./assets/", "carModel.babylon", scene, function(meshes){
        })

但是我在加载其他目标文件类型（例如 .gltf 和 .OBJ）时仍然遇到问题

有关更多信息，请参阅以下有用的内容 link

https://www.html5gamedevs.com/topic/40304-trouble-loading-assets-in-react/

Answer 2

如果您使用的是版本 4，请尝试更换

import 'babylonjs-loaders'

和

import '@babylonjs/loaders'

使用反应时将3d模型导入巴比伦

importing 3d models into babylon when using react

import

3d-model

reactjs

babylonjs