【WebGL入門】畫一個旋轉的cube
最近搜羅了各種資料，發現WebGL中文網特別好用，很適合新手入門：http://www.hewebgl.com/article/getarticle/50
只需要下載好需要的所有包，然後用notepad 就可以開始寫代碼了， 運行代碼我選擇的Google Chrome，其實IE也是一樣的，純屬個人信仰。
然後對於畫cube的話，給出的代碼已經非常清晰了：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>canvas { width: 100%; height: 100% }</style>
<script src="js/three.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(2,2,2);
var material = new THREE.MeshBasicMaterial({color: 0xF0F000});
var cube = new THREE.Mesh(geometry, material); scene.add(cube);
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
有寫過網站頁面的話都知道html的處理就像一個堆棧，看到head就push到棧裏，開始處理head的內容，碰到下一個head再pop出來，標誌head處理結束。
總體來說，簡單的網站頁面包括<html><head><body>格式都是固定的，其中代碼裏面 document.body.appendChild(renderer.domElement);這句話聲明此腳本是掛在body下執行的，如果不寫這一句，body是不知道這個腳本是給它用的，因此就不會顯示腳本裏描述的cube的各種活動。
和寫unity腳本類似，webgl的圖形界面也是需要這三個基本元素構成的。
1.scene
2.camera
3.renderer
然後是聲明一個物體對象cube，和new一個變量一樣：var cube = new THREE.Mesh(geometry, material); scene.add(cube);其中值得註意的是js喜歡用var來聲明變量，因為var和c的（void*）類似，都是可以接收任何類型的，比較靈活。
其中看起來比較奇葩的是color的賦值，用的是16進制，其實0x000000，就相當於0xRGB，每個顏色用兩位來表示。
感覺webgl實現和最新的opengl類似，然後現在新興的微信小程序其實也和H5有著密不可分的關系，所以webgl感覺是一個挺適合前端工程的一套工具。
【WebGL入門】畫一個旋轉的cube