2. 程式人生 > >利用Three.js構建粒子系統

利用Three.js構建粒子系統

阿新 • • 發佈：2019-02-13
var scene, camera, renderer, spot1, stats; var clock = new THREE.Clock();//時鐘 var cameraControls; var cloud, controls; function init() { stats = new initStats();//初始化檢測幀頻 scene = new THREE.Scene();//場景 camera = new THREE.PerspectiveCamera(45
, window.innerWidth / window.innerHeight, 0.1, 1000);//透視相機 camera.position.set(0, 0, 150);//相機位置 scene.add(camera);//add到場景中 spot1 = new THREE.SpotLight(0xffffff, 1);//點光源 spot1.position.set(100, 200, 100); scene.add(spot1); renderer = new THREE.WebGLRenderer({antialias: true
});//渲染 renderer.setClearColor(0x00000);//設定可以認為是底圖的顏色 renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMapEnabled = true;//shadow，陰影，表明能渲染陰影 cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);//相機控制器 cameraControls.target.set(0
, 0, 0);//控制器始終指向原點 document.getElementById('webGL_output').appendChild(renderer.domElement);//將渲染Element新增到Dom中 /* 控制器，用於選擇建立粒子的數量大小等 */ controls = new function () { this.createNums = 5000;//預設建立5000個粒子 this.size = 4;//預設大小 this.transparent = true;//透明的 this.opacity = 0.6;//不透明 this.vertexColors = true;//座標點集顏色 this.color = 0xffffff;//控制器本身顏色 this.sizeAttenuation = true;//如果為false 則所有粒子擁有相同的尺寸。無論距離相機多遠 this.rotateSystem = true;//是否旋轉 this.rotateSpeed = 0.005;//預設旋轉速度 this.redraw = function () { if (scene.getObjectByName('particles')) { scene.remove(scene.getObjectByName('particles')); }//存在則清除，然後重製 createParticles(controls.createNums, controls.size, controls.transparent, controls.opacity, controls.vertexColors, controls.sizeAttenuation, controls.color); } }; var gui = new dat.GUI(); gui.add(controls, 'createNums', 1, 10000).onChange(controls.redraw);//建立粒子數由1到10000個 gui.add(controls, 'size', 0, 10).onChange(controls.redraw);//大小0——10 gui.add(controls, 'transparent').onChange(controls.redraw); gui.add(controls, 'opacity', 0, 1).onChange(controls.redraw); gui.add(controls, 'vertexColors').onChange(controls.redraw); gui.addColor(controls, 'color').onChange(controls.redraw); gui.add(controls, 'sizeAttenuation').onChange(controls.redraw); gui.add(controls, 'rotateSystem').onChange(controls.redraw); gui.add(controls, 'rotateSpeed', 0.001, 0.01).onChange(controls.redraw); controls.redraw(); render(); } /* 將檢測幀頻顯示在左上方。 */ function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.getElementById('stats_output').appendChild(stats.domElement); return stats; } /* 該函式用於生成粒子 */ function createParticles(createNums, size, transparent, opacity, vertexColors, sizeAttenuation, color) { //幾何體 var geom = new THREE.Geometry(); //粒子系統材質， var material = new THREE.PointCloudMaterial({ size: size, transparent: transparent, opacity: opacity, vertexColors: vertexColors, sizeAttenuation: sizeAttenuation, blending:true, color: color }); var range = 500; for (var i = 0; i < createNums; 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(0x00ff00);//預設,關於顏色的設定只在vertexColors設定為true時使用 color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l); geom.colors.push(color);//顏色加入 } cloud = new THREE.PointCloud(geom, material);//粒子云系統 cloud.name = 'particles';//命名名字，在重繪的時候使用 scene.add(cloud); } var step = 0; function render() { stats.update(); if (controls.rotateSystem) { step += controls.rotateSpeed; cloud.rotation.x = step; // cloud.rotation.y = step; cloud.rotation.z = step; }//旋轉起來 requestAnimationFrame(render);//html5的方法，用於繪製一次動畫幀 var delta = clock.getDelta();//根據滑鼠拉扯，相機旋轉 cameraControls.update(delta); renderer.render(scene, camera); } window.onload = init;

相關推薦

利用Three.js構建粒子系統

var scene, camera, renderer, spot1, stats; var clock = new THREE.Clock();//時鐘 var cameraControls; var cloud, controls;

Webgl顯示Revit模型（二）——利用Three.js優化顯示效果

Webgl顯示Revit模型（一）請見： https://blog.csdn.net/niuge8905/article/details/80044802 Three.js已經算是開發webgl最常用的開源庫了。Autodesk團隊開源了一個va3c來在web端顯示revit，但是這個更

[webGL學習]基於three.js構建WebGL例項第五講

今天，我們將繼續學習webgl（three.js）這門課程，今天我們將向您展示如何以三種不同的方式為您的場景建立一個美麗的環境（天空立體景象）：立方天空盒 側面），球形天空盒（單週圍紋理）和球形著色器天空盒（無紋理）。 我們會用到下面一些比較特殊的屬性

[webGL學習]基於three.js構建WebGL例項第三講

大多程式設計師在剛開始理解3D(webGL)的知識時,通常對三維空間可能理解的比較困難,你也可能有困難理解不同的光線是如何工作的，或軸甚至如何位於空間。 今天，我會幫你處理這些問題。three.js所擁有一切必要的手段來為這個 - 幫手。在今

three.js 製作太陽系統

最近學了three.js，想拿來練練手，喜歡宇宙，於是親手擼程式碼來完成這個，為了更真實，於是查了一些相關資料。1. 距離太陽由近及遠分別是【水星，金星，地球，火星，木星，土星，天王星，海王星】2. 他們分別到太陽的距離為5791, 10820, 14960, 22794, 77833, 142940, 28

Three.js 粒子系統動畫與發光材質——利用HTML5畫布繪製

用Three.js做了個字型的粒子系統動畫，且`自定義性`極高，設定speedX=speedY=speedZ=1000的引數，截圖如下： Three的三大基本元件：相機，渲染器，場景在這就沒必要說了吧，百度有很多資料 接下來我們分幾個步驟來講解如何做出這個粒子動畫

three.js入門系列之粒子系統

其實程式碼很簡單，也很容易懂（我用的是r99版本的three.js，目前網上大多數demo是60或者80的版本，其中的一些api已經廢棄，如下是r99版本支援的寫法）： 注：渲染器是WebGl渲染器 如上的程式碼，你將看到如下畫面： 但是這麼多“粒子”都是正方形的啊，哪來的雪花呢，不急

THREE.js 粒子系統

經常看到這樣一些場景：漫天飛舞的雪花、夜晚草叢中點點螢光、小河上下起的綿綿細雨… 這些浪漫？？的效果都可以用粒子系統來實現，粒子系統用THREE.js實現就是通過Points或者Sprite類來實現的啦。 一、Points A class for d

three.js 07-04 之 Points 粒子系統

    前面都是在介紹 如何通過 THREE.Sprite 來構建粒子系統。本篇我們來介紹一下如何通過 THREE.Points 及 THREE.PointsMaterial 來構建粒子系統。我們先來看一個完整的示例，程式碼如下所示： <!DOCTYPE html&g

Three.js開發指南（7）：粒子和粒子系統

使用粒子（particle）可以很容易地創建出很多細小的物體，可以用來模擬雨滴和雪花。7.1 理解粒子    建立粒子7.2 粒子、粒子系統和BasicParticleMaterial    除非使用CanvasRenderer類，否則你就需要用ParticleSystem類

WebGL three.js學習筆記 使用粒子系統模擬時空隧道（蟲洞）

藍色 raw mat charset rgb out title ble 以及 WebGL three.js學習筆記 使用粒子系統模擬時空隧道 本例的運行結果如圖： 時空隧道demo演示 Demo地址：https://nsytsqdtn.github.io/demo/36

canvas粒子系統的構建

ttext retext ots 原理 btn 篩選 定時器 宋體 aar 前面的話 　　本文將從最基本的imageData對象的理論知識說開去，詳細介紹canvas粒子系統的構建 效果演示 　　下面是實例效果演示，博文結尾有全部源碼 imageData 　　關

js利用時間戳動態顯示系統時間距指定時間的時間差

cond else if post func eth rep tar ont RR function dateTimes(times) { var d = new Date(times * 1000); var date = (d.getFullYear(

Webgl基於Three.js的開發——利用Frustum來判斷相交或者包含

首先來看一下Frustum的文件：Frustum幫助文件 根據文件建立一個Frustum： function initFrustum() { //定義錐形物體最遠的四個點 var topLeftPoint = new THREE

three.js粒子過度效果製作(二)

three.js粒子過度效果製作(二) 從圖片獲取粒子 下面演示的是粒子是從圖片中獲取的。採用的cpu的方式，普通geometry，單一顏色。 你也可以使用彩色圖片，並使用彩色粒子，效果會更好一些。 步驟 建立meshGeo，這個是粒子系統的載體，，它的頂點數量決定

three.js粒子過度效果製作(一)

three.js粒子過度效果製作(一) 粒子過度效果在很多網頁中經常簡單，可以實現從物體A過度到物體B。其原理是改變頂點的位置，按照預先設計好的路徑移動。 一種簡單的實現方式是，給出在A位置的所有頂點座標，給出B位置的所有頂點座標，然後通過過度的方式實現。下面演示一下從一個平面過度到

使用webgl(three.js)搭建一個3D建築，3D消防模擬，web版3D,bim管理系統——第四課

function getBuildFloorData() { var models = [{ "show": true, "uuid": "", "name": "m4_dtWall_1", "objType": "cube2", "length": 1000, "width": 200, "hei

學習Three.js——粒子、點雲(Sprite,PointCloud)

粒子 使用THREE.SpriteMaterial()和THREE.Sprite()即可建立單個粒子 建立過程 function createSprites() { var material = new THREE.SpriteMaterial();

利用python構建Mock系統

> 字元 位元組順序 長度和對齊方式 > @ native native > = native standard > < little-endian standard > > big-endian standard > ! network (= big-end

利用Netty來構建WebSocket後端服務系統的例子程式

最近在研究Netty來構建SOA架構，其中也包括了前端接入的HTTP/WebSocket方面的接入響應，而WebSocket方面的接入響應對於移動端的訊息推送研發至關重要，這裡就將在這塊研發時的非同步socket響應服務例子程式筆記記錄下來，系統總共分為4個處理類，即：Htt