54 Three.js 使用THREE.PointCloudMaterial（新版本：THREE.PointsMaterial）樣式化粒子

阿新 • • 發佈：2019-02-10

var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); //renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //設定背景顏色 renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } var

camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); camera.position.set(0, 0, 200); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight()

{ scene.add(new THREE.AmbientLight(0x404040)); light = new THREE.DirectionalLight(0xffffff); light.position.set(1, 1, 1); scene.add(light); } var cloud; function initModel() { //軸輔助（每一個軸的長度） var object = new THREE.AxesHelper(500); scene.add(object); //建立THREE.PointCloud粒子的容器

var geometry = new THREE.Geometry(); //建立THREE.PointCloud紋理 var material = new THREE.PointCloudMaterial({size: 4, vertexColors: true, color: 0xffffff}); //迴圈將粒子的顏色和位置新增到網格當中 for (var x = -5; x <= 5; x++) { for (var y = -5; y <= 5; y++) { var particle = new THREE.Vector3(x * 10, y * 10, 0); geometry.vertices.push(particle); geometry.colors.push(new THREE.Color(+randomColor())); } } //例項化THREE.PointCloud cloud = new THREE.PointCloud(geometry, material); scene.add(cloud); } //隨機生成顏色 function randomColor() { var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"], strHex = "0x", index; for (var i = 0; i < 6; i++) { index = Math.round(Math.random() * 15); strHex += arrHex[index]; } return strHex; } //初始化效能外掛 var stats; function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } //使用者互動外掛滑鼠左鍵按住旋轉，右鍵按住平移，滾輪縮放 var controls; function initControls() { controls = new THREE.OrbitControls(camera, renderer.domElement); // 如果使用animate方法時，將此函式刪除 //controls.addEventListener( 'change', render ); // 使動畫迴圈使用時阻尼或自轉意思是否有慣性 controls.enableDamping = true; //動態阻尼係數就是滑鼠拖拽旋轉靈敏度 //controls.dampingFactor = 0.25; //是否可以縮放 controls.enableZoom = true; //是否自動旋轉 controls.autoRotate = false; //設定相機距離原點的最遠距離 controls.minDistance = 20; //設定相機距離原點的最遠距離 controls.maxDistance = 10000; //是否開啟右鍵拖拽 controls.enablePan = true; } //生成gui設定配置項 var gui; function initGui() { //宣告一個儲存需求修改的相關資料的物件 gui = { "size": 4, "transparent": true, "opacity": 0.6, "vertexColors": true, "color": 0xffffff, "sizeAttenuation": true, "rotateSystem": true, redraw: function () { if (cloud) { scene.remove(cloud); } createParticles(gui.size, gui.transparent, gui.opacity, gui.vertexColors, gui.sizeAttenuation, gui.color); //設定是否自動旋轉 controls.autoRotate = gui.rotateSystem; } }; var datGui = new dat.GUI(); //將設定屬性新增到gui當中，gui.add(物件，屬性，最小值，最大值）gui.add(controls, 'size', 0, 10).onChange(controls.redraw); datGui.add(gui, 'transparent').onChange(gui.redraw); datGui.add(gui, 'opacity', 0, 1).onChange(gui.redraw); datGui.add(gui, 'vertexColors').onChange(gui.redraw); datGui.addColor(gui, 'color').onChange(gui.redraw); datGui.add(gui, 'sizeAttenuation').onChange(gui.redraw); datGui.add(gui, 'rotateSystem').onChange(gui.redraw); gui.redraw(); } //生成粒子的方法 function createParticles(size, transparent, opacity, vertexColors, sizeAttenuation, color) { //存放粒子資料的網格 var geom = new THREE.Geometry(); //樣式化粒子的THREE.PointCloudMaterial材質 var material = new THREE.PointCloudMaterial({ size: size, transparent: transparent, opacity: opacity, vertexColors: vertexColors, sizeAttenuation: sizeAttenuation, color: color }); var range = 500; for (var i = 0; i < 15000; 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(+randomColor()); //.setHSL ( h, s, l ) h — 色調值在0.0和1.0之間 s — 飽和值在0.0和1.0之間 l — 亮度值在0.0和1.0之間。使用HSL設定顏色。 //隨機當前每個粒子的亮度 color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l); geom.colors.push(color); } //生成模型，新增到場景當中 cloud = new THREE.PointCloud(geom, material); scene.add(cloud); } function render() { renderer.render(scene, camera); } //視窗變動觸發的函式 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); render(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { //更新控制器 controls.update(); render(); //更新效能外掛 stats.update(); requestAnimationFrame(animate); } function draw() { initRender(); initScene(); initCamera(); initLight(); initModel(); initControls(); initStats(); initGui(); animate(); window.onresize = onWindowResize; }

54 Three.js 使用THREE.PointCloudMaterial（新版本：THREE.PointsMaterial）樣式化粒子

var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); //renderer.setClearColor(new THREE.C

單機Mongo複製集安裝配置（資料庫版本：4.x）

官方文件： https://docs.mongodb.com/manual/tutorial/deploy-replica-set-with-keyfile-access-control/#deploy-repl-set-with-auth 一、建立fileKey,祕鑰檔案

Three.js入門篇（一）創建一個場景

style api text webgl () mes utf 動畫 fun 上一面講述了向場景中添加物體對象。這一篇準備把每個功能點細細的講述一遍，一方面是為了加深自己的理解。另一方面希望能夠幫助到有需要的人。一、在學習WEBGL的時候，你應該先了解要創建一個WebG

three.js 入門指南（敷衍一下）

今天看了一本好書three.js,感覺特別適合我這種對three.js 瞭解不深的人。其實要學習three.js,還有許多其他方面的知識要了解，例如如何繪製多邊形，如何繪製曲線，攝像機的一些基礎知識等等。推薦一本老外的three.js指南 https://pan.baidu.com/

three.js 原始碼註釋（三）Math/Vector2.js

以下程式碼是THREE.JS 原始碼檔案中Math/Vector2.js檔案的註釋. // File:src/math/Vector2.js /** * @author mrdoob / http://mrdoob.com/ * @author philog

three.js 原始碼註釋（五十九）objects/Mesh.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中objects/Mesh.js檔案的註釋. /** * @author mrdoob / http://mrdoob.com/ * @author alteredq / htt

three.js 原始碼註釋（四十九）Material /MeshNormalMaterial.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中Material/MeshNormalMaterial.js檔案的註釋. /** * @author mrdoob / http://mrdoob.com/ * * para

three.js 原始碼註釋（八十四）extras/geometries/ParametricGeometry.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中extras/geometries/ParametricGeometry.js檔案的註釋. /** * @author zz85 / https://github.com/zz8

three.js 原始碼註釋（五十）Material /MeshPhongMaterial.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中materials/MeshPhongMaterial.js檔案的註釋. /** * @author mrdoob / http://mrdoob.com/ * @author

three.js學習點滴（2）— 模型匯入

three.js沒有像mm，cm，m這樣的單位，為了和three.js的大部分外掛程式碼的引數一致，本人以cm為最小單位在3dmax中建模 3Dmax中設定：一、單位問題：最小單位為cm ，以現實實際大小建模，如人物高度：1.8m。二、以原點為模型基準點：三

three.js 原始碼註釋（九十四）extras/core/Shape.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中extras/core/Shape.js檔案的註釋. /** * @author zz85 / http://www.lab4games.net/zz85/blog * Def

three.js 原始碼註釋（二十二）Core/Object3D.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中Core/Object3D.js檔案的註釋. /** * @author mrdoob / http://mrdoob.com/ * @author mikael emting

Three.js開發指南（10）：載入和使用紋理

將紋理應用到網格上10.1 在材質中使用紋理紋理有幾種不同的用法，可以用它們來定義網格的顏色，也可以用它們來定義高光、凹凸和反光。但我們首先要看的是最基礎的方法，用紋理為網格上的每個畫素指定顏色。載入紋理並應用到網格：紋理最基礎的用法是在材

three.js 原始碼註釋（七十八）extras/geometries/IcosahedronGeometry.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中extras/geometries/IcosahedronGeometry.js檔案的註釋. /** * @author timothypratley / https://git

three.js 原始碼註釋（五十一）Material /MeshDepthMaterial.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中materials/MeshDepthMaterial.js檔案的註釋. /** * @author mrdoob / http://mrdoob.com/ * @author

three.js 原始碼註釋（二十七）Core/BufferGeometry.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中Core/BufferGeometry.js檔案的註釋. /** * @author alteredq / http://alteredqualia.com/ */ /* //

three.js 原始碼註釋（十四）Math/Sphere.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中Math/Sphere.js檔案的註釋. // File:src/math/Sphere.js /** * @author bhouston / http://exocorte

three.js 原始碼註釋（六十）objects/Line.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中objects/Line.js檔案的註釋. /** * @author mrdoob / http://mrdoob.com/ */ /* ///Line物件,建立一條線,或者

three.js 原始碼註釋（四十二）Light/AreaLight.js

俺也是剛開始學,好多地兒肯定不對還請見諒. 以下程式碼是THREE.JS 原始碼檔案中Light/AreaLight.js檔案的註釋. /** * @author MPanknin / http://www.redplant.de/ * @author alte

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

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