import { Canvas } from '@react-three/fiber';
import { ExportButton } from 'r3f-glb-exporter';

function App() {
  return (
    <Canvas>
      <ambientLight />
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="orange" />
      </mesh>

      <ExportButton filename="my-model" />
    </Canvas>
  );
}

<ExportButton
  filename="my-scene"
  position="bottom-left"
  removeLights={false}         // keep lights in the export
  removeCSGChildren={false}    // keep CSG child meshes
  assignReadableNames={false}  // keep original Three.js names
  mergeMeshesInGroups={false}  // keep individual meshes (don't merge)
/>

import { useThree } from '@react-three/fiber';
import { prepareSceneForExport } from 'r3f-glb-exporter';

function MyComponent() {
  const { scene } = useThree();

  const handleCleanup = () => {
    const cleanScene = prepareSceneForExport(scene, {
      removeLights: false,        // keep lights
      assignReadableNames: true,  // auto-name objects
    });

    // cleanScene is a clone - your original scene is untouched
    console.log(cleanScene);
  };
}

import { prepareSceneForExport, exportToGLB } from 'r3f-glb-exporter';

const cleanScene = prepareSceneForExport(scene);

await exportToGLB(cleanScene, {
  filename: 'my-model',      // saves as my-model.glb
  binary: true,               // .glb (binary) or .gltf (JSON)
  maxTextureSize: 4096,
  onStart: () => console.log('Export started...'),
  onComplete: (blob) => console.log(`Done! ${blob.size} bytes`),
  onError: (err) => console.error('Failed:', err),
});

import { prepareSceneForExport, exportToGLBBlob } from 'r3f-glb-exporter';

const cleanScene = prepareSceneForExport(scene);
const blob = await exportToGLBBlob(cleanScene);

// Upload to your server
await fetch('/api/upload-model', {
  method: 'POST',
  body: blob,
});

import { getSceneStats } from 'r3f-glb-exporter';

const stats = getSceneStats(scene);
console.log(stats);
// { vertices: 12450, triangles: 8300, meshes: 42, textures: 5 }