摘要：而是一款框架，由于其易用性被廣泛應用。如果要學習，拋棄那些復雜的原生接口從這款框架入手是一個不錯的選擇。需要相機，演員這里是地球，場景，導演。最后拍好了戲交給渲染器來制片，發布。狀態也在不停的更新。

哇哦，繪制氣球耶，在網頁上？對啊！厲害了！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框架，要先引入以下：

看代碼：

// 加載材質
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，走遍天下都不怕啊?

?：源碼

思考好邏輯，就可以動手的!好玩就要去嘗試，就在慢慢成長。大家共同進步吧！