问题标签 [react-three-fiber]

免责声明：

首先，我想说我对 Web 开发很陌生 - 也许这个问题是由于缺乏基础知识造成的，因此我将不胜感激任何有用的建议。

问题：

我正在尝试在我的网络应用程序上加载 gltf 格式的 3D 数据，但是数据是动态的 -> 在使用网站时可能会发生变化。由于我想避免在每次更改之间创建一个新文件，我宁愿从 JSON 字符串上传 gltf 数据。这可以通过三个库本身来实现：

但是，我想坚持使用 react-three-fiber + drei，因为它易于与 React 一起使用。不幸的是，我在示例或其他人的代码中找不到解决方案。

可以在这里找到可编辑的沙箱：

https://codesandbox.io/s/priceless-knuth-cb1mo?file=/src/App.js

字符串数据存储在 const surfGltgData

我在 React 应用程序中加载从 Sketchfab 下载的 GLTF 模型。模型加载得很好，但动画根本不播放。我尝试了不同的方法。有任何想法吗？

此代码加载一个独立的 gltf 文件，但我有一个包含多个 bin 和纹理文件的文件

我在这里显示这个文件：

我相信这段代码的问题是

<bufferGeometry attach="geometry" {...nodes.mesh_0_18.geometry} /> ，有20个网格文件。我认为这可能是几何问题，我该如何加载它？

我正在尝试创建一个滚动框，parallax但由于某些原因它不会与Canvas元素绑定，即使我将两者都包含在同一个<div>.

在此屏幕截图中，您可以看到 div1 和 div2，其中每个都有自己的滚动功能...

在单独的 div 中尝试过

而且即使在同一个div下，依然摆脱不了双滚动。有任何想法吗？

或者react-spring 视差不兼容，react-three-fiber这就是为什么有一个库react-three-flex？

这是代码和框

我正在尝试将着色器与 React-three-fiber 和 Typescript 一起使用。着色器文件：

和组件文件：

我收到错误：

类型“JSX.IntrinsicElements”上不存在属性“customMaterial”。

我正在尝试将指针事件添加到使用 GLTFJSX 加载到 react-three-fiber 中的 GLTF 文件中。但是，指针事件不会触发，我不知道为什么。

我已经尝试将相同的事件添加到其他类似的代码沙箱中，并且它可以工作 - 那么如果我在做基本相同的事情，为什么它不能在这个示例中工作？

https://codesandbox.io/s/hopeful-brook-h8rhs?file=/src/App.js

• 预期行为：当您将鼠标悬停在模型上或单击它时，它应该被记录到控制台。
• 实际行为：只有onPointerMissed事件会触发。

有时，onPointerOverandonPointerOut事件确实有效。这似乎是随机起作用的——有时它起作用，但大多数时候它只是不起作用。

我错过了一些明显的东西吗？

编辑

当更改为mesh时，指针事件起作用。skinnedMesh所以这个问题与不检测指针事件直接相关。

我已经设法将一个 gltf 对象加载到我的 react-three-fiber 场景中。现在我想将材料附加到我的模型上。是否可以在此模型上使用标准材料？这是我尝试过的：

const Shape = (props) => { const gltf = useLoader(GLTFLoader, GLTFfe)

我目前正在玩一个 react-three-fiber 项目，我希望在场景中的单个网格周围创建一个发光效果（从 Blender 导入），类似于这里所做的：https://100gecs。 com/

我尝试过使用 Bloom 后处理，但我发现

a）它显着降低性能 b）它适用于所有网格，我不能只针对一个

有人对这种效果的其他技术有建议吗？或者，如果 Bloom 是唯一的方法，是否有针对效果的单个网格的方法？

我对 ThreeJS 很陌生，所以我不确定在这个特定问题上还能去哪里寻求帮助！让我知道我是否可以进一步澄清

我正在为我正在开发的一款虚拟现实游戏进行 3d 旋转。

https://imgur.com/a/789PxLU

在视频 1 中：我将辅助块设置为组位置和四元数。如果我使用控制器旋转组，我只需复制四元数和位置设置的黑色助手的位置就可以了。

然而，在视频 2 中，当我用第一个孩子的本地位置（视频 1 中它上面的那个）偏移助手（黑色块）时，初始位置很好，但是当我开始旋转组并尝试同步位置和四元数，我似乎缺少一个偏移量。

知道正确的术语是什么，我可以通过谷歌搜索并了解更多信息吗？或者关于如何解决这个问题的任何想法？

编辑：设法解决这个问题！想出了这个解决方案：https ://imgur.com/ueSlnGK

我能够将其缩小到：https ://imgur.com/pLkSNQe

我有这个代码THREE.js：

我想将其转换为react-three-fiber. 我尝试了以下代码，但它不起作用：