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

Question

我正在尝试扩展这个react-three-fiber Game Demo。我想在播放器与计算机交互时显示弹出模式。我想在使用TailwindCSS样式的模式中呈现不同的React组件。

你知道这是不是你可以用react-three-fiber做的事情？任何帮助都将不胜感激！

Answer 1

据我所知，您不能直接使用three.js呈现DOM元素。

作为一种解决方法，您可以创建react组件的映像，例如使用html2canvas。然后使用这些图像作为2D平面的纹理。

Answer 2

是的，这是可能的，

如果您想要将元素呈现为游戏元素，您可以查看sprites或drei广告牌。drei billboard

如果你想把它渲染成html，那就更简单了，只要把dom元素放在react three fiber canvas元素之外就行了。如下所示：

<div>
{showElementState&&<div><input type="range" ref={someRef}/></div>}
  <Canvas>
  <mesh onClick={()=>setShowElementState(true)} >
    <boxGeometry args={[1, 1, 1]} />
    <meshStandardMaterial color={'orange'} />
  </mesh>
  </Canvas>
</div>

或者，您也可以只使用leva包(在react-three-fiber github上推荐)：https://github.com/pmndrs/leva