【threejs+vue2初级问题】加载纹理、去掉纹理的背景

前言

很多threejs项目都是使用原生写法的，如何移植到vue2中，下面是两个需要注意的地方

1.加载纹理的方式

原生开发： const a = new THREE.TextureLoader().load('./mya.png'
vue开发：const texture = new THREE.TextureLoader().load(require("./mytexture.png"));

vue中需要使用require路径引入。如果按照原生开发的引入，则出现问题：引入纹理无效，显示为黑色方块。

2.去掉纹理中的背景

纹理中png图片的透明底，如果不处理，则显示为白色或者黑色，影响视觉效果。
方法：

1. 如果使用的是PointsMaterial，创建材质的时候增加depthTest: false,如：

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

这样就可以了。
2. 如果是使用SpriteMaterial，可以直接使用纹理，不会出现背景。

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

参考：three.js加载纹理，透明背景图片显示出来部分背景是黑色
扩展：【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度