由于一門課程的需要坪郭，要做一個(gè)三維可視化的presentation个从，想來想去，也就WebGL我還有點(diǎn)感興趣歪沃，于是開始對這一領(lǐng)域的研究嗦锐。這兩天的時(shí)間也算是小有收獲吧。在報(bào)告中我就是打算帶著大家一起從零寫一個(gè)WebGL程序的沪曙，讓所有人也都感受一下這么一個(gè)創(chuàng)作的過程奕污，再分享一下學(xué)習(xí)的經(jīng)驗(yàn)。不過可能時(shí)間不夠液走，就在這寫吧碳默。
three.js
要說玩WebGL怎么可能不說three.js，這可是對WebGL的完美封裝缘眶。源碼和官網(wǎng)嘱根，要學(xué)three.js這兩個(gè)地方是必去之處。我簡單說一下three.js起步巷懈。
在進(jìn)行開發(fā)之前
由于我們最終的結(jié)果是要呈現(xiàn)在web端该抒，所有在在前端的展示框架要先搭建好，同時(shí)還要事先下載three.js文件顶燕，或者就像我這里一樣凑保，用three.js的官方cdn冈爹。
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
創(chuàng)建場景(scene)
用three.js呈現(xiàn)的內(nèi)容需要3樣元算：scene, camera, renderer .
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 );
解釋一下，這里的camera欧引，我們使用的是PerspectiveCamera(three.js還提供了很多其他類型的camera以供選擇)犯助，它有4個(gè)參數(shù)，第一個(gè)表示視野大形獭剂买；第二個(gè)表示成像比例，一般都是按照瀏覽器窗口比例來進(jìn)行設(shè)定癌蓖；第三和第四個(gè)分別是最遠(yuǎn)和最近的camera作用范圍瞬哼。下面的renderer比較容易理解，需要注意的是在最后要append到document中租副。
下面創(chuàng)建一個(gè)物體出來坐慰。
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
這里CubeGeometry為了創(chuàng)建一個(gè)cube出來，由geometry變量存儲用僧。除此之外還有需要material給我們的cube著色(同樣的three.js由很多material可供選擇)结胀。然后就是mesh了，這個(gè)過程可以抽象的理解為融合過程责循，有了geometry和material融合后就是我們需要的最終object了糟港。最后把物體add進(jìn)之前聲明好的scene中去。
渲染(render)
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
如果要深入解釋render的原理院仿，這就是另外一本書的內(nèi)容了秸抚。。歹垫。這里剥汤，瀏覽器接到指令后，大概會做的事情就是每秒對要顯示的內(nèi)容進(jìn)行60次著色排惨。
制作動(dòng)畫效果
如果渲染出的圖像不會動(dòng)吭敢，可能也看不出三維效果來。因?yàn)槲覀冇玫闹皇且粋€(gè)生成的簡單cube暮芭，本身是沒有辦法呈現(xiàn)出立體感的鹿驼。所以我們加點(diǎn)動(dòng)態(tài)以展示出，我們做的確實(shí)一個(gè)三維的object谴麦。
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
最終代碼展示
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="three.min.js"></script>
<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(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
這次先寫這么多蠢沿，下次介紹怎么再一個(gè)WebGL程序中l(wèi)oad一個(gè)外部obj模型。哈哈匾效，給力的實(shí)例來了舷蟀。。。
愛生活野宜，愛技術(shù)扫步。
愿結(jié)識各路小伙伴。
