ThreeJS基本圖形之點陣雲
閒來無事，我們來學一學點陣雲，每次看見別人的酷炫粒子變換，是不是安耐不住心中的遐想呢。
這個簡單。
但是我們得從最基礎的地方開始走起來，首先。我們得明白什麼是點雲，什麼叫點雲座標分佈，什麼叫粒子，怎麼繪製好看的粒子，怎麼繪製秀出新天地的粒子。
其次我們再學學矩陣變換即可。酷炫的效果就來了，下面是將普通的幾何體變為粒子云的案例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>threejs基本圖形之點陣雲</title>
<script src="../js/three.js"></script>
</head>
<body>
<!-- 點、線、面
首先，所有圖形都是由點、線或面構成，所以有：
Points：點或點雲，可以用點或點雲表示圖形
Line/LineSegments：直線和虛線，可以用線或線團表示圖形
Mesh：網格模型，可以用若干三角面表示圖形
-->
<!--
-->
<canvas id="cc"></canvas>
<script type="text/javascript">
// 建立一個場景，它將儲存我們所有的元素，如物體、照相機和燈光。
var scene = new THREE.Scene();
// 建立一個攝像機，它定義了我們所處的位置.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 建立渲染並設定大小 指定渲染canvas物件
var renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#cc")
});
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
//建立一個xyz座標軸，方便初學者理解三維座標
var axes = new THREE.AxesHelper(20);
scene.add(axes);
//如何表達一個點雲。顧名思義。將一個複雜幾何體用無數個點的形式給表達出來
//那麼首先我們得建立一個東西，也就說所謂的複雜幾何體
//簡單，之前教過
var sphereGeometry = new THREE.SphereGeometry(10, 20, 20);//我們就建立個球體。當然api裡面有各種幾何體，你都可以使用,後面我會一一講解
var material = new THREE.PointsMaterial({color:Math.random()*0xffffff,size:0.2})//可以自己嘗試改下size。就能創造新世界！！！
var points = new THREE.Points(sphereGeometry,material)
scene.add(points)
//我們的點雲就搞成了。
//設定相機位置
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// 執行一次渲染器，GPU渲染成影象，繪製到canvas裡面呈現
const draw = function(){
requestAnimationFrame(draw)//不斷繪製
renderer.render(scene, camera);//渲染
points.rotation.y+=0.01//點雲角度旋轉
}
draw()
</script>
</body>
</html>