您可以在react-three-fiber画布中显示弹出模式吗？

import React, { useState } from 'react';
import { Canvas } from '@react-three/fiber';
import { createPortal } from 'react-dom';

function Popup({ children, open, onClose }) {
  if (!open) return null;
  return createPortal(
    <div className="popup">
      {children}
      <button onClick={onClose}>Close</button>
    </div>,
    document.body
  );
}

function App() {
  const [isPopupOpen, setPopupOpen] = useState(false);

  return (
    <>
      <Canvas>
        {/* Your 3D scene components go here */}
      </Canvas>
      <Popup open={isPopupOpen} onClose={() => setPopupOpen(false)}>
        This is a popup!
      </Popup>
      <button onClick={() => setPopupOpen(true)}>Open Popup</button>
    </>
  );
}

export default App;

import React, { useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { Mesh, PlaneGeometry, MeshBasicMaterial } from 'three';

function Popup({ text, position }) {
  const mesh = useRef();

  useFrame(() => {
    // Update popup position or other properties if needed
  });

  return (
    <mesh ref={mesh} position={position}>
      <planeGeometry args={[1, 1]} />
      <meshBasicMaterial color="white" transparent opacity={0.7}>
        <textGeometry args={[text, { size: 0.2 }]} />
      </meshBasicMaterial>
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Popup text="Hello, World!" position={[0, 1, 0]} />
    </Canvas>
  );
}

export default App;