three.js 点材质(PointsMaterial)

版权声明：本文为作者的原创文章，未经允许不得转载。 https://blog.csdn.net/lin5165352/article/details/82911114

three.js 点材质(PointsMaterial)

var starsGeometry = new THREE.Geometry();

for ( var i = 0; i < 10000; i ++ ) {
	var star = new THREE.Vector3();
	star.x = THREE.Math.randFloatSpread( 2000 );
	star.y = THREE.Math.randFloatSpread( 2000 );
	star.z = THREE.Math.randFloatSpread( 2000 );
	starsGeometry.vertices.push( star );
}
var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } );
var starField = new THREE.Points( starsGeometry, starsMaterial );
scene.add( starField );

在给点云使用图像材质的时候遇到一个问题，在场景缩放到一定的时候，发现点云消失。排查了一下原来是图片的问题，比如图片的分辨率是16*16，那么场景缩小到一定的时候就看不到了。把图片换成32*32的就可以了。如果缩放后还会消失，就再加大图片分辨率。
下面的代码是生成一圈点云。
.alphaTest 设置运行alphaTest时要使用的alpha值。如果不透明度低于此值，则不会渲染材质。默认值为0。

var sprite = new THREE.TextureLoader().load( './img/disc1.png' );
var sGeometry = new THREE.BufferGeometry();
sPositions = [];
var radian = Math.PI / (18 * num);
var sMaterial = new THREE.PointsMaterial({
            size: 0.5,
            transparent: true,
            color: pcolor,
            alphaTest: 0.5,
            map:sprite
            });
for (var i = 0; i < 36 * num; i+=3) {
	sPositions[i] = r * Math.sin(radian * i);
	sPositions[i+1] = 0;
	sPositions[i+2] = r * Math.cos(radian * i);                
                }            
    sGeometry.addAttribute('position', new THREE.Float32BufferAttribute(sPositions, 3));
    sGeometry.computeBoundingSphere();
    var orbit = new THREE.Points(sGeometry, sMaterial);
	scene.add(orbit);