1

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

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

4

1 回答 1

0

尝试将纹理图像从 src 或公共文件夹导入组件。然后使用新的 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 模型导入网格、材质、分组、参考和属性。使用此网站将您的 obj 或 fbx 转换为 .gltf/glb。但是这个网站不会像许多 3d 软件那样在文件中“烘焙、附加、集成”你的纹理贴图。

如果是 OBJ，那么就使用这个人的例子：example from code sandbox，它向你展示了如何使用来自三个/examples 的 OBJ 加载器来导入你的 OBJ。

于 2020-11-30T23:14:15.983 回答