記一次雪花效果
前言
最近,公司UI小姐姐告訴我能不能做一個關於雪花的效果圖,最好是能體現雪花的遠近感(遠的時候比較小 近的時候雪花比較大),我尋思良久,一開始用canvas做了一個雪花效果 感覺不是很滿意,然後就該用了three.js做了一個關於雪花的效果。效果還行 給大家先看一下效果。
附上地址
線上預覽: 雪花活動頁
GitHub地址: 傳送門 如果覺的有用,記得幫我fork和star一下 謝謝
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.碼字不容易,希望大家點個贊。前端路漫漫,與君共勉之。