Vue3 THREE.TextureLoader()加载图片失败

问题：使用three开发的时候，想要添加图片环境纹理这些，结果发现一直引入不进去，使用require也报错，这边有俩种解决方法，怕忘记，记录一下

1.错误示范

这边使用了require导入，发现报错信息“require is not defined”

   const texture = new THREE.TextureLoader().load(require('./img.png'));

2.正确引入第一种

1.把图片放在assets文件路径中，导入再使用即可实现，hdr等特殊文件需要使用第二种引入方式

import waterimg from "@/assets/img.jpg";

const texture = new THREE.TextureLoader().load(waterimg );

3.正确引入第二种

把文件存放在public文件夹下，这个是公共的文件夹

只需要/就可以获取到资源文件

 const texture = new THREE.TextureLoader().load(/model/img.jpg);

 文章到此结束希望对你有所帮助