问题标签 [react-three-fiber]

我正在使用 react-three-fiber 实现一个组件，如下所示：

我试过添加：

也：

唉，无济于事。我觉得我的头撞到了一堵无法移动的打字稿墙上！

我究竟做错了什么？

（如果需要可以创建代码沙箱）

我正在使用 react-three-fiber，但无法更新mesh和vertex显示颜色。即使我执行了以下所有步骤，我的网格颜色也保持不变：

我有以下代码创建一个mesh：

然后我使用primitive组件渲染该网格

稍后，我更改了该网格中的面和顶点颜色。这样所有的顶点和面都有下图中的颜色值：

最后，我像这样将几何上的 colorsNeedUpdate 值设置为 true

代码沙箱链接在这里：https ://codesandbox.io/s/change-vertex-colors-old-rz82v?runonclick=1&file=/src/index.tsx:665-673

我目前正在使用 react-three-fiber 制作场景，但我不知道如何将 3D 对象放置在不同的随机位置。我在 useFrame 中使用了一个 for 循环来获得不同的随机位置，但由于每次都会渲染，粒子只会再次移动到随机位置。但我希望这些位置仅在初始化时是随机的，然后移动整个网格。但是，如果我在使用框架之前使用 for 循环，则会给出错误-“无法读取未定义的属性 'setMatrixAt'”。PS-我只是想重新创建-https://threejs.org/examples/ ?q=postprocessing# webgl_postprocessing

我正在尝试将一个简单的图像作为纹理加载到react-three-fiber. 这是代码沙箱的链接。

当我在本地运行时，我在控制台中收到此消息：

CodeSandbox 什么也没给我。

我检查了互联网上的许多示例，它们似乎都在做同样的事情，但它对他们有用。

我很感激这方面的一些帮助。

我有一个在 X 轴上旋转的模型，但旋转的中心不在轴本身上。旋转代码非常简单：

但似乎没有办法定义实际的旋转轴来确保模型只围绕自己的中心旋转。此刻它转了一个大圈！

任何建议表示赞赏。

:-0

我一直在尝试使用我从中导入的 useRender

它一直给我一个错误，但是'useRender不是从'react-three-fiber'导出的。当我访问文档（https://inspiring-wiles-b4ffe0.netlify.app/4-hooks）时，它说它可以导出。

有人知道发生了什么吗？我正在关注本教程https://www.youtube.com/watch?v=1rP3nNY2hTo

我从 3D 库react-particles-webgl制作了一个组件。我怎样才能把它作为我网页的背景。网页由表单输入元素组成。

在上面的代码中，BackGround 是组件。这里我附上了背景组件的代码。

我用于该组件的CSS是-

我正在制作一个在键盘按下时呈现 3d 对象的应用程序。我希望这些对象在 2-3 秒后消失，或者在动画播放完毕后消失。

这是一个处理按键逻辑的组件：

现在，当我按下两个不同的键时，它正在两个对象之间<SpinningCube />切换<SmallCube />。但是，如果我向某个键发送垃圾邮件，它只会在初始按键时呈现组件。我希望它在每次我击键时重新渲染并重新启动组件上的动画，即使它一遍又一遍地重复。我假设我需要一种方法来卸载然后在每次击键时重新安装组件？

我正在使用 Three 和 React Spring 来处理我的动画。

我想让 React Spring 为 Three.js 中的材质属性设置动画。

但是，当我尝试这样做时出现错误：

这是我的代码，我正在尝试props.theta从 6.3 动画到 1.3：

我正在使用 react-three-fiber，它是 Three.js 的反应协调器。

react-three-fiber 中的默认相机是透视的，因此我的旋转模型在旋转时会变形。我需要一个正交相机来避免这种情况。react-three-fiber 文档建议我可以通过在 canvas 模块中包含以下语句来更改相机：

但是这个语句不起作用=编译器不喜欢等号。

以下语句被编译器接受，但失真没有明显区别： <Canvas style={{ background: "#171717", orthographic : true }}>

npm 文档没有明确说明以这种方式创建的正交相机将替换现有相机，或者创建一个新相机。

有一个 Set Default Camera 语句