WebGL入門demo

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)來製片，發佈。

好吧，這麼形象估計懂了，來，咱們具體來說講。

一步步畫：

每一個元素都是再定義了以後，在初始化函數內部執行。

作準備：

用到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);

先設置一下渲染器，設置在畫布上面顯示的屬性，再把畫布添加到瀏覽器頁面上面去。還有在動畫過程當中的循環渲染在下面講解。

加動畫啦！

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視圖往外輸出
}

設置在鼠標動的時候監聽到，並且此時camera隨即改變而改變。camera要改變根據鼠標的移動來移動它的距離在函數onDocumentMouseMove中獲得，並且地球要有一種遠小近大的感受。隨着鼠標移動，camera變化，地球的大小也在改變，也就是前面說的遠小近大的感受。在函數onWindowResize中實現。而後地球要動畫起來要調用animate函數，每秒60針遞歸調用 使地球旋轉，而後render函數就一直在不停的循環。狀態也在不停的更新。

小結：

WebGL是是一種3D繪圖標準，這種繪圖技術裏面用了JavaScript，因此會JavaScript，走遍天下都不怕啊?

?：源碼

思考好邏輯，就能夠動手的!好玩就要去嘗試，就在慢慢成長。你們共同進步吧！