国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

記一次雪花效果

stackfing / 1792人閱讀

摘要:效果還行給大家先看一下效果。雪花旋轉效果至于雪花的旋轉我也做了一定的優化活動頁活動頁效果就不細細說了,我就把雪花效果添加進去活動頁。

前言

最近,公司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.碼字不容易,希望大家點個贊。前端路漫漫,與君共勉之。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101304.html

相關文章

  • 一次雪花效果

    摘要:效果還行給大家先看一下效果。雪花旋轉效果至于雪花的旋轉我也做了一定的優化活動頁活動頁效果就不細細說了,我就把雪花效果添加進去活動頁。 showImg(https://segmentfault.com/img/remote/1460000017978555?w=400&h=270); 前言 最近,公司UI小姐姐告訴我能不能做一個關于雪花的效果圖,最好是能體現雪花的遠近感(遠的時候比較小 ...

    NeverSayNever 評論0 收藏0
  • 簡單說 JavaScript實現雪花飄落效果

    摘要:說明這次實現的雪花飄落的效果很簡單,主要是為了練習練習中的定時器,和。簡單說,意思就是用了這個定時器,能把兩次修改樣式的代碼分開執行,可以先把第一次修改的樣式渲染后,在進行第二次的修改,雪花就會動了。 說明 這次實現的雪花飄落的效果很簡單,主要是為了練習練習JavaScript中的定時器,setTimeout 和 setInterval。 效果圖 showImg(https://seg...

    yedf 評論0 收藏0
  • 簡單說 JavaScript實現雪花飄落效果

    摘要:說明這次實現的雪花飄落的效果很簡單,主要是為了練習練習中的定時器,和。簡單說,意思就是用了這個定時器,能把兩次修改樣式的代碼分開執行,可以先把第一次修改的樣式渲染后,在進行第二次的修改,雪花就會動了。 說明 這次實現的雪花飄落的效果很簡單,主要是為了練習練習JavaScript中的定時器,setTimeout 和 setInterval。 效果圖 showImg(https://seg...

    ShowerSun 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<