Three js implements ball buffer geometry to achieve particle effects

At present, Three.js has a lot of fragmented tutorials on the Internet, but for junior developers, it is like stepping into the threshold of entry, not knowing whether to take the left foot or the right foot first, so I went to try the water first... I found it was not bad, Although it is a bit cloudy, it is relatively simple to understand the internal basic structure, and the examples on the Three.js official website are too high and prohibitive.

First of all, there are detailed tutorials on the Internet and the manual for the configuration of the three js scene, so I won't go into details here. There are two ways to achieve the effect level of the example special effect. The first is to use the ParticleSystem to set the particle special effect, and the other is to set the PointsMaterial to complete the effect display of the property.

The simplest particle system code for the first approach:

// 创建球体模型
let ball = new THREE.SphereGeometry(40, 30, 30);
// 创建粒子材料
let pointsMaterial = new THREE.PointsMaterial({
        // 粒子颜色
        color: 0xffffff,
        // 粒子大小
        size: 2
    });
// 创建粒子系统
let particleSystem = new THREE.ParticleSystem(ball, pointsMaterial);
// 加入场景
scene.add(particleSystem);

The particle system reads the vertices attribute in the model, that is, the position of all vertices, and combines the particle material to create the particle effect. The effect of the above code is as follows; it can be observed that the particle will be displayed as a square shape by default. If you want to modify it, you can build the particle material. Pass in the map attribute, apply a picture or apply the drawing result of the canvas, which will be mentioned later.

The second method to achieve the example special effect is to change the size to achieve the effect. The specific code is as follows:

const SphereGeometry = new THREE.SphereBufferGeometry(3, 20, 30);
const PointsMaterial = new THREE.PointsMaterial();
PointsMaterial.size = 0.01
const points = new THREE.Points(SphereGeometry, PointsMaterial)
scene.add(points)

The effect display of size 0.01:

Three js implements ball buffer geometry to achieve particle effects

Guess you like