记一次雪花效果

NeverSayNever 发布于2019-08-30 15:55 / 836人阅读

摘要：效果还行给大家先看一下效果。雪花旋转效果至于雪花的旋转我也做了一定的优化活动页活动页效果就不细细说了，我就把雪花效果添加进去活动页。

前言

最近，公司UI小姐姐告诉我能不能做一个关于雪花的效果图，最好是能体现雪花的远近感（远的时候比较小近的时候雪花比较大），我寻思良久，一开始用canvas做了一个雪花效果感觉不是很满意，然后就该用了three.js做了一个关于雪花的效果。效果还行给大家先看一下效果。

1：准备工作

为了能够显示任何带有three.js的东西，我们需要三件事：场景，相机和渲染器，这样我们就可以用相机渲染场景
代码：

function init() {
  container = document.createElement("div");
  container.className = "snow";
    document.body.appendChild(container);
    camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 ); //透视投影相机
    camera.position.z = 1000;
    scene = new THREE.Scene();
    scene.add(camera);
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    // console.log(SCREEN_WIDTH, SCREEN_HEIGHT);
    var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );

2:随机生成不同位置一定数量的雪花

for (var i = 0; i < 200; i++) {
        particle = new Particle3D( material);
        particle.position.x = Math.random() * 2000 - 1000;
        particle.position.y = Math.random() * 2000 - 1000;
        particle.position.z = Math.random() * 2000 - 1000;
        particle.scale.x = particle.scale.y =  1;
        scene.add( particle );
        particles.push(particle); 
    }

进行雪花位置优化

for(var i = 0; i < particles.length; i++)
    {
        var particle = particles[i]; 
        particle.updatePhysics(); 
        with(particle.position)
        {
            if(y < -1000) y += 2000; 
            if(x > 1000) x -= 2000; 
            else if(x <- 1000) x += 2000; 
            if(z > 1000) z -= 2000; 
            else if(z <- 1000) z += 2000; 
        }
    }

3:雪花远小近大的效果

雪花的远小近大的效果是通过改变相机的位置来的

    camera.position.x += (mouseX - camera.position.x ) * 0.05;
    camera.position.y += (- mouseY - camera.position.y ) * 0.05;
    camera.lookAt(scene.position); 
    renderer.render( scene, camera );

4:雪花的自由下落

这里是利用了gravity重力，让他下落的，我们也可以通过改变它的大小来改变速度。

Particle3D = function(material){
    THREE.Particle.call(this,material);
    this.velocity = new THREE.Vector3(0,-8,0);
    this.velocity.rotateX(randomRange(-45,45));
    this.velocity.rotateY(randomRange(0,360));
    this.gravity = new THREE.Vector3(0,0,0);
    this.drag=1;
};
Particle3D.prototype = new THREE.Particle();
Particle3D.prototype.constructor = Particle3D;
Particle3D.prototype.updatePhysics = function(){
    this.velocity.multiplyScalar(this.drag);
    this.velocity.addSelf(this.gravity);
    this.position.addSelf(this.velocity);
}

5:雪花旋转效果

至于雪花的旋转我也做了一定的优化

THREE.Vector3.prototype.rotateY=function(angle){
    cosRY = Math.cos(angle * Math.PI/180);
    sinRY = Math.sin(angle * Math.PI/180);
    var tempz = this.z;;
    var tempx = this.x;
    this.x = (tempx * cosRY) + (tempz * sinRY);
    this.z = (tempx * -sinRY) + (tempz * cosRY);
}

活动页

活动页效果就不细细说了，我就把雪花效果添加进去活动页。使用pointer-events:none,表示它将捕获不到任何点击，而只是让事件穿透到它的下面。

 .snow {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        transform: translate3d(0, 0, 0);
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

其他

这个活动页还有一个问题，就是按住屏幕（往下轻滑），雪就卡住了一小会希望有大佬来帮我解决这个问题。鄙人不胜感激。

总结

作为一个即将毕业的大四学生，这是我来公司实习做的第一个活动页，希望可以帮助大家，互相学习，一起进步。当然也有一些不足之处，请大家多多指教。如果大家有什么好的想法的话可以联系我的qq:137032979.码字不容易，希望大家点个赞。前端路漫漫，与君共勉之。

私有云专线服务记一次在阿里云搭建服务器记一次阿里云服务器集体中毒多彩雪花雪花vps

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117296.html

记一次雪花效果

摘要：效果还行给大家先看一下效果。雪花旋转效果至于雪花的旋转我也做了一定的优化活动页活动页效果就不细细说了，我就把雪花效果添加进去活动页。 showImg(https://segmentfault.com/img/remote/1460000017978555?w=400&h=270); 前言最近，公司UI小姐姐告诉我能不能做一个关于雪花的效果图，最好是能体现雪花的远近感（远的时候比较小 ...

stackfing 2019-08-23 14:53 评论0 收藏0
记一次雪花效果

摘要：效果还行给大家先看一下效果。雪花旋转效果至于雪花的旋转我也做了一定的优化活动页活动页效果就不细细说了，我就把雪花效果添加进去活动页。 showImg(https://segmentfault.com/img/remote/1460000017978555?w=400&h=270); 前言最近，公司UI小姐姐告诉我能不能做一个关于雪花的效果图，最好是能体现雪花的远近感（远的时候比较小 ...

xzavier 2019-08-05 16:05 评论0 收藏0
简单说 JavaScript实现雪花飘落效果

摘要：说明这次实现的雪花飘落的效果很简单，主要是为了练习练习中的定时器，和。简单说，意思就是用了这个定时器，能把两次修改样式的代码分开执行，可以先把第一次修改的样式渲染后，在进行第二次的修改，雪花就会动了。说明这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。效果图 showImg(https://seg...

yedf 2019-08-29 13:54 评论0 收藏0
简单说 JavaScript实现雪花飘落效果

摘要：说明这次实现的雪花飘落的效果很简单，主要是为了练习练习中的定时器，和。简单说，意思就是用了这个定时器，能把两次修改样式的代码分开执行，可以先把第一次修改的样式渲染后，在进行第二次的修改，雪花就会动了。说明这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。效果图 showImg(https://seg...

ShowerSun 2019-08-21 17:51 评论0 收藏0
canvas离屏、旋转效果实践——旋转的雪花

摘要：另外这里循环中用到了的旋转效果，所以我们可以很轻易的画出条有角度的线。效果见文章开头的效果展示链接效果展示理论基础——常见的canvas优化——模糊问题、旋转效果用离屏canvas画基础部分 1、封装画线函数 function drawLine(ctx,x1,y1,x2,y2,color){ ctx.save(); ctx.beginPath(); ctx.stroke...

546669204 2019-08-05 11:16 评论0 收藏0