【发布时间】：2021-03-11 13:15:11
【问题描述】：
我该怎么做？图片加载杯子，然后让用户选择要在杯子上显示的图片。
类似于本文https://www.smashingmagazine.com/2020/11/threejs-react-three-fiber/，但让我指定图片
【问题讨论】：
标签： three.js react-three-fiber
【发布时间】：2021-03-11 13:15:11
【问题描述】：
尝试将纹理图像从 src 或 public 文件夹导入组件。然后使用新的 THREE.TextureLoader() 与您的网格一起使用。
由于您希望用户能够添加图像，请使用输入类型。将用户的图像保存到状态并使用 new THREE.TextureLoader() 和网格以相同的方式应用它。如果图像是您的，则导入所有图像，将它们全部存储在状态中，并为您的网格创建一个 onClick，将网格上的纹理文件更改为处于该状态的图像。
否则，
如果它是 .gltf 或 .glb 模型，我推荐使用 GLTFJSX npx 命令。只需将您的 3d 模型添加到公共文件夹，cd 进入公共文件夹，安装 @react-three/drei 然后运行 [npx @react-three/gltfjsx "modelname.gltf or .glb" NamedMe.js]。这是将模型导入 WEBGL 的最佳方式，因为 .gltf 文件类型已经过高度优化。当您使用此命令时，它会自动为您的 3d 模型导入网格、材质、分组、参考和属性。使用此website 将您的 obj 或 fbx 转换为 .gltf/glb。但是这个网站不会像许多 3d 软件那样在文件中“烘焙、附加、集成”你的纹理贴图。
如果是 OBJ，那么使用这个人的示例：example from code sandbox，它向您展示了如何使用来自三个/示例的 OBJ 加载器来导入您的 OBJ。
【讨论】：