如何在react-three-fiber中使用GLTFExporter导出多个不同的3d场景

import React from 'react';
import { Canvas } from 'react-three-fiber';

const Scene = () => {
  return (
    <Canvas>
      {/* 在这里创建你的3D场景 */}
    </Canvas>
  );
};

export default Scene;

import React from 'react';
import { Canvas, useLoader } from 'react-three-fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const Model = () => {
  const gltf = useLoader(GLTFLoader, '/path/to/your/model.gltf');

  return <primitive object={gltf.scene} />;
};

const Scene = () => {
  return (
    <Canvas>
      <Model />
    </Canvas>
  );
};

export default Scene;

import React, { useRef } from 'react';
import { Canvas, useThree } from 'react-three-fiber';
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';

const ExportButton = () => {
  const { gl } = useThree();
  const exporter = useRef();

  const handleExport = () => {
    const scene = gl.domElement.toDataURL();
    exporter.current.parse(
      scene,
      (result) => {
        // 在这里可以处理导出的GLTF数据
        console.log(result);
      },
      { binary: true }
    );
  };

  return <button onClick={handleExport}>导出场景</button>;
};

const Scene = () => {
  return (
    <Canvas>
      <ExportButton />
    </Canvas>
  );
};

export default Scene;