问题标签 [react-three-drei]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
8 浏览

reactjs - 如何使用 react-three-fiber 附加纹理

我有上面的代码,球体确实被渲染了,但没有应用纹理,当我查看我的网络选项卡时,我可以看到这个纹理被找到并正确加载。

据我所知,这是我应该按照文档执行的操作。

我也尝试过使用 @react-three/drei 辅助类,但我无法加载此纹理。

我错过了什么?

0 投票
0 回答
9 浏览

reactjs - 在firefox上反应三纤维和drei慢?

我正在使用 react-three/fiber 和 drei 构建的网站https://www.carver.codes在浏览器中呈现完全不同的效果。

在 Firefox 中,除非您单击并移动一点,否则不会出现任何文本或广告牌。

在移动设备中,我关于我的星球中的“与我联系”链接都不会出现在移动设备上。

只是好奇如何在所有设备和浏览器上获得更稳定的结果?

我在 chrome 和 firefox 上检查了 fps,从 30 到 50 年代中期

0 投票
0 回答
38 浏览

reactjs - 移动 React-Three-Fiber/Drei 组件时锐度丢失

我正在尝试为我的投资组合制作一个 3D 终端。目前在 Next.js 中开发项目。这个想法是使用现有的包(https://www.npmjs.com/package/crt-terminal)并将Drei库的标签放入react-three-fiber。这是模型组件的代码:

这是要渲染的 Html 组件。

该组件渲染得很好,看起来很清晰,但是当我使用控件移动字符时,所有字符都变得模糊了。这个问题只发生在台式电脑上,一切都适用于移动设备。 搬家前

搬家后

任何想法如何解决?谢谢

0 投票
0 回答
8 浏览

reactjs - @react-three/fiber: RingGeomertry 不带颜色和阴影

使用环几何时有一些问题困扰着我。当我附加 meshStandardMaterial 并指定颜色时,它始终显示为黑色。我不能使用 meshBasicMaterial 因为它不受光线影响。环形几何体不会像球体那样的 3D 几何体做出反应。

我想要做的是显示环的颜色并接收来自球体的阴影。

我使用 @react-three/fiber 作为 libray 进行渲染,您可以查看示例: https ://codesandbox.io/s/zealous-hawking-llp33w?file=/src/App.js:0-811

我不知道我是否遗漏了一些东西来了解使用哪种材料,我是 @react-three/fiber 或 Three.js 的新手。

谢谢

0 投票
1 回答
32 浏览

reactjs - 平滑的水平滚动 - 反应三纤维

我一直在尝试用 React 三纤维制作一个小的水平滚动,以便以后可以在元素上添加一些 WebGL Distorsion,即使我以最基本的方式成功,仍然有一些需要改进的地方:

(这里是对应的代码框:https ://codesandbox.io/s/horizo​​ntal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js )

  • 首先,我想要一个平滑的滚动,但似乎无法做到,我使用了 lerp 函数来做到这一点,但结果不是很好:

  • 其次,我场景中的元素是随机放置的,场景完全没有响应。我很想模仿html逻辑并将我的第一个元素放在离屏幕左侧50px的地方,但不确定是否真的可以使用react threejs :)

如果有人对其中一个问题有任何答案,我会接受

提前致谢 !

0 投票
0 回答
7 浏览

reactjs - 控制更改期间的反应状态更新中断 OrbitControls 从三个

我正在使用带有 drei orbitControls 的反应三,并尝试检测相机是否高于或低于零,同时移动相机。目前我正在使用 onEnd 监听器来触发我在 ParentComponent 中的代码。如果我像这样更改父组件的状态,一切都会按预期工作。不幸的是,如果我在结束另一个轨道控制之前开始另一个轨道控制并改变我父母的状态,轨道控制就会中断。例如,我旋转相机并按住鼠标左键,而不是同时使用相机和鼠标滚轮滚动到零以下,Orbit 控件不再起作用。这在使用触摸时尤其痛苦。只要第二根手指接触,我就会越过地面轨道控制中断。

这是我的控件组件:

这是我的父母:

0 投票
0 回答
12 浏览

three.js - Threejs圆圈失真

我有一个圆圈(3 个圆圈)连接到鼠标移动:鼠标

为了在鼠标移动时获得这种效果,我有 3 个圆圈:鼠标移动

代码是:

我想要重现的效果是“相同的”,但只有边框:

静态鼠标

鼠标移动

我想我最后的提议是错误的,因为我有 3 个圆圈来实现这种效果,我不知道是否有某种方法可以扭曲这样的对象。

你能帮助我吗?

0 投票
0 回答
20 浏览

javascript - 将 React Typescript 组件转换为 Javascript 会出现错误

我正在使用React FiberReact Drei,但我不想像在他们的git中找到的示例那样使用Typescript

我已经使用 typescriptlang 工具转换了以下示例Stars.tsx

这是输出

然后我将这个 Stars 组件粘贴到我的代码框中

该组件现在在index.js的第 28 行注释,因为我收到以下错误

我不明白这个错误的问题到底出在哪里。

我从 typescript 转换为 javascript的stars.js组件有什么问题?我该如何解决?