问题标签 [react-three-fiber]

我最近开始使用 react-three-fiber 并且我发现了这个示例，其中 svg 图像是通过组件而不是直接在函数中加载的。我想使用这个想法，因为我想重用相同的组件但实现不同的 url 来加载不同的纹理。

我试图复制这个示例所做的，但它不断出现错误： Cannot GET /undefined 这是我的代码：

我也尝试通过 urlprops.url而不是使用 just url，但这也带来了类似的错误，我不知道如何纠正这个问题。我在这里查看了 react-three-fiber 的文档，似乎这只适用于其他加载器？例如 Draco 或 GLTF。但我不知道为什么它不适用于 TextureLoader。

编辑：完全错误：

所以这不是最有用的错误，因为它创建了一个单独的 html 页面，说它无法获取/未定义。它确实与传递 url 有关，因为如果我直接在函数中实现完整的 url，一切正常。但我不想创建这么多不同的功能。我和一个有类似错误的人一起看这里，它表明可能是 Javascript 将我的 src 设置为未定义？但它不应该，因为如果 url 没有通过 props 传递，它就可以正常工作。所以我猜我的语法是错误的，但我不知道如何纠正它。

我正在使用包三纯动画器来在我的网格中显示动画纹理。我使用的是 react-three-fiber 而不是普通的three.js，由于某种原因，它会加载纹理但不会对其进行动画处理。这是我的沙盒来说明我的意思。我什至尝试不使用useLoader并完全复制文档中提供的示例：

这个包只适用于普通的three.js吗？还是我错过了什么？

在我的反应应用程序中，我正在尝试制作一个显示从 pix4d 导出的 3d 网格的视图页面。该网格包含三种类型的文件，(.obj, .mtl, .jpg) pix4d.com。

我是新手，使用 react-three-fiber，我认为这是解决问题的最佳方法。

下面是用于加载和渲染 3D 模型的 react 组件的完整代码。

代码

提前致谢！

我想了解如何将纹理和材质附加到我的 obj 渲染模型。

我正在尝试在 react-three-fiber (R3F) 中加载 gltf 模型，但我正在做噩梦。我已经尝试寻找答案，并且有人遇到过类似的问题，但我无法解决我的问题。

我一直在控制台中得到这个：

据我所知，我的代码没有任何问题。我尝试以多种不同的方式将其写入模型中。几天前，react-three-fiber 的创建者将模型加载到他的代码盒中，如下所示：https ://codesandbox.io/s/r3f-gltf-useloader-8nb5i - 所以我觉得这不是问题与 R3F。我注意到他使用的是 glb 而不是 gltf 文件，所以我去找了一个 glb 模型来检查这是否会有所作为。我意识到我还必须将我的模型放在公共文件夹中，我也这样做了。不幸的是，这并没有什么不同，我仍然继续遇到这个问题。

我试过这样：

这是一个有类似问题的人：https://discourse.threejs.org/t/json-or-gltf-loader-for-three-js-in-react/3898/10但我仍然没有了解如何解决这个问题。

任何帮助将不胜感激，我非常期待与 R3F 一起玩，但我似乎在第一关就掉了下来。有人请救我脱离这个头痛！哈哈。

谢谢！

所以我想创建一个弹出 div，它会在选择对象时从侧面滑动，然后在重新选择对象时退出。我还想创建一个也会关闭 div 的退出按钮。我几乎可以理解如何做到这一点，只是我想重用这个 div 组件，这就是为什么我将它作为导出保存在不同的 javascript 文件中的原因。这就是问题所在，因为我无法处理跨文件的事件。

这是我的代码：

我尝试更改样式以使显示“隐藏”和“阻止”，但这不起作用，因为它不会在动画中显示它只是弹出的幻灯片。此外，如果我尝试单独操作它，例如，在画布中创建一个单击事件以使 div 与 react-spring 一起出现，如果我尝试使用退出按钮，则单击事件不再起作用。

这是我的沙箱，用于显示正在发生的事情。：（如果这一切看起来令人困惑，请抱歉）代码在 Page1.js 和 toggle.js 中

https://codesandbox.io/s/sad-goldberg-pmb2y?file=/src/toggle.js:250-326

编辑：更简单的沙箱视觉效果： https ://codesandbox.io/s/happy-chatelet-vkzjq?file=/src/page2.js

我在一个网站上工作，喜欢集成 Three.js 和 React 的想法，但找不到如何做一些动作。阅读有关 VR 实现的信息，但无法获得像此代码框这样的全景视图（有时您需要刷新它才能工作）。

它使用 WebGLRenderer、PerspectiveCamera 和 OrbitControls。提前致谢！

我正在将我在三个 js 中的一个项目移动到 react-three-fiber 并且我在渲染循环中遇到了一些问题。也许我不完全理解 useFrame 是如何工作的。

这是代码沙盒：

https://codesandbox.io/s/react-three-test-y0zrx?file=/src/Three.jsx:1824-1835

所以在这个项目中，我使用滚动来在 z 轴上移动相机，并在我们到达 z 位置的不同点时更改显示的年份。正如你所看到的，当我们达到这一点时，我们使用了一个 useState 设置函数，它改变了状态，但也会产生延迟并暂时停用渲染效果。

这是更改显示信息的渲染器函数（从位置开始的年份）：

ThreeComponent.jsx

set 函数是从父组件传递的，但如果它在同一个组件上，它会遇到同样的问题：

ThreeComponent.jsx

App.js（父）

有人可以解释为什么会发生这种滞后吗？或者也许有更好的方法来移动相机，只需要滚动和更新数字。

太感谢了！

抱歉，如果这似乎是一个显而易见的答案，但我正在尝试创建一个类似于this的动画。我正在尝试使用 react-three-fiber 创建一个类似的，但我不能使用文档中显示的那些，因为它们操纵了使用three.js 无法实现的样式转换属性。我试图通过位置属性和道具来操纵它，但它带有一个错误，如此处所示，我真的不知道从哪里开始解决这个问题。这是我的代码：

我已经通过悬停和缩放成功使用了 react-spring，但是在使用位置时它不起作用。

我正在构建一个 Gatsby 站点，并希望使用react-three-fiber. 我正在尝试将 Stats.js 添加到其中，只是为了监视（并了解它是如何工作的），就像大多数普通的 three.js 项目一样。

• 我尝试使用react-stats，但它似乎已经过时：上次更新是 5 年前。在我发现“与 React 16 不兼容”的问题中，即使它似乎已修复，错误“需要导入 Proptypes”仍不断弹出。
• 我试过了，在战斗了几个小时后，react-canvas-stats我无法克服来自createInstance. node_modules/react-three-fiber/web.js:183以我的经验，我可能不应该弄乱node_modules.

我不确定使用包是否是最好的主意（或者是否有更好的包我找不到它），或者我是否应该尝试stats.js从原始仓库添加（绝对不知道从哪里开始） . 或者，如果首先添加没有意义stats.js，我应该做一些完全不同的事情。或者，如果有一个非常明显的解决方案，我完全错过了！

无论如何，感谢所有答案！

所以有人告诉我，由于一些技术问题，你不能将 react-router-dom 与 react-three-fiber 一起使用，因为 react-router 无法访问画布内的提供程序。好吧，我尝试在Link画布之外放置一个标签，当元素被点击到另一个页面时它会重定向，但显然这适用于所有元素，而不是我想要的特定元素。我已经看到使用门户或转发画布的示例，但恐怕这对我来说真的很困惑，我不知道如何应用它。

我想知道这是否可以通过传递道具来实现。例如，而不是使用<Link to = "/Page2">它<Link to = "{link}">，然后我会在组件中定义链接。例如<Cube link = "/Page2">。这是我的代码的简化版本：

问题是当我应用它时，什么也没有发生，我不知道为什么，我的语法错了吗？这是我在沙盒中的主要代码。一切都在 Page1.js 中，但由于它的数量，它有点令人困惑。