摘要：而是一款框架，由于其易用性被廣泛應(yīng)用。如果要學(xué)習(xí)，拋棄那些復(fù)雜的原生接口從這款框架入手是一個(gè)不錯(cuò)的選擇。需要相機(jī)，演員這里是地球，場(chǎng)景，導(dǎo)演。最后拍好了戲交給渲染器來制片，發(fā)布。狀態(tài)也在不停的更新。

哇哦，繪制氣球耶，在網(wǎng)頁(yè)上？對(duì)??！厲害了！3D效果圖也能在網(wǎng)頁(yè)上繪制出來啊，這么好玩的事情，趕緊來看看！

這里是屬于WebGL的應(yīng)用，webGL可以讓我們?cè)赾anvas上實(shí)現(xiàn)3D效果。而three.js是一款webGL框架，由于其易用性被廣泛應(yīng)用。如果要學(xué)習(xí)webGL，拋棄那些復(fù)雜的原生接口從這款框架入手是一個(gè)不錯(cuò)的選擇。跟著我一起走！

?：three.js參考文檔 英文

?：three.js參考文檔 中文

哈哈，別說了。先看地球：

首先要理清邏輯。three.js框架是個(gè)法寶，要畫東西的工具，模塊，材料等等里面都有，找到API去用。所以，我們只需要：

一張圖片，也就是包裹地球身體的那張圖片，

一個(gè)球模型，

把圖片貼到球模型上去，地球就出來了，

再給球加上一些動(dòng)畫效果，完工！

上面講完了畫的大致流程，現(xiàn)在要開始畫了。但是你還需要知道，不止這么簡(jiǎn)單！遠(yuǎn)不止這么簡(jiǎn)單！你需要：

1.設(shè)置three.js渲染器-renderer

2.設(shè)置攝像機(jī)camera

3.設(shè)置場(chǎng)景scene br>

4.設(shè)置物體object-地球

5.設(shè)置組織者

是不是一臉懵逼？別怕，來講個(gè)故事?

其實(shí)，就是拍電影啦。需要相機(jī)，演員（這里是地球），場(chǎng)景(scene)，導(dǎo)演（group）。導(dǎo)演組織這些活動(dòng)，導(dǎo)演也要看場(chǎng)景的，他受場(chǎng)景的約束，演員也要聽導(dǎo)演的。最后拍好了戲交給渲染器(renderer)來制片，發(fā)布。

好吧，這么形象估計(jì)懂了，來，我們具體來講講。

每個(gè)元素都是再定義了之后，在初始化函數(shù)內(nèi)部執(zhí)行。

用到three.js框架，要先引入以下：

看代碼：

// 加載材質(zhì)
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);
        // 貼圖 材質(zhì)紋理
        var material = new THREE.MeshBasicMaterial({
            map: texture,
            overdraw: 0.5
        })
        // 地球
        var mesh = new THREE.Mesh(geometry, material);
        group.add(mesh);
 ? ? ? ?}

畫地球需要地球外面那張圖片，還需要球模型geometry。圖片需要裁剪之后變成material。再用這兩個(gè)元素來new地球mesh,把地球交給group.

var scene;
scene = new THREE.Scene();
scene.add(group);

var group;
group = new THREE.Group();

var camera；
// 準(zhǔn)備好鏡頭
    camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight,1,2000);//相機(jī)擺上 設(shè)置相機(jī)擺放位置 產(chǎn)生鏡頭
    camera.position.z = 500;//拍的景物離我500px

先設(shè)置一下相機(jī)，把他放到里面去。

var renderer;
renderer = new THREE.CanvasRenderer();
        renderer.setClearColor(0xffffff);//設(shè)置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);

先設(shè)置一下渲染器，設(shè)置在畫布上面顯示的屬性，再把畫布添加到瀏覽器頁(yè)面上面去。還有在動(dòng)畫過程中的循環(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);//用鼠標(biāo)拖
window.addEventListener("resize",onWindowResize,false);

function onDocumentMouseMove (event) {
    mouseX = event.clientX - windowHalfX;//鼠標(biāo)基于中心點(diǎn)的偏移量；
    mouseY = event.clientY - windowHalfY;//鼠標(biāo)基于中心點(diǎn)的偏移量；
}

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針遞歸調(diào)用 使地球旋轉(zhuǎn)
    requestAnimationFrame(animate);
    render();
    stats.update();
}
function render () {
    camera.position.x
     += (mouseX-camera.position.x)*0.05;//在x軸上，相機(jī)根據(jù)鼠標(biāo)的位置移動(dòng)來移動(dòng)的距離
    camera.position.y 
    += (-mouseY - camera.position.y)*0.05;//在y軸上，相機(jī)根據(jù)鼠標(biāo)的位置移動(dòng)來移動(dòng)的距離
    camera.lookAt(scene.position);//設(shè)置視野的中心坐標(biāo)
    group.rotation.y -= 0.005;//讓它饒著y軸旋轉(zhuǎn) （間接的得到旋轉(zhuǎn)的速度）
    renderer.render(scene, camera);//將webgl視圖往外輸出
}

設(shè)置在鼠標(biāo)動(dòng)的時(shí)候監(jiān)聽到，而且此時(shí)camera隨即改變而改變。camera要改變根據(jù)鼠標(biāo)的移動(dòng)來移動(dòng)它的距離在函數(shù)onDocumentMouseMove中得到，而且地球要有一種遠(yuǎn)小近大的感覺。隨著鼠標(biāo)移動(dòng)，camera變化，地球的大小也在改變，也就是前面說的遠(yuǎn)小近大的感覺。在函數(shù)onWindowResize中實(shí)現(xiàn)。然后地球要?jiǎng)赢嬈饋硪{(diào)用animate函數(shù)，每秒60針遞歸調(diào)用 使地球旋轉(zhuǎn)，然后render函數(shù)就一直在不停的循環(huán)。狀態(tài)也在不停的更新。

WebGL是是一種3D繪圖標(biāo)準(zhǔn)，這種繪圖技術(shù)里面用了JavaScript，所以會(huì)JavaScript，走遍天下都不怕啊?

?：源碼

思考好邏輯，就可以動(dòng)手的!好玩就要去嘗試，就在慢慢成長(zhǎng)。大家共同進(jìn)步吧！