Before I saw the effect of a foreign small brother website, I learned to use a particle effect of three.js, relatively simple but great effect, quickly learn ~
Results the preview
Click preview
A couple of important points
Get picture point data
The data of points is obtained through the getImageData() method, and the result is a string of Uint8ClampedArray data and image width and height.
The data in imageData.data represents a point every four numbers.
Get the point where R channel >0 and set the (x,y,z) coordinates and RGB color of the point using imageData.
Animate by moving the camera position
The effect of the initial animation and the drag animation are determined by the position of the camera. In the initial state, the camera is placed at (0, -40, 4), which is the point where the image will be viewed from an upward Angle, and then the points are scattered.
When rendering, let the camera gradually return to (0,0,4), facing the negative z-axis, so that the image looks flat and complete. Same thing with drag and drop.
The picture material
Let’s pull the picture of the little brother into Photoshop and have a look. From this photo, we can see that there are fewer points suitable for color on the image, so that the effect will be more natural. (It can be seen from PS that the points in the red channel are basically consistent with the points in the image, so it is OK to choose R channel >0 above)
Just find a picture of a big guy to try the effect, because of the color of the clothes, the overall color point is still more, the effect is not as natural as the original example, but the effect is still handsome. Click preview
