PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest
Particle animation is a term you probably hear a lot, but what is particle animation?
A particle is the smallest unit of an atom, molecule, etc. In 2D, this smallest unit is a pixel; in 3D, it is a vertex.
Particle animation refers not to the animation of the object itself, but to the animation of these basic units. Because it is an animation of the units that make up the object, it will have the effect of breaking and reassembling.
In this article, we will learn the 3D particle animation to do a blessing effect of stars:
Thought analysis
In the 3D world, objects are made up of vertices, 3 vertices form a triangle, and then attach different textures to the triangle, so as to create a 3D model.
In other words, a 3D model is a Geometry determined by vertices and an object (Mesh, etc.) with different textures attached.
The 3D rendering process is then completed by adding 3D objects to the Scene, setting a Camera Angle to view them, and rendering them frame by frame with the Renderer.
3D objects are made up of vertices, so making these vertices move is particle animation, because the elementary particles move, naturally there will be the effect of breaking and reassembling.
In the “stars send blessings” effect, we break and reassemble the stars to form the character fu, which is actually the vertex of the stars moving to the vertex of the character fu, turning one 3D object into another 3D object.
So where do the peaks of the stars come from? What about the vertex of the word fu?
The vertices of the stars are actually randomly generated points in different positions, and the stars are attached to these points, which is the effect of the stars.
The vertices of the word fu are loaded in a 3D model, parsed out of its vertex data to get.
Given the vertex data of two 3D objects, i.e. the start and end coordinates of the animation, particle animation can be achieved by constantly modifying the x, Y, and Z properties of each vertex.
Do not calculate the change of x, y and z property values here, use some animation libraries to calculate, they support acceleration, deceleration and other time functions. The animation library for three. js is tween.js.
In summary, 3D particle animation is the change of x, Y, and Z properties of vertices, and the animation library is used to calculate the values of the intermediate properties. Moving from the vertex position of one object to the vertex position of another object will have the effect of breaking and reassembling, which is also the charm of particle animation.
So now that we’ve got the idea, let’s actually write down the code.
Code implementation
As mentioned earlier, 3D rendering requires a Scene to manage all 3D objects, a Camera to view from different angles, and frames rendered by a Renderer.
This part is the basic code, so write this part first:
Create a scene:
const scene = new THREE.Scene();
Copy the codeCreating a camera:
const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1.1000);
Copy the codeCameras are divided into perspective cameras and parallel cameras, the perspective cameras we use here, that is, near large and far small perspective effect. To specify the view Angle (45), width/height (0.1 to 1000), and near/far range.
Adjust the camera position and view direction:
camera.position.set(100.0.400);
camera.lookAt(scene.position);
Copy the codeThen there’s the renderer:
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
Copy the codeThe renderer must render frames by requestAnimationFrame:
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
Copy the codeThe preparation work is completed, the next is to draw the starry sky, the word fu these two KINDS of 3D objects, and the realization of particle animation.
Draw the starry sky
The starry sky is not regular geometry such as cube and cylinder, but composed of random vertices. Such arbitrary geometry is created by BufferGeometry.
Why is this arbitrary vertex geometry called buffer geometry?
Because vertices are placed in the buffer before being rendered by the GPU, the geometry that specifies a bunch of vertices is called BufferGeometry.
We create 30,000 random vertices:
const vertices = [];
for ( let i = 0; i < 30000; i ++ ) {
const x = THREE.MathUtils.randFloatSpread( 2000 );
const y = THREE.MathUtils.randFloatSpread( 2000 );
const z = THREE.MathUtils.randFloatSpread( 2000 );
vertices.push( x, y, z );
}
Copy the codeMathUtils, a tool provided by three. js, is used to generate random values from 0 to 2000.
Then create BufferGeometry with these vertices:
const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position'.new THREE.Float32BufferAttribute(vertices, 3));
Copy the codeSets the vertex position of the BufferGeometry object, specifying three values (x, y, and z) as a coordinate.
Then create the Material, the star map, on these vertices:
const star = new THREE.TextureLoader().load('img/star.png');
const material = new THREE.PointsMaterial( { size: 10.map: star });
Copy the codeOnce you have your vertices and materials, you can create 3D objects (in this case Points).
const points = new THREE.Points( geometry, material );
scene.add(points);
Copy the codeTake a look at the render:
Static without 3D feel, let’s turn each frame and change the render logic:
function render() {
renderer.render(scene, camera);
scene.rotation.y += 0.001;
requestAnimationFrame(render);
}
Copy the codeTake a look again:
The feeling of 3D starry sky is there!
Now let’s do particle animation:
3D particle animation
3D particle animation is the animation of vertices, the changes of x, y, and z.
Let’s start with the simplest effect of moving the stars to positions 0,0,0:
The starting point coordinates are the original positions of the stars, obtained by getAttribute(‘position’). The animation process uses tween.js to calculate:
const startPositions = geometry.getAttribute('position');
for(let i = 0; i< startPositions.count; i++) {
const tween = new TWEEN.Tween(positions);
tween.to({
[i * 3] :0,
[i * 3 + 1] :0,
[i * 3 + 2] :0
}, 3000 * Math.random());
tween.easing(TWEEN.Easing.Exponential.In);
tween.delay(3000);
tween.onUpdate(() = > {
startPositions.needsUpdate = true;
});
tween.start();
}
Copy the codeEach point has x, y, and z coordinates, that is, values with subscripts i3, i3+1, and I *3+2, which we specify to move from the starting position of the stars to 0,0,0.
The time function is then specified as acceleration (Easing.exponitation.in) and the animation starts after 3000 ms.
Tween.update is called during each frame rendering to calculate the latest value:
function render() {
TWEEN.update();
renderer.render(scene, camera);
scene.rotation.y += 0.001;
requestAnimationFrame(render);
}
Copy the codeEach frame is drawn using the onUpdate callback, where we set needsUpdate to true to tell Tween.js to update to a new value for the frame.
First particle animation complete!
Take a look at the effect (I call this effect “The Universe”) :
All the star particles come together at one point, which is the typical smashing and reassembling feeling of particle animation.
Next, as long as the particle movement to the vertex of the word “blessing” is what we want to do “stars send blessing” effect.
The vertices of the fu character model cannot be random, and it is not practical to draw them by yourself. Such vertices are usually drawn in modeling software and then imported into three.js to render.
I found a 3D model of the character fu:
The model is in FBX format and loaded using FBXLoader:
const loader = new THREE.FBXLoader();
loader.load('./obj/fu.fbx'.function (object) {
const destPosition = object.children[0].geometry.getAttribute('position');
});
Copy the codeThe callback parameter is the 3D object loaded from the FBX model, which is a Group (a collection of 3D objects), and extracts the geometry properties of the 0th element, which is the corresponding geometry.
So, we have our target vertex position.
Change the ending position of the particle animation to the vertex of the word “fu” :
const cur = i % destPosition.count;
tween.to({
[i * 3]: destPosition.array[cur * 3],
[i * 3 + 1]: destPosition.array[(cur * 3 + 1)],
[i * 3 + 2]: destPosition.array[(cur * 3 + 2)]},3000 * Math.random());
Copy the codeIf you start with a lot of vertices, you start at zero, so you have to do the mod.
And you’re done!
This is the particle effect we want:
The full code is uploaded to github: github.com/QuarkGluonP…
conclusion
Particle animation is the motion of the basic units that make up the object, which in 3D is the motion of the vertices.
We want to achieve the particle animation of “blessing from the stars”, that is, from the vertex of the stars to the vertex of the word “blessing”.
The vertices of the stars can be generated randomly, using BufferGeometry to create the corresponding geometry. “Fu” is to load the created 3D model and get the vertex position in it.
With the start and end positions, particle animation can be realized. The x, y and z values in the process can be calculated using the animation library Tween.js, and time functions such as acceleration and deceleration can be specified.
Particle animation has a smashing and reassembling feel that can be used for a lot of cool effects. Understand what is particle animation, what is moving in particle animation, it is a preliminary grasp.
I picked all the stars, to give you a blessing. With this 3D particle animation, I wish everyone a happy Spring Festival in advance