使用react时将3d模型导入到巴比伦

npm install react react-dom babylonjs

import { Scene, Engine, ArcRotateCamera, HemisphericLight, MeshBuilder } from 'babylonjs';

class BabylonScene extends React.Component {
  componentDidMount() {
    // 创建场景
    const canvas = this.refs.canvas;
    const engine = new Engine(canvas, true);
    const scene = new Scene(engine);

    // 创建相机
    const camera = new ArcRotateCamera('camera', 0, 0, 10, new Vector3(0, 0, 0), scene);
    camera.attachControl(canvas, true);

    // 创建光源
    const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);

    // 导入3D模型
    SceneLoader.ImportMesh('', 'path/to/model.gltf', '', scene, (meshes) => {
      // 在场景中添加导入的模型
      meshes.forEach((mesh) => {
        scene.addMesh(mesh);
      });
    });

    // 渲染场景
    engine.runRenderLoop(() => {
      scene.render();
    });
  }

  render() {
    return <canvas ref="canvas" />;
  }
}

export default BabylonScene;

import React from 'react';
import BabylonScene from './BabylonScene';

function App() {
  return (
    <div>
      <h1>My 3D Model Viewer</h1>
      <BabylonScene />
    </div>
  );
}

export default App;