你能在反应三纤维画布内显示一个弹出模式吗？答案

【问题标题】：Can you display a popup modal inside a react-three-fiber canvas?你能在反应三纤维画布内显示一个弹出模式吗？
【发布时间】：2021-08-01 08:32:17
【问题描述】：

我正在尝试扩展这个react-three-fiber Game Demo。我想在玩家与计算机交互时显示一个弹出模式。我想在模态框内渲染不同的 React 组件，这些组件使用 TailwindCSS 设置样式。

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

【问题讨论】：

是的，这是可能的。但是，您应该分享相关代码并告诉我们您尝试了什么，以便我们可以帮助您解决您的问题。

标签： reactjs three.js tailwind-css react-three-fiber

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

是的，有可能，

如果您想将元素渲染为游戏元素，您可以查看精灵或 drei 广告牌。 drei billboard

如果你想将它呈现为 html 就更容易了，只需将你的 dom 元素放在 react 三个纤维画布元素之外。像这样：

<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

【讨论】：

【解决方案3】：

这是一个足够简单的解决方案，虽然 three.js 不渲染 DOM 元素，但它仍然可以用于操作 DOM 中已经存在的元素。所以如果你想改变一个元素的显示，或者让它平移和跟随一个 3D 对象，这很容易使用 vanilla 3。

幸运的是，您可以使用三纤维的所有好处，所以我想说只使用 Drei Html 组件。我就把故事书留在这里，它应该会解决您的任何问题

Html Storybook Drei

【讨论】：