three.js的PointsMaterial渲染问题

263 阅读1分钟

记录一下搞了一天的一个问题,现在也还不知道正确的写法应该是什么

因为在国内几个平台上找了一遍,发现大多数关于three.js的学习文章

大家的代码都特么是一样的

严重怀疑大家是不是都是看的同一个视频敲的代码

真是离谱他妈给离谱开门了~

遇到的问题是,当我在three.js的0.162.0版本下代码渲染出来了奇奇怪怪的结果

但是切换到0.137.5版本下就出来了我想要的结果

先上代码

const pointsMaterial = new THREE.PointsMaterial(); pointsMaterial.size = 0.1;
pointsMaterial.color.set(0xfff000); 
const textureLoader = new THREE.TextureLoader(); 
const texture = textureLoader.load("./textures/particles/1.png", event.onLoad); 
pointsMaterial.map = texture; 
const points = new THREE.Points(sphereGeometry, pointsMaterial); 
scene.add(points);

在0.162.0中出来长这样:

image.png

0.137.5版本中长这样(也就是我想要的结果)

image.png

找了半天官方文档也看了,AI也问了

我还是没找到在新版本下要怎么写

才能得到我想要的结果

是新版本中有什么属性要配置吗?????

而且后面通过对比我配置的texture纹理图

我发现新版本下的map整上去

好像是改变了整个渲染的样式

而不是改变单个点的样式

也不知道能不能蹲到一位友友来给我解答一下疑惑

万分感谢!!!!!!!!

image.png

image.png

在官方论坛得到了一个解决方案, 在代码中加上

sphereGeometry.deleteAttribute("uv");