问题标签 [react-three-fiber]

我正在开发一个应该从HTML 按钮获取输入的threejs 应用程序，并且在threeJS 中也有Raycast Detection on touch，

我面临的问题是，当用户按下 HTML 按钮时，Raycast 也在发生，这是因为我的 Raycast 代码在事件“ontouchstart”上运行

对于我正在尝试做的事情，这是不受欢迎的行为。

我已经尝试使用'ontouchend'来检测Raycast，但这也不能解决问题，我需要某种方式，如果每次按下按钮，Raycast代码就不会运行。

光线投射代码：

我正在使用 React 三 Fiber 的 ThreeJS 画布

我有这两个组件：

相机.tsx

并在 Landing.tsx 中使用它

一切正常，图像加载......直到我使用useFrame钩子 - 然后我得到一个错误 - React-three-fiber hooks只能在Canvas组件中使用！我有点困惑，因为 ref 是Canvas组件的孩子

我的场景很简单。我有一个（地面）平面和一个球体。我正在为球体设置发射材料。现在，我想要球体在平面上反射发射的光。

看起来这是不可能的。（我完全希望 THREE.js 像 Maya 或 Blender）。从我环顾四周的情况来看，建议使用点光源。但我有一个梯度发射图。所以点光源在这里不能满足我的需求。

其他一些答案提出了一些关于通过反射表面捕捉场景的建议，其他一些则指出我使用立方体相机渲染......我不完全理解它们的意思 - 我对 THREE.js 很陌生，而且这个低图形级别。特别是对像我这样的初学者的这个答案看起来令人生畏（我刚刚开始弄乱着色器）。Three.js 中的发光和反射

如果有人可以解释该方法或提供我可以了解它们的资源，我将不胜感激。

我正在使用 react-three-fiber 从头构建一个应用程序。我添加了three.js 和react-three-fiber，但是当我将canvas 或useFrame 导入文件时，出现webpack 错误。

错误

我的 webpack 文件

我正在使用 React 三光纤构建我的投资组合，它显示在移动设备和笔记本电脑或 PC 上的显示。但是当我试图在 i-pad 上查看时，显示是空白的。我正在尝试解决这个问题，但我找不到任何解决方案。如果能给我一些建议，我会很高兴。

这是我的代码

谢谢您的帮助.....

我试图在我的反应三纤维画布上听点击事件。但是我在使用时遇到了不同的事件addEventListener。

onClick网格属性返回以下事件：

添加事件侦听器会返回以下事件：

演示（单击框触发事件）

我从一个站点下载了一组文件，并在 blender 中导出了 glb、gltf 和 mtl 文件。我可以让 glb 或 gltf 文件显示在 react-three-fiber 场景中，但我不确定如何让纹理正确显示。我遇到了几个演示，但它们看起来很旧而且什么都行不通。

这是我加载文件的方式。

有什么方法可以访问controls场景的实例react-three-fiber吗？

我知道可以使用以下引用来访问它：

但我正在寻找某种全球访问方式，例如：

在此之后：three.js 2D 文本精灵标签

我找到了如何在 three.js 上制作 2d 文本精灵，我现在需要它来反应三纤维。

我的 index.js 上有这个：

盒子工作正常，文本我不知道如何在反应三纤维 Text.js 中转换该代码

如果我可以在我的画布上使用 scene.add 我只会使用函数 makeTextSprite 并轻松添加它，但我需要添加为文本组件，我该怎么做？

本质上，我想在以下示例中使用相机控件旋转平面中的框。每次我尝试添加相机控件时，我都会旋转飞机。最终我想scrollevents用控件移动飞机并旋转飞机上的场景。