WebGL入門demo
three.js入門
開場白
哇哦粘招，繪制氣球耶啥寇，在網頁上？對叭髟辑甜！厲害了！3D效果圖也能在網頁上繪制出來啊逊笆，這么好玩的事情栈戳，趕緊來看看！
這里是屬于WebGL的應用难裆，webGL可以讓我們在canvas上實現3D效果子檀。而three.js是一款webGL框架，由于其易用性被廣泛應用乃戈。如果要學習webGL褂痰，拋棄那些復雜的原生接口從這款框架入手是一個不錯的選擇。跟著我一起走症虑！
??：three.js參考文檔 英文
??：three.js參考文檔 中文
看地球咯缩歪！
哈哈，別說了谍憔。先看地球：
怎么畫匪蝙？
首先要理清邏輯。three.js框架是個法寶习贫，要畫東西的工具逛球，模塊，材料等等里面都有苫昌，找到API去用颤绕。所以，我們只需要：
- 一張圖片，也就是包裹地球身體的那張圖片奥务，
- 一個球模型物独，
- 把圖片貼到球模型上去，地球就出來了氯葬，
- 再給球加上一些動畫效果挡篓，完工！
開始畫溢谤！
上面講完了畫的大致流程瞻凤，現在要開始畫了。但是你還需要知道世杀，不止這么簡單！遠不止這么簡單肝集！你需要：
1.設置three.js渲染器-renderer
2.設置攝像機camera
3.設置場景scene br>
4.設置物體object-地球
5.設置組織者
是不是一臉懵逼瞻坝？別怕，來講個故事??
其實杏瞻，就是拍電影啦所刀。需要相機，演員（這里是地球）捞挥，場景(scene)浮创，導演（group）。導演組織這些活動砌函，導演也要看場景的斩披，他受場景的約束，演員也要聽導演的讹俊。最后拍好了戲交給渲染器(renderer)來制片垦沉，發(fā)布。
好吧仍劈，這么形象估計懂了厕倍，來，我們具體來講講贩疙。
一步步畫：
每個元素都是再定義了之后讹弯，在初始化函數內部執(zhí)行。
做準備：
用到three.js框架这溅，要先引入以下：
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
畫地球：
看代碼：
// 加載材質
var loader = new THREE.TextureLoader();
loader.load('https://threejs.org/examples/textures/land_ocean_ice_cloud_2048.jpg',
function(texture) {
//畫球體 形狀
var geometry = new THREE.SphereGeometry(200, 20, 20);
// 貼圖 材質紋理
var material = new THREE.MeshBasicMaterial({
map: texture,
overdraw: 0.5
})
// 地球
var mesh = new THREE.Mesh(geometry, material);
group.add(mesh);
}
畫地球需要地球外面那張圖片组民，還需要球模型geometry。圖片需要裁剪之后變成material芍躏。再用這兩個元素來new地球mesh,把地球交給group.
設置場景：
var scene;
scene = new THREE.Scene();
scene.add(group);
設置分組（導演）：
var group;
group = new THREE.Group();
設置相機：
var camera邪乍；
// 準備好鏡頭
camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight,1,2000);//相機擺上 設置相機擺放位置 產生鏡頭
camera.position.z = 500;//拍的景物離我500px
先設置一下相機，把他放到里面去。
設置渲染器：
var renderer;
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xffffff);//設置canvas背景顏色
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);//container展示的大小
container.appendChild(renderer.domElement)//追加 【canvas】 元素到 【container】 元素中
stats = new Stats();
container.appendChild(stats.dom);
先設置一下渲染器庇楞，設置在畫布上面顯示的屬性榜配，再把畫布添加到瀏覽器頁面上面去。還有在動畫過程中的循環(huán)渲染在下面講解吕晌。
加動畫啦蛋褥！
var container,stas;
var mouseX=0,mouseY=0;
var windowHalfX=window.innerWidth/2;
var windowHalfY=window.innerHeight/2;
animate();
document.addEventListener('mousemove', onDocumentMouseMove, false);//用鼠標拖
window.addEventListener('resize',onWindowResize,false);
function onDocumentMouseMove (event) {
mouseX = event.clientX - windowHalfX;//鼠標基于中心點的偏移量；
mouseY = event.clientY - windowHalfY;//鼠標基于中心點的偏移量睛驳；
}
function onWindowResize (event) {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}
function animate () {
// 每秒60針遞歸調用 使地球旋轉
requestAnimationFrame(animate);
render();
stats.update();
}
function render () {
camera.position.x
+= (mouseX-camera.position.x)*0.05;//在x軸上烙心，相機根據鼠標的位置移動來移動的距離
camera.position.y
+= (-mouseY - camera.position.y)*0.05;//在y軸上，相機根據鼠標的位置移動來移動的距離
camera.lookAt(scene.position);//設置視野的中心坐標
group.rotation.y -= 0.005;//讓它饒著y軸旋轉 （間接的得到旋轉的速度）
renderer.render(scene, camera);//將webgl視圖往外輸出
}
設置在鼠標動的時候監(jiān)聽到乏沸，而且此時camera隨即改變而改變淫茵。camera要改變根據鼠標的移動來移動它的距離在函數onDocumentMouseMove中得到，而且地球要有一種遠小近大的感覺蹬跃。隨著鼠標移動匙瘪，camera變化，地球的大小也在改變蝶缀，也就是前面說的遠小近大的感覺丹喻。在函數onWindowResize中實現。然后地球要動畫起來要調用animate函數翁都，每秒60針遞歸調用 使地球旋轉碍论，然后render函數就一直在不停的循環(huán)。狀態(tài)也在不停的更新柄慰。
小結：
WebGL是是一種3D繪圖標準鳍悠，這種繪圖技術里面用了JavaScript，所以會JavaScript先煎，走遍天下都不怕啊??
??：源碼
思考好邏輯贼涩，就可以動手的!好玩就要去嘗試，就在慢慢成長薯蝎。大家共同進步吧遥倦！
