问题标签 [react-three-fiber]

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 投票
2 回答
2417 浏览

javascript - 在 React-three-fiber 的 GLTF 模型上动态编辑材料

我正在尝试在简单的三纤维反应场景中动态更改“.gltf”模型的纹理贴图值。如果我理解正确,您必须在材质上添加纹理文件,然后将材质添加到模型中?在我的场景中,纹理文件被烘焙到“.gltf”文件中。我想用 jsx 更改值,例如 alphaMap 的不透明度。

这是我的沙箱:https ://codesandbox.io/s/patient-framework-3holn?file=/src/App.js

我知道这可能很简单,但我不知道。谢谢!

0 投票
1 回答
523 浏览

reactjs - 与 React 三纤维组件作斗争

我有一个包含产品信息、fbx 文件路径等的 json。现在我想基于我的 json 文件构建一个动态组件,它将我的 fbx 文件加载到我的画布上。我稍后想引用这些对象,对它们进行分组并为它们设置动画。这在带有 react 的 nativethreejs 中没有问题。但我不知道如何在 r3f 中实现这一点。

我创建了一个加载 3d 文件的组件,但已经在特别努力地引用和动画它们。

r3f 似乎使一切变得如此不必要的复杂。

你能告诉我这里的最佳做法是什么吗?

0 投票
1 回答
269 浏览

javascript - “RectAreaLightHelper”在 React-three-fiber 中不动

简介: 似乎所有其他灯光助手都是通过向我显示屏幕上的位置和旋转来工作的。我了解 rectAreaLight 仅适用于特定材料,现在位于“三个/示例”文件夹中。我用“useHelper”函数调用它,当我改变位置参数时它不会移动。

Codepen: 简单的场景

代码说明:“moon.gltf”模型、背景、rectAreaLight、Helper、样板。RectAreaLightHelper 卡在位置 [0,0,0]。

疑难解答: 我正在使用“react-three-gui”库,删除功能后,“RectLightHelper”仍然没有在场景中移动。

==========================================

问题:如何在“react-three-fiber”场景中正确设置“RectAreaLightHelper”?

==========================================

任何信息或帮助将不胜感激。

0 投票
1 回答
2107 浏览

reactjs - 在 React-three-fiber 中获取对象的本地位置

简报:我正在尝试将“drei Text”元素设置为反应三纤维场景中靠近引脚的球体外部的一个点。这样当球体旋转或相机围绕球体旋转时,Texts 位置将位于球体外侧的中心。

一个例子:three.js 文本对齐

问题:

如何找到对象的局部和世界空间位置或对象的部分/点?

我如何将对象位置设置为子对象的父对象,这样当父对象移动时,子对象也随之移动?

场景是否具有相对于 [0,0,0] 处的轴的世界位置和相对于对象的局部位置?

我的代码沙盒:带位置的地球

0 投票
1 回答
965 浏览

reactjs - 使用 FBX 加载器更改 React 三纤维中的材料

我正在尝试更改我导入的 FBX 文件的材料。我可以轻松更改已附加到我的 FBX 文件的材料的属性,但我无法将材料更改为我预定义的“matAluMedium”。我以前在另一个项目中这样做过,但不知道这次我做错了什么。

希望你能帮忙

0 投票
0 回答
2677 浏览

javascript - 如何在 React-three-fiber 中设置光线投射

我正在尝试在 react-three-fiber 中设置一个场景,该场景使用光线投射器来检测物体是否与其相交。

我的场景:场景

我一直在看这个例子这个其他例子的例子,使用简单的三个对象但不使用分离的组件 jsx“.gltf”网格或它们不在 jsx 中的光线投射器的例子。所以我不确定如何将我的网格组添加到“raycaster.intersectObject();”。

看起来你所做的只是在不同的变量中分别设置你的相机、场景和光线追踪器,但我的相机和场景是 Canvas 组件的一部分。

问题:如何为我的场景添加光线投射支持?这会掩盖球体另一侧的文本。

谢谢!

0 投票
1 回答
2783 浏览

three.js - (react-three-fiber) 我想导入一个 3D 模型,然后在上面加载一个图像

我怎么做?图像加载杯子,然后让用户选择要在其上显示的图像。

与本文类似,https://www.smashingmagazine.com/2020/11/threejs-react-three-fiber/但让我指定图像

0 投票
0 回答
1373 浏览

javascript - React-三纤维光线投射

我正在尝试使用来自相机位置的光线投射来检测与 3d 模型的碰撞。但我不确定如何在 Canvas 中投射光线,或者如何检测与组件 3d 模型的碰撞。

这是我的代码:代码

当文本位于球体的另一侧时,我试图隐藏文本。

任何提示或信息将不胜感激!

地球模型(“.gltf”组网格):

场景:

0 投票
1 回答
243 浏览

reactjs - “vector.project”到相机的标准化屏幕位置?(反应三纤维)

请帮我找到我的 3D 模型的每个 Vector3 的标准化屏幕位置。我尝试使用“vector.project(camera)”方法分别保存投影的屏幕矢量,但它似乎不起作用。我将这些向量用于相机光线投射。

Codesandbox:代码

在此处输入图像描述

0 投票
1 回答
657 浏览

reactjs - 用纹理反应三纤维 Drei 广告牌

我正在使用带有“Drei”的 React Three Fiber,并想使用广告牌。但我只能弄清楚如何改变广告牌的颜色,而不知道如何添加纹理。

我试过这样,但在广告牌上找不到任何文档,也不知道我可以通过什么参数。

在这里,您看到了如何更改颜色,但没有看到如何添加纹理:

https://drei.react-spring.io/?path=/story/abstractions-billboard--billboard-st

希望可以有人帮帮我。

谢谢