摘要:我們還需要在粒子超出效果展示區域時,把粒子重新賦予一個初始位置這樣,飄花瓣的效果,就完成了代碼下載鏈接密碼
粒子動畫在ThreeJs可以用幾種方式實現
本次樣例使用Sprite類來構建粒子
官方對Sprite類的解釋 Sprite A sprite is a plane that always faces towards the camera, generally with a partially transparent texture applied. Sprites do not cast shadows, setting castShadow = true will have no effect.
大概意思:這個類創建的對象是一個始終面向相機的平面,可以把貼圖應用在上面,Sprite對象無法添加陰影 ,所以castShadow屬性無效
首先我們創建場景和相機
container = document.createElement( "div" ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.set( 0, 0, 120 ); scene = new THREE.Scene();
然后用Sprite創建粒子
var textureList=[pic1,pic2,pic3,pic4,pic5,pic6,pic7,pic8,pic9,pic10]
var textureLoader = new THREE.TextureLoader(); var textureId = parseInt(Math.random()*100)%10 var texture = textureLoader.load(textureList[textureId]); var particle = new THREE.Sprite( new THREE.SpriteMaterial( { map: texture } ) );
生成隨機數,隨機獲取貼圖資源,使用Sprite類創建粒子
particle.position.x = Math.round(Math.random() *winHeight* 1000)%200 +120; particle.position.y =Math.round(Math.random() *winHeight* 10000)%100 +60; particle.position.z = Math.random() * 3 - 30; particle.scale.x = particle.scale.y = Math.round(Math.random() * 50)%5+10 ;
使用隨機數給粒子設置位置,大小
因為Sprite類是創建一個始終面向相機的面,也就是說它無法使用翻轉使得花瓣有個翻轉的效果。
但是我需要給花瓣添加一個翻轉的效果
我的實現思路是,2d元素在反轉時其實相當于是將他的x軸的大小壓縮
所以我給設置一個當前x軸的大小
和初始變形速度
particle.sizeX = particle.scale.x; particle.xScaleSpeed = -0.08;
以下是所有粒子初始化的代碼
for ( var i = 0; i < 30; i ++ ) { var textureLoader = new THREE.TextureLoader(); var textureId = parseInt(Math.random()*10); var texture = textureLoader.load(textureList[textureId]); var particle = new THREE.Sprite( new THREE.SpriteMaterial( { map: texture } ) ); particle.position.x = Math.round(Math.random() *winHeight* 1000)%200 +120; particle.position.y =Math.round(Math.random() *winHeight* 10000)%100 +60; particle.position.z = Math.random() * 3 - 30; particle.scale.x = particle.scale.y = Math.round(Math.random() * 50)%5+10 ; particle.sizeX = particle.scale.x; particle.xScaleSpeed = -0.08; particle.speed = Math.round(Math.random()*10)/50; particles.push(particle); scene.add( particle ); }
創建完粒子后
創建canvasRender
renderer = new THREE.CanvasRenderer({alpha:true}); renderer.setClearColor("#ffffff",0); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, winHeight ); container.appendChild( renderer.domElement );
因為準備讓花瓣從左上方往右下飄落,所以每次渲染畫面的時候需要將花瓣往右下偏移
particles[i].position.x+=particles[i].speed;
這個速度是我在創建粒子時隨機生成的,為的是讓花瓣每一片的速度不同
particles[i].position.y-=particles[i].speed+0.1;
給y軸上也在每次渲染的時候增加一個偏移量,
因為這個效果需要在豎屏上展示,
所以y軸速度比x軸快一些效果會更好
particles[i].scale.x += particles[i].xScaleSpeed;
然后對粒子的形狀在每次渲染的時候增加一個變形量
if(particles[i].scale.x <-particles[i].sizeX){ particles[i].xScaleSpeed = 0.08 } if(particles[i].scale.x >=particles[i].sizeX){ particles[i].xScaleSpeed = -0.08 }
需要模擬花瓣翻轉的效果,當當前變形量超過原先尺寸時,變形方向改為相反方向(本來變大改為變?。?/p>
if(particles[i].scale.x <0.3&&particles[i].scale.x >0){ particles[i].scale.x=-0.3 } if(particles[i].scale.x >-0.3&&particles[i].scale.x <0){ particles[i].scale.x=0.3 }
到這里我們就完成了粒子的飄落+翻轉的動態。
我們還需要在粒子超出效果展示區域時,把粒子重新賦予一個初始位置
if(particles[i].position.y<-100||particles[i].position.x>50|particles[i].position.z>150){ particles[i].position.x = -Math.round(Math.random() *winWidth* 1000)%(winWidth); particles[i].position.y = Math.round(Math.random() *winHeight* 1000)%200 +120 particles[i].position.z = Math.random() * 5 - 30; particles[i].speed=Math.round(Math.random()*10)/30; }
這樣,飄花瓣的效果,
就完成了
代碼下載
鏈接: https://pan.baidu.com/s/1pKKkqrL 密碼: ww7j
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50540.html
摘要:我們還需要在粒子超出效果展示區域時,把粒子重新賦予一個初始位置這樣,飄花瓣的效果,就完成了代碼下載鏈接密碼 showImg(https://segmentfault.com/img/bVKwfR?w=329&h=565); 粒子動畫在ThreeJs可以用幾種方式實現本次樣例使用Sprite類來構建粒子 官方對Sprite類的解釋 Sprite A sprite is a plane t...
摘要:那我這邊呢,根據技術的分類,找出其中十個有代表性的案例,給大家解析一下他們技術的實現方案。經過我對線上的代碼進行修改,使這個頁面在安卓端強制使用來進行展示后發現,在播放了一會后微信瀏覽器直接崩潰。那么這十個案例的淺析就完了,謝謝。 最近我們前端這邊搜集了50個比較優秀的H5。 那我這邊呢,根據技術的分類,找出其中十個有代表性的案例,給大家解析一下他們技術的實現方案。 設計師也可以根據技...
摘要:那我這邊呢,根據技術的分類,找出其中十個有代表性的案例,給大家解析一下他們技術的實現方案。經過我對線上的代碼進行修改,使這個頁面在安卓端強制使用來進行展示后發現,在播放了一會后微信瀏覽器直接崩潰。那么這十個案例的淺析就完了,謝謝。 最近我們前端這邊搜集了50個比較優秀的H5。 那我這邊呢,根據技術的分類,找出其中十個有代表性的案例,給大家解析一下他們技術的實現方案。 設計師也可以根據技...
閱讀 2111·2021-11-24 10:28
閱讀 1117·2021-10-12 10:12
閱讀 3337·2021-09-22 15:21
閱讀 679·2021-08-30 09:44
閱讀 1895·2021-07-23 11:20
閱讀 1147·2019-08-30 15:56
閱讀 1751·2019-08-30 15:44
閱讀 1483·2019-08-30 13:55