问题标签 [react-three-fiber]

我在鼠标移动时移动形状的顶点，这很好用。但是，当对形状应用旋转时，顶点会沿错误的轴移动。

在这里创建了一个codesandbox.io：https://codesandbox.io/embed/gatsby-starter-default-l16ui

需要关注的两个文件是 page 目录中的 index.js 和 components 目录中的 shape.js。

在屏幕上移动光标，您可以看到它做出反应，但方向错误。

将弧度设置为 0，形状将旋转回其原始位置。现在尝试移动光标，它应该正确地对光标做出反应。

更新：我在第 47 行更新了代码沙箱，将添加的矢量从世界空间转换为 shape.js 中的本地空间，但这现在将所有形状放在一个位置。

const changedPoint = self.worldToLocal(point.clone())

考虑toLinePath功能：

我想使用react-three-fiber并尝试这样的方法重新创建它：

但是根本没有输出/错误。我想我完全误解了react-three-fibers API。我在这里做错了什么？谢谢，这是沙盒

我正在尝试将 react-router 与 react-three-fiber 一起使用。问题是<Switch>组件在添加到 react-three-fiber<Canvas>元素中时会丢失其上下文。为了解决这个问题，我可以将开关包裹<Router>在画布内。手动输入 url 时，路由按预期工作。但是，` 元素现在似乎引用了另一个路由器，并且在单击时不起作用。

有没有办法让<Canvas>参考内部和外部的元素成为同一个路由器？

https://codesandbox.io/s/reach-router-starter-v1-9qcjc

我正在尝试使用 react-three-fiber 渲染一个 3d 对象。我能够导入自定义 3d 对象，但无法在对象上应用自定义材质。任何帮助将非常感激。以下是我到目前为止尝试过的代码

我在尝试修改 react-three-fiber 中的正交相机时遇到问题。

基本上，我在画布中设置相机是这样的：

现在，zoomStuff 应该在执行某些操作时移动和更新相机信息（基本上它应该更新平截头体和周围的位置）

我知道这不是最好的方法，但我正在尝试一切，因为我有一个非常愚蠢的问题：

现在它正确地更新了相机位置和相机平截头体但是如果我碰巧滚动页面（不是画布本身，而只是页面），由于我完全不知道的原因触发了重新渲染。

最终结果是保留了最终位置，但截头锥体重置为开始位置。

我究竟做错了什么？无论如何我可以阻止这种重新渲染的发生吗？

我想使用基于位置的标记来增强固定网络摄像头的图像。这将被添加到已经在其他部分使用 three.js（通过react-three-fiber ）的现有 React 应用程序中，因此这些技术将被重用。

虽然计算标记（已知位置）相对于相机（已知位置）的位置非常容易，但我正在努力配置相机，以便在“真实”对象和 AR 之间获得良好的视觉匹配标记。

我创建了一个带有人工示例的代码框，以说明挑战。

这是我配置相机的尝试：

在场景组件的更下方，我根据网络摄像头的方位旋转摄像头，如下所示：

关于如何将相机配置为很好地匹配 three.js 框和现实生活对象的任何提示/想法？

我正在使用react-three-fiber，three并nextjs显示一些鸟类，这是一个常见的例子threejs！这是我的nextjs应用程序索引文件：

我的文件在static/glb/...文件夹中！问题出在GLTFLoader加载程序上。我尝试扩展方法"react-three-fiber"但没有帮助！

我想可能是因为SSR。你认为是吗？

我已经安装了react-three-fiber和三个包。我正在关注本教程，但我不知道该放在哪里：

const rootElement = document.getElementById("root");

另外，我开始收到此错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我的index.js：

有任何想法吗？

基于 PointCloud.js 中的原始 r3f-example片段

经我自己测试，上面这个原始组件能够通过将单个x y z值推送到Particle()函数中的 for 循环来渲染点云。

我对其进行了修改并添加了一个 `fetch()' 方法来检索自定义数据 txt 文件，片段如下所示，

,map是字符串中的自定义文本文件，具有单个数据逐行

该fetch()方法能够将自定义点云文件XY_arr作为Array(). 我已经检查XY_arr[i][j]了嵌套的forloop能够在控制台中返回正确x的值。z

当前的问题是没有点云被渲染到<Canvas />

position.push()嵌套循环是否在 'fetch()' 方法中引起的问题？以及如何解决。谢谢你。

我有一个相当简单的react-three-fiber设置，其中包括cannon.js 驱动的物理。在场景中有一个杯子——它被建模为一个顶部半径大于底部半径的圆柱体——它被放置在一个表面上。

当我运行代码时，在加载屏幕期间一切看起来都很好。但是当物理学开始时，杯子突然“沉”到地上。这是为什么？我无法理解这...

我的一个理论是圆柱体的“物理形状”与渲染的“光学形状”不同，但即便如此，我观察到的运动对于我能想象的任何合理的边界框仍然没有意义。 .

工作示例：https ://codesandbox.io/s/amazing-proskuriakova-4slpq