Problem: When using three to develop, I want to add image environment textures, etc., but I find that I can’t import them all the time, and I also report errors when using require. There are two solutions here. I’m afraid I’ll forget them, so record them.
1. Error demonstration
The require import is used here, and the error message "require is not defined" is found
const texture = new THREE.TextureLoader().load(require('./img.png'));2. Correctly introduce the first type
1. Put the picture in the assets file path, import it and use it again. Special files such as hdr need to use the second import method
import waterimg from "@/assets/img.jpg";
const texture = new THREE.TextureLoader().load(waterimg );3. Correctly introduce the second
Store the files in the public folder, this is the public folder
Only need / can get the resource file
const texture = new THREE.TextureLoader().load(/model/img.jpg);This is the end of the article, I hope it will be helpful to you