利用javascript和WebGL繪製地球【翻譯】

時間 2019-11-30

標籤利用 javascript webgl 繪製地球翻譯欄目 JavaScript 简体版

原文原文鏈接

利用javascript和WebGL繪製地球【翻譯】

原翻譯：利用javascript和WebGL繪製地球【翻譯】javascript

在咱們全部已知的HTML5API中，WebGL多是最有意思的一個，利用這個API咱們可以在瀏覽器中創造出炫酷3D場景的能力。本文將完整的向你展現一些炫酷是如何實現的。html

須要特別指出的是，這篇教程咱們將會構建一個地球行星模型，這個模型能夠像一個興奮的人同樣環繞的旋轉，另外，它可能使咱們能夠得到一些其餘程序員的稱讚，好吧，就這麼多了。html5

準備

這篇教程咱們將會用到一個使人着迷的WebGL插件:three.js. 這個插件跟JQuery有點像，不過它是針對WebGL的，它將不少複雜的原生API訪問接口進行了抽象，從而讓咱們能夠更輕易的利用WebGL的特性。java

在HTML中，咱們的能夠經過正常的script標籤引入這個插件，以下：git

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r63/three.min.js"></script>

此處咱們引用的是CDN版本，若是你有必要，可使用本地的方法引入。而後咱們須要確保WebGL有東西能夠在上面進行渲染。這裏咱們有個靈活的作法：咱們能夠直接將通常的Div或者Canvas寫到HTML中，或者咱們能夠另外用JS建立而且追加canvas元素到Dom裏後再去渲染。這裏咱們採用第一種容易點的方法，以下：程序員

<body> <div id="container"></div> <script src="earth.js"></script> </body>

添加完script標籤鏈接到Dom中後，咱們的HTML部分差很少就完成了。github

下一步

Tree.js自己是趨向把東西作的很是接近真實的3D桌面程序的。咱們擁有一個場景，有一些東西現場直播，而後經過攝像機去瀏覽，而後有些燈光，特效，渲染在整場景上面，固然他們自身也全都是3D對象。這個場景的元素列表彷佛有點嚇人，在咱們的earth.js文件裏，全部的這些元素均可以當成形狀變量，Javascript文件以下：web

var scene, camera, light, renderer, earthObject; var WIDTH = window.innerWidth - 30, HEIGHT = window.innerHeight - 30; var angle = 45, aspect = WIDTH / HEIGHT, near = 0.1, far = 3000;

有些額外的變量也定義在這裏了，WIDTH,HEIGHT 變量用來獲取咱們畫布的寬與高，下面的其餘變量以後將會用來設置咱們相機的位置。對於幾乎全部的3D對象來講，全部這些元素都是共通的，不管是平臺仍是環境，因此在這裏咱們習慣性的將這些傢伙寫到一塊兒。然而利用Three.js咱們能夠輕鬆的實現，咱們將看看全部這些元素是如何在同一時刻融合到項目中的。ajax

環境

首先，咱們須要啓用新變量並初始化他們，從而使咱們的地球模型能夠展現的更炫。咱們能夠先設置每一個處理環境因素的變量：canvas

var container = document.getElementById('container'); camera = new THREE.PerspectiveCamera(angle, aspect, near, far); camera.position.set(0, 0, 0); scene = new THREE.Scene(); light = new THREE.SpotLight(0xFFFFFF, 1, 0, Math.PI / 2, 1); light.position.set(4000, 4000, 1500); light.target.position.set (1000, 3800, 1000);

下面是針對上面代碼執行狀況的描述：

在咱們的HTMl中抓取container對象
咱們用以前聲明的變量設置camera對象（更多關於cameras是如何在3D中工做的信息，能夠點擊這裏）
經過position.set方法設置camera的位置，這個方法須要攜帶一個維度（x, y, z)參數對象, 可能你已經想到了，咱們將會使用這個camera去定位咱們的3D對象，本教程中的3D對象就是咱們的地球模型。
接下來設置咱們的light對象。若是沒有light對象作渲染的話，那麼整個模型出來的效果將會是一片漆黑，因此咱們必須細心的注意這一步驟。Three.js的SpotLight object對象擁有與咱們的camera對象大體相同的參數，只不過這個對象的第一個參數colour必須爲十六進制的值，而後剩餘的其餘參數與camera基本相同。
最後，咱們須要設置咱們的畫布對象renderer.另一個須要確保的點則是：咱們須要提早將畫布對象完整的渲染到了屏幕上，再次強調，若是沒有完成這一步，那麼整個畫布將會什麼也看不見，一片漆黑。咱們給畫布添加了去鋸齒效果，而且將這個效果做爲Dom元素添加到咱們的原始容器中。

如今咱們須要經過將整個地球粘貼在網上同樣的方式來構建自身整個模型。代碼以下：

var earthGeo = new THREE.SphereGeometry (30, 40, 400), earthMat = new THREE.MeshPhongMaterial(); var earthMesh = new THREE.Mesh(earthGeo, earthMat); earthMesh.position.set(-100, 0, 0); earthMesh.rotation.y=5; scene.add(earthMesh);

在這裏咱們建立了一個網狀（Mesh)對象,這個網狀是一種能夠被用來裝扮並看起來像地球形狀的對象，而後給這個對象添加一些幾何結構，外觀包裝，或者一些有質感的材料來包裹這個網狀體。咱們一樣會將這個對象設置適當的在位置，與其餘參數對象同樣，咱們會而且將Mesh對象添加到咱們的場景（scene）中。

以下有個樣例。這裏面有些額外的渲染效果，稍後咱們將會講解。這個樣例看起來離咱們想要的愈來愈近了。

藍色星球

接下來有趣的部分是給這個傢伙製做皮膚。首先咱們將會使用一張漫反射貼圖，它會讓這個傢伙看起來更像個地圖。你能夠像下面的方式同樣添加：

// diffuse map earthMat.map = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');

若是你想要質感更好些的話，你能夠嘗試用這個圖片，或者你能夠去google搜索一張你想要的圖片都行。高分辨率的圖均可以。

如今這個模型看起來沒那麼糟糕了，可是咱們仍然能夠經過引用一點地形描繪的方式，使整個模型看起來更真實些。這個地球有一些高山，爲了確保區分太陽系的其餘星球，咱們須要使用凹凸地圖（bump map）, 在3D模型中, 凹凸地圖是黑白圖，使用鮮明的白色去凸顯圖像凹凸不平的部分（例如咱們示例中的：山脈）。

// bump map earthMat.bumpMap = THREE.ImageUtils.loadTexture('images/elev_bump_16ka.jpg'); earthMat.bumpScale = 8;

使用上面的圖片咱們差很少達到了效果，再次強調，使用過Google搜索「Earth bump map」會得到大量的選擇，可是若是你感受都很差的話，你能夠點擊這個鏈接。運行了以上的代碼，咱們將會看到以下效果：

讓它轉起來！

接下來剩餘的事情就是咱們給這個地球模型添加一些動畫效果，爲此，咱們須要兩個新的方法，咱們命名爲render()和animate()

function animate() { requestAnimationFrame(animate); render(); }

咱們的animate()方法並非很複雜，經過自身遞歸連續的調用requestAnimationFrame()方法，anmiate()會請求咱們的render()方法,讓咱們看看render()方法的代碼：

function render() { var clock = new THREE.Clock(), delta = clock.getDelta(); earthMesh.rotation.y += rotationSpeed * delta; renderer.render(scene, camera); }

咱們看看上面的代碼作了些什麼工做。每次render()方法被請求，它便會讓地球模型在y軸上緩緩的轉動起來（此處你能夠選擇設置任意的轉動次數，咱們在這裏利用getDelta()方法構建一個時鐘對象來控制轉動次數，固然你能夠不使用這種方法）。而後render()方法會執行清理畫布操做，這是防止畫布亂掉很重要的步驟，最後它會渲染咱們的場景（以及場景對象中的其餘全部對象）和咱們的camera對象。

最後

固然，擁有拖拽操做會讓咱們的地球模型的體驗更好，OrbitControls.js是一個能夠爲咱們地球模型提供鼠標驅動旋轉效果能力的腳本，而且它爲咱們的平流層裏添加一些星星或者雲做爲地球模型的背景一樣也並不困難，若是你並不嫌麻煩的話，你甚至能夠利用WebGL的着色器（shaders）爲你的星球添加一個平流層。

運行代碼，你能夠看到一個樣例，在CodePen中最終的Demo以下：

經過按住鼠標拖動和滾動鼠標滑輪來查看效果（或者點擊此處demo

結尾

WebGL和Three.js變得愈加的具備挑戰性，由於他們偶爾會要求咱們要像3D藝術家同樣，利用場景，畫布，camera去完成咱們的工做，最終的結果就是作出了一些加使人印象深入的東西。若是你專一於在這個技術上的話，你能夠經過在瀏覽器中使用3D特性創造出一些有趣的可能性。若是堅持它，相信不久你就極可能獲取一些非凡的成績。

原文地址：Building the Earth with WebGL and JavaScript