你能在react三纤维画布内显示弹出模式吗

Question

我正在尝试扩展这个react三纤维游戏演示。当玩家与电脑互动时，我想显示一个弹出模式。我想在模态中呈现不同的React组件，这些组件使用TailwindCSS进行样式设置。

你知道react-three-fiber是否可以做到这一点吗？任何帮助都将不胜感激！

Answer 1

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

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

Answer 2

是的，

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

如果您想将其呈现为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三纤github上使用(：https://github.com/pmndrs/leva

Answer 3

这是一个足够简单的解决方案，虽然three.js不呈现DOM元素，但它仍然可以用于操作DOM中已经存在的元素。因此，如果你想改变元素的显示，或者让它平移并跟随3D对象，这对香草三来说很容易。

幸运的是，你可以获得三根纤维的所有好处，所以我想说只需使用Drei Html组件。我就把故事书留在这里，它应该会列出你对它的任何问题

Html故事书Drei