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

Lana学习中

已于 2023-07-12 07:50:28 修改

阅读量515

点赞数

分类专栏： threejs 文章标签： vue.js threejs

于 2023-05-28 08:02:20 首次发布

本文链接：https://blog.youkuaiyun.com/sinat_41838682/article/details/130909050

版权

threejs 专栏收录该内容

3 篇文章

订阅专栏

在将threejs项目迁移到Vue2时，需要注意纹理的加载方式需使用`require`引入，否则可能出现纹理无效的问题。对于透明背景的PNG图片，使用PointsMaterial时需设置`depthTest:false`以去除背景；而使用SpriteMaterial则直接支持透明背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

很多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图片的透明底，如果不处理，则显示为白色或者黑色，影响视觉效果。
方法：

如果使用的是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入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度