HTML5 canvas粒子系统制作逼真飘雪效果
当前位置： >
> HTML5 canvas粒子系统制作逼真飘雪效果
这是一款效果非常炫和逼真的HTML5 canvas飘雪效果。该飘雪效果使用canvas的粒子系统来制作，使用粒子来制作各种雪花效果。它的背景使用CSS来渲染，你可以为这个下雪效果更换背景颜色或使用背景图片。
浏览器兼容性
小编推荐：
这是一款效果非常炫和逼真的飘雪效果。该飘雪效果使用canvas的粒子系统来制作，使用粒子来制作各种雪花效果。它的背景使用CSS来渲染，你可以为这个下雪效果更换背景颜色或使用背景图片。
该飘雪效果的HTML结构就是一个&canvas&元素。
&canvas id="canvas"&&/canvas&
我们可以通过CSS来自己设定该下雪效果的背景：
* {margin: 0; padding: 0;}
/*You can use any kind of background here.*/
background: #6b92b9;
雪花和雪花的飘落效果都在js中完成，首先设置飘雪场景的尺寸大小，这里使用的是整个屏幕的宽度和高度。
//canvas init
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//canvas dimensions
var W = window.innerW
var H = window.innerH
canvas.width = W;
canvas.height = H;
接着初始化雪花的粒子系统，设定每次屏幕上显示的最大粒子数mp，然后创建一个对象数组作为粒子系统，每个粒子都作为一个对象保存在这个数组中。每一个粒子都有x、y坐标，半径和密度等属性值。
//snowflake particles
var mp = 25; //max particles
var particles = [];
for(var i = 0; i < i++)
particles.push({
x: Math.random()*W, //x-coordinate
y: Math.random()*H, //y-coordinate
r: Math.random()*4+1, //radius
d: Math.random()*mp //density
绘制雪花的工作有draw()函数完成：
function draw()
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
ctx.beginPath();
for(var i = 0; i < i++)
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
ctx.fill();
update()函数是用于制作雪花飘落效果的。雪花飘落的角度是一个持续增加的增量，在它上面使用Sin和cos函数来制作水平和垂直的移动。在更新雪花的X、Y坐标时，Y坐标在cos函数的值只会加1，是为了防止出现负数值，同时为每一个雪花粒子设定它们的密度值，使它们的下落速度各不相同。最后，在雪花粒子离开屏幕之后，使它们重新返回到初始飘落位置上。
//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update()
angle += 0.01;
for(var i = 0; i & i++)
var p = particles[i];
//Updating X and Y coordinates
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
//Every particle has its own density which can be used to make the downward movement different for each flake
//Lets make it more random by adding in the radius
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;
//Sending flakes back from the top when it exits
//Lets make it a bit more organic and let flakes enter from the left and right also.
if(p.x > W+5 || p.x & -5 || p.y > H)
if(i%3 > 0) //66.67% of the flakes
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
//If the flake is exitting from the right
if(Math.sin(angle) > 0)
//Enter from the left
particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
//Enter from the right
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ
html5+three.js三维空间粒子旋转动画特效
所需积分：10
亲，积分不够，多去发布资源、评论、签到、
或联系QQ人工充值
亲，vip会员下载原创作品 积分5 折，其余免积分下载
PS:尊重原创作者劳动成果，感谢分享！
充值方式： 或联系QQ人工充值>> Canvas 实现炫丽的粒子运动效果（粒子生成文字）
没有最好，只有更好，如题所示，这篇文章只要是分享一个用 Canvas 来实现的粒子运动效果。感觉有点标题党了，但换个角度，勉勉强强算是炫丽吧，虽然色彩上与炫丽无关，但运动效果上还是算得上有点点炫的。不管怎么样，我们还是开始这个所谓的炫丽效果吧！
直接上代码 ，不懂可以看代码注释。估计就会看明白大概的思路了。
HTML代码 （html+css+js）
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Canvas 实现炫丽的粒子运动效果-云库前端&/title&
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #000;
body::-webkit-scrollbar{
.operator-box{
left: 50%;
border: 1px solid #
background: rgba(255,255,255,0.5);
padding: 20px 10
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
.back-type,.back-animate{
margin-right: 20
.flex-box{
justify-content:
align-items:
#input-text{
line-height: 35
width: 260
height: 35
background: rgba(0, 0, 0,0.7);
font-size: 16
text-indent: 12
box-shadow: inset 0 0 12px 1px rgba(0,0,0,0.7);
#input-text::placeholder{
line-height: 55
height: 55
-webkit-appearance:
-moz-appearance:
appearance:
padding: 0px 20px 0px 6
height: 35
text-align:
background: rgba(0, 0, 0,0.7) url(data:image/base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAYAAAAx8TU7AAAAOUlEQ…R4gPgWEIMAiOYBCS4C8ZDAIrBq4gigNkztQEFMi6AuQHESAPMeXiEMiWfpAAAAAElFTkSuQmCC) no-repeat 190px 12
background-size: 5px 8
box-shadow: inset 0 0 12px 1px rgba(0,0,0,0.7);
&div class="operator-box"&
&div class="flex-box"&
&div class="back-type"&散开类型：
&select name="" id="selectType"&
&option value="back"&归位&/option&
&option value="auto"&随机&/option&
&div class="back-animate"&散开效果（对归位有效）：
&select class="back-dynamics" id="selectDynamics"&
&option value="spring"&dynamics.spring&/option&
&option value="bounce"&dynamics.bounce&/option&
&option value="forceWithGravity"&dynamics.forceWithGravity&/option&
&option value="gravity"&dynamics.gravity&/option&
&option value="easeInOut"&dynamics.easeInOut&/option&
&option value="easeIn"&dynamics.easeIn&/option&
&option value="easeOut"&dynamics.easeOut&/option&
&option value="linear"&dynamics.linear&/option&
&div class="input-box"&&input type="text" placeholder="输入汉字后回车" id="input-text"&&/div&
&script src="dynamics.min.js"&&/script&
&script src="index.js"&&/script&
var iCircle = new Circle();
HTML 代码不多，只要是几个操作元素。这里一看就明白。不费过多口舌。我们来看看本文的主角 JavaScript 代码，不过，在看代码前，我们不妨先听听实现这个效果的思路：
首先，我们得先生成一堆群众演员（粒子）；
把每个粒子的相关参数挂到自身的一些属性上，因为第个粒子都会有自己的运动轨迹；
接着得让它们各自运动起来。运动有两种（自由运动和生成文字的运动）；
JavaScript 代码中使用了三个 Canvas 画布，this.iCanvas（主场）、this.iCanvasCalculate（用来计算文字宽度）、this.iCanvasPixel（用于画出文字，并从中得到文字对应的像素点的位置坐标）。
this.iCanvasCalculate 和 this.iCanvasPixel 这两个无需在页面中显示出来，只是辅助作用。
美美的 JavaScript 代码
* @Author: 朝夕熊
* @Last Modified by:
* @Last Modified time:
function Circle() {
var This =
this.init();
this.generalRandomParam();
this.drawCircles();
this.ballAnimate();
this.getUserText();
// 窗口改变大小后，生计算并获取画面
window.onresize = function(){
This.stateW = document.body.offsetW
This.stateH = document.body.offsetH
This.iCanvasW = This.iCanvas.width = This.stateW;
This.iCanvasH = This.iCanvas.height = This.stateH;
This.ctx = This.iCanvas.getContext("2d");
Circle.prototype.init = function(){
//父元素宽高
this.stateW = document.body.offsetW
this.stateH = document.body.offsetH
this.iCanvas = document.createElement("canvas");
// 设置Canvas 与父元素同宽高
this.iCanvasW = this.iCanvas.width = this.stateW;
this.iCanvasH = this.iCanvas.height = this.stateH;
// 获取 2d 绘画环境
this.ctx = this.iCanvas.getContext("2d");
// 插入到 body 元素中
document.body.appendChild(this.iCanvas);
this.iCanvasCalculate = document.createElement("canvas");
// 用于保存计算文字宽度的画布
this.mCtx =
this.iCanvasCalculate.getContext("2d");
this.mCtx.font = "128px 微软雅黑";
this.iCanvasPixel = document.createElement("canvas");
this.iCanvasPixel.setAttribute("style","position:top:0;left:0;");
this.pCtx = // 用于绘画文字的画布
// 随机生成圆的数量
this.ballNumber = ramdomNumber();
// 保存所有小球的数组
this.balls = [];
// 保存动画中最后一个停止运动的小球
this.animte =
this.imageData =
this.textWidth = 0; // 保存生成文字的宽度
this.textHeight = 150; // 保存生成文字的高度
this.inputText = ""; // 保存用户输入的内容
this.actionCount = 0;
this.ballActor = []; // 保存生成文字的粒子
this.actorNumber = 0; // 保存生成文字的粒子数量
this.backType = "back"; // 归位
this.backDynamics = ""; // 动画效果
this.isPlay = // 标识（在生成文字过程中，不能再生成）
// 渲染出所有圆
Circle.prototype.drawCircles = function () {
for(var i=0;i&this.ballNi++){
this.renderBall(this.balls[0]);
// 获取用户输入文字
Circle.prototype.getUserText = function(){
This = // 保存 this 指向
ipu = document.getElementById("input-text");
ipu.addEventListener("keydown",function(event){
if(event.which === 13){ // 如果是回车键
ipu.value = ipu.value.trim(); // 去头尾空格
var pat = /[\u4e00-\u9fa5]/; // 中文判断
var isChinese = pat.test(ipu.value);
if(ipu.value.length !=0 && isChinese){
This.inputText = ipu.
alert("请输入汉字");
if(This.isPlay){
This.getAnimateType();
This.getTextPixel();
This.isPlay =
// 计算文字的宽
Circle.prototype.calculateTextWidth = function () {
this.textWidth = this.mCtx.measureText(this.inputText).
// 获取文字像素点
Circle.prototype.getTextPixel = function () {
if(this.pCtx){
this.pCtx.clearRect(0,0,this.textWidth,this.textHeight);
this.calculateTextWidth(this.inputText);
this.iCanvasPixel.width = this.textW
this.iCanvasPixel.height = this.textH
this.pCtx =
this.iCanvasPixel.getContext("2d");
this.pCtx.font = "128px 微软雅黑";
this.pCtx.fillStyle = "#FF0000";
this.pCtx.textBaseline = "botom";
this.pCtx.fillText(this.inputText,0,110);
this.imageData = this.pCtx.getImageData(0,0,this.textWidth,this.textHeight).
this.getTextPixelPosition(this.textWidth,this.textHeight);
// 获取文字粒子像素点位置
Circle.prototype.getTextPixelPosition = function (width,height) {
var left = (this.iCanvasW - width)/2;
var top = (this.iCanvasH - height)/2;
var space = 4;
this.actionCount = 0;
for(var i=0;i&this.textHi+=space){
for(var j=0;j&this.textWj+=space){
var index = j*space+i*this.textWidth*4;
if(this.imageData[index] == 255){
if(this.actionCount&this.ballNumber){
this.balls[this.actionCount].status = 1;
this.balls[this.actionCount].targetX = left+j;
this.balls[this.actionCount].targetY = top+i;
this.balls[this.actionCount].backX = this.balls[this.actionCount].x;
this.balls[this.actionCount].backY = this.balls[this.actionCount].y;
this.ballActor.push(this.balls[this.actionCount]);
this.actionCount++;
this.actorNumber = this.ballActor.
this.animateToText();
// 粒子运动到指定位置
Circle.prototype.animateToText = function(){
for(var i=0;i&This.actorNi++){
dynamics.animate(This.ballActor[i], {
x: this.ballActor[i].targetX,
y: this.ballActor[i].targetY
type: dynamics.easeIn,
duration: 1024,
setTimeout(function(){
This.ballbackType();
// 粒子原路返回
Circle.prototype.ballBackPosition = function(){
for(var i=0;i&This.actorNi++){
var ball = This.ballActor[i];
dynamics.animate(ball, {
x: ball.backX,
y: ball.backY
type: dynamics[this.backDynamics],
duration: 991,
complete:this.changeStatus(ball)
// 获取类型|动画效果
Circle.prototype.getAnimateType = function() {
var selectType = document.getElementById("selectType");
var selectDynamics = document.getElementById("selectDynamics");
this.backType = selectType.options[selectType.options.selectedIndex].
this.backDynamics = selectDynamics.options[selectDynamics.options.selectedIndex].
// 复位散开
Circle.prototype.ballbackType = function(){
if(this.backType == "back"){
this.ballBackPosition();
this.ballAutoPosition();
this.ballActor = [];
// 随机散开
Circle.prototype.ballAutoPosition = function(ball){
for(var i=0;i&this.actorNi++){
this.changeStatus(this.ballActor[i])
// 更改小球状态
Circle.prototype.changeStatus = function(ball){
ball.status = 0;
if(this.isPlay == true){
this.isPlay =
// 随机生成每个圆的相关参数
Circle.prototype.generalRandomParam = function(){
for(var i=0;i&this.ballNi++){
var ball = {};
ball.size = 1; // 随机生成圆半径
// 随机生成圆心 x 坐标
ball.x = ramdomNumber(0+ball.size, this.iCanvasW-ball.size);
ball.y = ramdomNumber(0+ball.size, this.iCanvasH-ball.size);
ball.speedX = ramdomNumber(-1, 1);
ball.speedY = ramdomNumber(-1, 1);
this.balls.push(ball);
ball.status = 0;
ball.targetX = 0;
ball.targetY = 0;
ball.backX = 0;
ball.backY = 0;
// 改变圆的位置
Circle.prototype.changeposition = function(){
for(var i=0;i&this.ballNi++){
if( this.balls[i].status == 0){
this.balls[i].x += this.balls[i].speedX;
this.balls[i].y += this.balls[i].speedY;
Circle.prototype.renderBall = function(ball){
this.ctx.fillStyle = "#fff";
this.ctx.beginPath(); // 这个一定要加
this.ctx.arc(ball.x, ball.y, ball.size, 0, 2 * Math.PI);
this.ctx.closePath(); // 这个一定要加
this.ctx.fill();
// 小球碰撞判断
Circle.prototype.collision = function(ball){
for(var i=0;i&this.ballNi++){
if(ball.x&this.iCanvasW-ball.size || ball.x&ball.size){
if(ball.x&this.iCanvasW-ball.size){
ball.x = this.iCanvasW-ball.
ball.x = ball.
ball.speedX = - ball.speedX;
if(ball.y&this.iCanvasH-ball.size || ball.y&ball.size){
if(ball.y&this.iCanvasH-ball.size){
ball.y = this.iCanvasH-ball.
ball.y = ball.
ball.speedY = - ball.speedY;
// 开始动画
Circle.prototype.ballAnimate = function(){
var This =
var animateFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationF
(function move(){
animte = animateFrame(move);
This.ctx.clearRect(0, 0, This.iCanvasW, This.iCanvasH);
This.changeposition();
for(var i=0;i&This.ballNi++){
This.collision(This.balls[i]);
This.renderBall(This.balls[i]);
// 生成一个随机数
function ramdomNumber(min, max) {
return Math.random() * (max - min) +
看了代码估计也只是心里炫了一下，也没有让你想把这个东西做出来的欲望，为此我知道必需得让你眼睛心服口服才行。在线 DEMO：。
人无完人，代码也一样。看起来运行顺畅的代码也或多或少有一些瑕疵，日前这个效果还只支持中文。英文的话，我得再努力一把，不管怎么样，英文后面肯定是会加入来的，只是时间问题了。还有代码中用于标记是否可再次执行生成文字的 属性：this.isPlay ，还是一点瑕疵，this.isPlay 的状态更改没有准确的在粒子归位的那一瞬间更改，而是提前更改了状态。但这个状态不会影响本例子效果的完整实现。
这个例子中用到了 dynamics.js 库，主要是用到它里面的一些运动函数，让粒子动起来更感人一些，仅此而已。
微信扫一扫，赏我
支付宝扫一扫，赏我
原创文章，不经本站同意，不得以任何形式转载，如有不便，请多多包涵！
本文永久链接：Three.js使用canvas样式化粒子（代码实例）
使用canvas样式化粒子，那么我们首先需要先绘制一个canvas画布的纹理。比如：
这是教程使用canvas绘制的吃豆人里面的一个小怪物，而我们今天要实现的就是，使用它来样式化粒子。
通过上一节的代码，我们再扩展一下，首先需要获取到canvas对象，通过canvas对象生成可以供粒子使用的THREE.Texture对象。 然后，将纹理对象赋值给THREE.PointsMaterial的map属性，按照上一节的代码继续往下写，就发现，实现了当前的效果。
成千上万的五颜六色的小怪物，恐怖感油然而生！
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Title&/title&
&style type=&text/css&&
html, body {
margin: 0;
height: 100%;
&body onload=&draw();&&
&script src=&https://johnson2heng.github.io/three.js-demo/lib/three.js&&&/script&
&script src=&https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js&&&/script&
&script src=&https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js&&&/script&
&script src=&https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js&&&/script&
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor(new THREE.Color(0xffffff)); //设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(20, 0, 100);
function initScene() {
scene = new THREE.Scene();
function initLight() {
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
function initModel() {
//轴辅助 （每一个轴的长度）
var object = new THREE.AxesHelper(500);
scene.add(object);
//随机生成颜色
function randomColor() {
var arrHex = [&0&, &1&, &2&, &3&, &4&, &5&, &6&, &7&, &8&, &9&, &a&, &b&, &c&, &d&, &e&, &f&],
strHex = &0x&,
for (var i = 0; i & 6; i++) {
index = Math.round(Math.random() * 15);
strHex += arrHex[index];
return strH
//初始化性能插件
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( &#39;change&#39;, render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping =
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom =
//是否自动旋转
controls.autoRotate =
//设置相机距离原点的最远距离
controls.minDistance = 20;
//设置相机距离原点的最远距离
controls.maxDistance = 10000;
//是否开启右键拖拽
controls.enablePan =
//生成gui设置配置项
//生成纹理图形
function getTexture() {
var canvas = document.createElement(&#39;canvas&#39;);
canvas.width = 32;
canvas.height = 32;
var ctx = canvas.getContext(&#39;2d&#39;);
// 绘制身体
ctx.translate(-81, -84);
ctx.fillStyle = &orange&;
ctx.beginPath();
ctx.moveTo(83, 116);
ctx.lineTo(83, 102);
ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
ctx.lineTo(111, 116);
ctx.lineTo(106.333, 111.333);
ctx.lineTo(101.666, 116);
ctx.lineTo(97, 111.333);
ctx.lineTo(92.333, 116);
ctx.lineTo(87.666, 111.333);
ctx.lineTo(83, 116);
ctx.fill();
// 绘制眼睛
ctx.fillStyle = &white&;
ctx.beginPath();
ctx.moveTo(91, 96);
ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
ctx.moveTo(103, 96);
ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
ctx.fill();
// 绘制眼球
ctx.fillStyle = &blue&;
ctx.beginPath();
ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
ctx.fill();
var texture = new THREE.Texture(canvas);
texture.needsUpdate =
function initGui() {
//声明一个保存需求修改的相关数据的对象
&size&: 4,
&transparent&: true,
&opacity&: 0.6,
&vertexColors&: true,
&color&: 0xffffff,
&sizeAttenuation&: true,
&rotateSystem&: true,
redraw: function () {
if (cloud) {
scene.remove(cloud);
createParticles(gui.size, gui.transparent, gui.opacity, gui.vertexColors, gui.sizeAttenuation, gui.color);
//设置是否自动旋转
controls.autoRotate = gui.rotateS
var datGui = new dat.GUI();
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）gui.add(controls, &#39;size&#39;, 0, 10).onChange(controls.redraw);
datGui.add(gui, &#39;transparent&#39;).onChange(gui.redraw);
datGui.add(gui, &#39;opacity&#39;, 0, 1).onChange(gui.redraw);
datGui.add(gui, &#39;vertexColors&#39;).onChange(gui.redraw);
datGui.addColor(gui, &#39;color&#39;).onChange(gui.redraw);
datGui.add(gui, &#39;sizeAttenuation&#39;).onChange(gui.redraw);
datGui.add(gui, &#39;rotateSystem&#39;).onChange(gui.redraw);
gui.redraw();
//生成粒子的方法
function createParticles(size, transparent, opacity, vertexColors, sizeAttenuation, color) {
//存放粒子数据的网格
var geom = new THREE.Geometry();
//样式化粒子的THREE.PointCloudMaterial材质
var material = new THREE.PointsMaterial({
size: size,
transparent: transparent,
opacity: opacity,
vertexColors: vertexColors,
sizeAttenuation: sizeAttenuation,
color: color,
map:getTexture(),
depthTest: false
//设置解决透明度有问题的情况
var range = 500;
for (var i = 0; i & 15000; i++) {
var particle = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range - range / 2, Math.random() * range - range / 2);
geom.vertices.push(particle);
var color = new THREE.Color(+randomColor());
//.setHSL ( h, s, l ) h & 色调值在0.0和1.0之间 s & 饱和值在0.0和1.0之间 l & 亮度值在0.0和1.0之间。 使用HSL设置颜色。
//随机当前每个粒子的亮度
//color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l);
geom.colors.push(color);
//生成模型，添加到场景当中
cloud = new THREE.Points(geom, material);
scene.add(cloud);
function render() {
renderer.render(scene, camera);
//窗口变动触发的函数
function onWindowResize() {
camera.ect = window.innerWidth / window.innerH
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
function animate() {
//更新控制器
controls.update();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
initGui();
animate();
window.onresize = onWindowR}