reactjs - 反应巴比伦装载机 OBJ 文件

Question

我正在尝试将 React 与 babylong 集成以加载 obj 文件，我使用页面中的示例，但我不明白如何在 babylon 上使用加载器。我有这个代码实现：

import React from "react";
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder, SceneLoader } from "@babylonjs/core";
import SceneComponent from 'babylonjs-hook'; // if you install 'babylonjs-hook' NPM.

let box: any;
interface Viewer3DProps {
    item: any
}

const onSceneReadyPrevious = (item: any) => {
return (scene: any) => {
    // This creates and positions a free camera (non-mesh)
    var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
  
    // This targets the camera to scene origin
    camera.setTarget(Vector3.Zero());

    const canvas = scene.getEngine().getRenderingCanvas();
  
    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    SceneLoader.Load("", item, scene.getEngine(), function (scene) {});
  
    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    //var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
  
    // Default intensity is 1. Let's dim the light a small amount
    //light.intensity = 0.7;
  
    // Our built-in 'box' shape.
    //box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
  
    // Move the box upward 1/2 its height
    //box.position.y = 1;
  
    // Our built-in 'ground' shape.
    // MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);
  };
}

/**
 * Will run on every frame render.  We are spinning the box on y-axis.
 */
const onRender = (scene: any) => {
  if (box !== undefined) {
    var deltaTimeInMillis = scene.getEngine().getDeltaTime();

    const rpm = 10;
    box.rotation.y += (rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000);
  }
};

export default (props: Viewer3DProps) => {
    const { item } = props
    return (
        <div>
            <SceneComponent antialias onSceneReady={onSceneReadyPrevious(item)} onRender={onRender} id="my-canvas" />
        </div>
    )
}

任何关于如何实现它的建议文件都是一个对象：

lastModified: 1634048626000
lastModifiedDate: Tue Oct 12 2021 10:23:46 GMT-0400 (Bolivia Time)
[[Prototype]]: Object
name: "spine-merged-mesh.obj"
size: 6516261
type: ""
uid: "rc-upload-1634699607864-3"
webkitRelativePath: ""

该项目是我从 React 添加到 SceneLoader 的文件选项

标签： reactjsbabylonjs