【问题标题】: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

      【讨论】:

        猜你喜欢
        • 2021-07-10
        • 2021-12-15
        • 2021-10-18
        • 2021-05-09
        • 2022-12-23
        • 2021-08-18
        • 1970-01-01
        • 2021-04-18
        • 1970-01-01
        相关资源
        最近更新 更多