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

【问题标题】：importing 3d models into babylon when using react使用反应时将3d模型导入巴比伦
【发布时间】：2020-09-17 19:30:52
【问题描述】：

我一直在 reactjs 环境中使用 babylonjs，到目前为止它非常好。但是，我一直无法将 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 加载：未定义版本的未定义导入场景：未定义，导出器版本：未定义导入场景 JSON 解析失败

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

【问题讨论】：

标签： reactjs import babylonjs 3d-model

【解决方案1】：

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

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

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

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

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

欲了解更多信息，请参阅以下有用的链接

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

【讨论】：

谢谢，将文件放在公用文件夹中并具有与反应路径相同的语法很重要：“./assets/”

【解决方案2】：

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

import 'babylonjs-loaders'

与

import '@babylonjs/loaders'

【讨论】：