您可以在feact三纤维中的画布中门户吗？

Question

是否可以从一个外部进行一些react-three-fibre元素进入画布？

IE在下面的示例中，这是我第一次尝试将网格放入canvas中，该画布与“目标元素”不是DOM元素”（这是有道理的，鉴于这些不是DOM元素），

import * as React from 'react'
import { Canvas, createPortal } from '@react-three/fiber'

export const Element = ({ parent }) => {
  return createPortal(
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="red" />
    </mesh>
  , parent);
};

export const MyPage = () => {
  const ref = React.useRef(null);

  return (
    <div>
      <Canvas>
        <group ref={ref} />
      </Canvas>

      <Element parent={ref.current} />
    </div>
  );
};

所以我找到了CreatePortal方法（从react-three-fiber中，它具有非常有限的文档），但是随之而来的是错误，大概在这里，因为createportal方法仅在已经在帆布上下文中时起作用，并且用于在帆布内进行

import * as ReactDOM from 'react-dom'
import * as React from 'react'
import { Canvas } from '@react-three/fiber'

export const Element = ({ parent }) => {
  return ReactDOM.createPortal(
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="red" />
    </mesh>
  , parent);
};

export const MyPage = () => {
  const ref = React.useRef(null);

  return (
    <div>
      <Canvas>
        <group ref={ref} />
      </Canvas>

      <Element parent={ref.current} />
    </div>
  );
};

车门上面引发了此错误：

react-dom.development.js:22839 Uncaught R3F hooks can only be used within the Canvas component!

有没有办法这样做？

我的希望是能够将项目的其他位置放置在根本上的单个文档大小的帆布元素中。

更新：

＆lt; canvas/＆gt; 中包裹createPortal的呼叫来使其起作用

export const Element = ({ parent }) => {
   return (
    <Canvas>
      {createPortal(
        <mesh>
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color="blue" />
        </mesh>,
        portalTo
      )}
    </Canvas>
  );
};
</code>

我设法通过在第二个在项目中的帆布（并且在DOM中到处都有未使用的实际帆布确实很粗糙）

是否有一种方法可以使createPortal访问该上下文而无需将其渲染在画布内？

Answer 1

我知道这是一个非常古老的问题。
但是，对于寻求解决方案的人民，您可以使用隧道鼠。
https：//github.com/pmndrs/pmndrs/tunnel-rat