[threejs+vue2 primary question] load texture, remove texture background

foreword

Many threejs projects use native writing, how to port to vue2, the following are two points that need attention

1. The way to load the texture

Native development: const a = new THREE.TextureLoader().load('./mya.png'
Vue development:const texture = new THREE.TextureLoader().load(require("./mytexture.png"));

Vue needs to use the require path to import. If imported according to the original development, there will be a problem: the imported texture is invalid, and it is displayed as a black square.

2. Remove the background from the texture

If the transparent bottom of the png image in the texture is not processed, it will appear white or black, which will affect the visual effect.
method:

1. If you are using PointsMaterial , add depthTest: false,such as:

const material = new THREE.PointsMaterial({
    
    
    size: 5,
    map: texture,//前面引入的
   // transparent: true,
    depthTest: false, //重点
  });

that's it.
2. If it is used SpriteMaterial, the texture can be used directly without the background.

 const material = new THREE.SpriteMaterial({
    
    
    map: texture,//前面引入的
  });

Reference: Three.js loads the texture, and the transparent background image shows that part of the background is black.
Extension: 【Getting Started with Three.js】Texture and its common properties, transparent texture, ambient occlusion map and intensity