问题标签 [react-three-fiber]

这个模型似乎加载完全黑色 - 但其他人没有。https://d1iczm3wxxz9zd.cloudfront.net/e4a5c9ee-9fa0-46b2-9ff5-8e52e6286a3b/5ee3baf2-2524-4617-99a7-2a91b4bd20c1/11/ITEM_PREVIEW1.glb

有人碰巧知道为什么吗？

其他 GLB 文件的纹理没有问题。这个好像有问题。但是当加载到其他在线 GLB 查看器中时，它加载得很好。

使用 reactjs、react-three-fiber 和three.js。

这是three.js代码：

和型号：

我使用 three.js 和 react-three-fiber 创建了一个低多边形水动画。加载我的网页时动画开始播放，但当您开始向下滚动以查看我网页上的其他内容时，我的动画重置并重新开始。

PolyWater只是我创建的一个组件，用于使用顶点制作低聚水。

SeaScene 被导出到一个 Home 组件，它将我的其余组件合并在一起。

我的 Home 组件正在 App.js 文件中渲染，以使用路由器做出反应

SeaScene.js

主页.js

应用程序.js

尝试将一堆对象设置为动画到它们的位置，并且 useSpring 对我有用（对于单个元素），但 useSprings 不适用于 3 个对象。

这是演示（mousedown 红球）： https ://codesandbox.io/s/try-to-do-zgit5?file=/src/App.js:1254-1857

这是代码：

和元素：

作为 react-spring 的新手，这可能是一个可笑的简单问题，但我现在自己也坚持了下来

我正在尝试将精灵定位在正交相机的底部中心。

这是我目前拥有的 -

物体：

相机渲染：

我试图想出一个可以适用于所有不同精灵的计算（它们都有不同的高度，因此例如它们中的一个将通过设置定位在底部，position={[1, -128, 0]}而对于另一个坐标只会让它浮动由于它的高度较短）。我查看了文档，center精灵的属性似乎没有做我想要的，我看到的所有示例都将它放置在屏幕的角落或中间。谢谢你的帮助 ！

我正在使用 React Three Fiber 开发 Threejs。在使用通过计数器或其他东西更改 JSX 属性的函数时需要一些帮助。想要随时间变化，只要用户停留在页面上，强度属性就会上下波动。它的最大值（在本例中为 1，最小值为 0）

到目前为止，这是我的代码..

我有一个名为Sticky包装我的组件的react-three-fiber组件。该组件通过回调为我提供了一些状态更新，因此整个代码如下所示：

如您所见，我需要来自钩子Sticky onChange内回调的数据。react-three-fiber useFrame我了解一切是如何工作的，并且我不想将其传递给组件，因为这将重新渲染 Three.js 草图。但是如果我不能依赖 props，你如何处理react-three-fiber组件中的外部数据？

任何帮助表示赞赏。

我在 react-three-fiber 中阅读了 Canvas 的官方文档。

react-three-fiber 中 Canvas 的官方文档

Canvas 的属性很少。我看到了某人的项目。他在代码中使用了更多属性，例如：

那么，如何知道 react-three-fiber 中关于 Canvas 的完整介绍呢？

我在Next.js中使用react-three-fiber并且正在渲染包含画布的组件并通过使用 Next 的导入和禁用的服务器端渲染加载 glTF 文件。访问/重新加载页面时，glTF 会按预期加载并显示。useGLTFoaderdynamic

我的问题是，切换页面时出现以下错误：

三.WebGLRenderer：上下文丢失。

再次导航回页面时，尽管画布可用，但模型不可见，并且对指定操作进行屏幕截图的组件也可以正常工作（但也不显示模型）。

保存画布并渲染 glTF 的组件非常基本，如下所示：

导入（如此处所述）是这样完成的：

我在 3D 平面上绘制点，因此坐标为 (X,Y,Z)，但高度 Y 将被硬编码，因此算法不必包括检查。

我目前绘制点的方式是在安装时，调用一个函数以根据随机角度的 sin 和 cos 生成随机坐标。这会导致重复和点非常接近。

我正在考虑将位置数组转换为一组以删除重复项，但这并不能解决递归检查每个点以确保最小距离的问题。

有人可以帮我集思广益，或者在设计这个算法时提供一些指导。提前致谢。

随机坐标算法

我正在使用 React Three Fiber 为看着鼠标的 3d 模型制作动画。这是在我的页面背景中创建一个画布元素。我有几个 div 和 h1s 在它上面分层，每当我的鼠标悬停在 divs/h1s 上时，画布就会冻结，直到我将鼠标移出它为止。这会导致看起来不连贯的动画。我该如何纠正这个问题？

这是我的反应组件：