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);

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

猜你喜欢

转载自blog.csdn.net/qq_44278289/article/details/131230064