WebGL之3D地球

醬菜豪發表於2018-10-01

看了餓了麼小小倩老師的canvas作品，心血來潮，學著做了個3D地球，也算是入坑WebGL了吧。之前有用過原生的canvas畫2D的圖形，這次則是用了Three.js和stats.js的3D框架，邊學邊練手，效果還算比較滿意...畢竟第一次接觸WebGL

Talk is cheap show the code！

github專案原始碼地址：github.com/FightingHao…
專案演示地址：fightinghao.github.io/codingDream…

程式碼還有很多不足，求大神review..

什麼是Three.js

隨著近幾年前端的飛速發展，網頁的表現能力越來越強大，瀏覽器提供了WebGL（Web圖形處理庫）介面，可以通過呼叫對應API進行3D圖形的繪製，Three.js則是在此基礎介面之上又做了一層封裝。Three.js是當下最流行的網頁3D渲染JS引擎。

Three.js使用方法

準備階段

頁面新增canvas元素

  <!-- 作為Three.js渲染器輸出3D圖形 -->
  <canvas id="webglcanvas"></canvas>
複製程式碼

引入Three.js庫檔案

本地引入

  <!-- Three.js庫 -->
  <script src="./libs/three.min.js"></script>
複製程式碼

CDN遠端引入

  <script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
複製程式碼

專案中用到的變數

let canvas,  //畫布標籤
  stats,     //效能檢測器
  camera,    //相機
  scene,     //場景
  renderer,  //渲染器
  group,     //物體組
  mouseX = 0,  //滑鼠橫向位置
  mouseY = 0,  //滑鼠縱向位置
  windowHalfX = window.innerWidth / 2,  //視口大小的一般
  windowHalfY = window.innerHeight / 2; //視口大小的一半
複製程式碼

建立場景素材

為了讓three.js顯示，需要三件事情：場景、相機和渲染器

場景，可以理解為舞臺。因為要繪製3D效果，必須要有一個舞臺來演示效果
建立場景 API：THREE.Scene()

scene = new THREE.Scene() //建立場景
複製程式碼

有了場景，現在需要相機來拍攝出素材出來，所以第二步則是需要建立一個"相機"
建立相機 API：THREE.PerspectiveCamera(fov, aspect, near, far)
- fov 可視角度，可理解為視野，是在顯示器上看到的場景的範圍，以度為單位。
- aspect 為width/height,通常設定為canvas元素的高寬比。
- near近端距離
- far遠端距離
- 只有離相機的距離大於near值，小於far值，且在相機的可視角度之內，才能被相機投影到。

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000)
camera.position.z = 500  //相機的遠近
複製程式碼

場景和相機都有了，也就是能夠拍攝出素材了，但素材需要經過一些PS、美顏等才能變得好看。這時候就需要渲染器。
建立渲染器 API：THREE.WebGLRenderer({})

renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true, // true/false表示是否開啟反鋸齒,
    /*
    alpha: false,              // true/false 表示是否可以設定背景色透明,
    precision: 'highp',        // highp/mediump/lowp 表示著色精度選擇,
    premultipliedAlpha: false, // true/false 表示是否可以設定畫素深度（用來度量影象的解析度）,
    maxLights: 3,              // 最大燈光數,
    stencil: false             // false/true 表示是否使用模板字型或圖案
    */
  })
複製程式碼

指定渲染器寬高 API：renderer.setSize(window.innerWidth, window.innerHeight) 引數分別為寬和高

建立3D圖形

我們已經用相機在場景中拍攝出了素材，但這些素在畢竟還只是2D，現在我們要將該素材由2D變為3D，這時這就需要用一個3D圖形作為2D素材的載體。用個吃貨的簡單理解，就是雞肉卷外面的卷，開始卷是2D的平面的，把雞肉到卷面上，用捲包裹起雞肉，則就由2D的卷變成了3D的雞肉卷對吧。emmm...解釋的好尬。
API：

圖形形狀THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
- radius：球體半徑
- widthSegments, heightSegments：水平方向和垂直方向上分段數。widthSegments最小值為3，預設值為8。heightSegments最小值為2，預設值為6。
- phiStart：水平方向上的起始角,預設值0
- phiLenght：水平方向上球體曲面覆蓋的弧度，預設Math.PI * 2
- thetaStart : 垂直方向上的起始角，預設0
- thetaLength: 垂直方向是球體曲面覆蓋的弧度，預設值為Math.PI
圖形材質THREE.MeshBasicMaterial({})
圖形材質有很多種，網上查了查資料，覺得這個總結的挺好，大家可以看一看 blog.csdn.net/qq_30100043…
圖形構成THREE.Mesh(geometry, material)
- geometry 物體形狀
- material 物體材質

let geometry = new THREE.SphereGeometry(200, 20, 20)  //形狀
let material = new THREE.MeshBasicMaterial({ map: texture })  //材質
let mesh = new THREE.Mesh(geometry, material)  //物體
複製程式碼

載入圖形new THREE.TextureLoader().load(img, callback)
將上面的圖形載入出來

loader.load('./img/land_ocean_ice_cloud_2048.jpg', function (texture) {
    let geometry = new THREE.SphereGeometry(200, 20, 20)  //形狀
    let material = new THREE.MeshBasicMaterial({ map: texture })  //材質
    let mesh = new THREE.Mesh(geometry, material)  //物體
})
複製程式碼

建立組合

我們有了3D圖形，接下來就是將這些圖形組合在一起，變成多樣的3D介面
建立組合 API：THREE.Group()

//建立一個組合
group = new THREE.Group()
scene.add(group)  //將組合新增進場景中渲染
複製程式碼

將建立好的3D圖形新增進組合中

API：group.add(mesh)

mesh 3D物體

運動起來

3D圖形已經在場景中渲染出來了，現在，則需要讓它們動起來！

function animate() {
  // 請求運動幀
  requestAnimationFrame(animate)
  render()
}

// 地球旋轉邏輯函式
function render() {
  // 更新效能監視器
  stats.update();
  camera.position.x += (mouseX - camera.position.x) * 0.05
  camera.position.y += (mouseX - camera.position.y) * 0.05
  // 拍攝角度， 可改變地球視角
  camera.lookAt(scene.position)
  // 地球自轉速度
  group.rotation.y -= 0.005
  // 運動核心 遞迴呼叫
  renderer.render(scene, camera)
}
複製程式碼

現在已經基本完成了3D地球的自轉

什麼是stats.js

說了Three.js，現在聊聊什麼是stats.js吧。stats.js 是一個 Three.js 開發的輔助庫，通過檢測動畫執行時的幀數，來測試WebGL程式碼的執行效能

stats.js使用

準備階段

類似於Three.js，stats.js也需要引入框架庫，並由div來渲染顯示效能測試介面

<!-- 用於顯示和統計圖形的效能 -->
<div id="stats-output"></div>
<!-- 引入stats.js庫 -->
<script src="./libs/stats.min.js"></script>
複製程式碼

開始使用

首先需要初始化stats

// stats效能檢測器初始化
stats = initStats();

function initStats() {
  stats = new Stats();
  //設定統計模式
  stats.setMode(0); // 0: fps, 1: ms
  //統計資訊顯示在左上角
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.left = '10px';
  stats.domElement.style.top = '10px';
  //將統計物件新增到對應的<div>元素中
  document.getElementById("stats-output").appendChild(stats.domElement);
  return stats;
}
複製程式碼

當場景變換時，也就是3D運動時，需要實時更新stats檢測器 API：stats.update(); 用於地球旋轉時，動態更新檢測情況

// 地球旋轉邏輯函式
function render() {
  // 更新效能監視器
  stats.update();
  
  camera.position.x += (mouseX - camera.position.x) * 0.05
  camera.position.y += (mouseX - camera.position.y) * 0.05
  // 拍攝角度， 可改變地球視角
  camera.lookAt(scene.position)
  // 地球自轉速度
  group.rotation.y -= 0.005
  // 核心 遞迴呼叫
  renderer.render(scene, camera)
}
複製程式碼

可以看到兩種檢測情況 stats.setMode(0); // 0: fps, 1: ms
引數0 顯示FPS

stats.setMode(1); // 0: fps, 1: ms
引數1 顯示MS

最後優化

1.通過滑鼠可控制地球角度

// 繫結滑鼠移動事件
document.addEventListener('mousemove', onDocumentMouseMove, false)

// 監聽滑鼠移動方向， 從而確定地球南北半球
function onDocumentMouseMove(ev) {
  ev = ev || event
  mouseX = ev.clientX - windowHalfX
  mouseY = ev.clientY - windowHalfY
}
複製程式碼

2.響應式

可根據視窗大小自動改變渲染圖形大小

// 視窗大小改變監聽
window.addEventListener('resize', onWindowResize, false)

// 監聽視窗大小， 從而根據視窗大小改變地球大小， 類似響應式
function onWindowResize() {
  windowHalfX = window.innerWidth / 2
  windowHalfY = window.innerHeight / 2
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
}
複製程式碼

好了，現在3D地球就基本上完成了~
完整程式碼

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WebGL之3D地球</title>
  <style>
    /* 禁止系統預設滾動條 */
    html,
    body {
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <!-- 用於顯示和統計圖形的效能 -->
  <div id="stats-output"></div>

  <!-- 作為Three.js渲染器輸出3D圖形 -->
  <canvas id="webglcanvas"></canvas>

  <!-- webgl庫 -->
  <script src="./libs/three.min.js"></script>
  <script src="./libs/stats.min.js"></script>
  <script>
    let canvas,  //畫布標籤  繪圖API
      stats,     //效能檢測器
      camera,    //相機
      scene,     //場景
      renderer,  //渲染器
      group,     //物體組
      mouseX = 0,  //滑鼠橫向位置
      mouseY = 0,  //滑鼠縱向位置
      windowHalfX = window.innerWidth / 2,  //視口大小的一般
      windowHalfY = window.innerHeight / 2; //視口大小的一半

    init()  //構建地球
    animate()  //使地球旋轉起來

    function init() {
      // 獲取canvas畫布
      canvas = document.getElementById('webglcanvas')
      // stats效能檢測器初始化
      stats = initStats();

      // 3D繪製
      // 相機
      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000)
      camera.position.z = 500  //相機的遠近

      // 場景
      scene = new THREE.Scene()

      // 建立一個組合
      group = new THREE.Group()
      scene.add(group)  //將組合新增進場景中渲染

      // 地球 數學形狀 貼圖
      let loader = new THREE.TextureLoader()
      loader.load('./img/land_ocean_ice_cloud_2048.jpg', function (texture) {
        // console.log(texture)
        let geometry = new THREE.SphereGeometry(200, 20, 20)  //形狀
        let material = new THREE.MeshBasicMaterial({ map: texture })  //材質
        let mesh = new THREE.Mesh(geometry, material)  //物體
        group.add(mesh)
      })

      // 渲染器
      renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true, // true/false表示是否開啟反鋸齒,
        /*
        alpha: false,              // true/false 表示是否可以設定背景色透明,
        precision: 'highp',        // highp/mediump/lowp 表示著色精度選擇,
        premultipliedAlpha: false, // true/false 表示是否可以設定畫素深度（用來度量影象的解析度）,
        maxLights: 3,              // 最大燈光數,
        stencil: false             // false/true 表示是否使用模板字型或圖案
        */
      })
      // 指定渲染器寬高
      renderer.setSize(window.innerWidth, window.innerHeight)

      // 繫結滑鼠移動事件
      document.addEventListener('mousemove', onDocumentMouseMove, false)

      // 視窗大小改變監聽
      window.addEventListener('resize', onWindowResize, false)
    }

    // 監聽滑鼠移動方向， 從而確定地球南北半球
    function onDocumentMouseMove(ev) {
      ev = ev || event
      mouseX = ev.clientX - windowHalfX
      mouseY = ev.clientY - windowHalfY
    }

    // 監聽視窗大小， 從而根據視窗大小改變地球大小， 類似響應式
    function onWindowResize() {
      windowHalfX = window.innerWidth / 2
      windowHalfY = window.innerHeight / 2
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      renderer.setSize(window.innerWidth, window.innerHeight)
    }

    function animate() {
      // 請求運動幀
      requestAnimationFrame(animate)
      render()
    }

    // 地球旋轉邏輯函式
    function render() {
      // 更新效能監視器
      stats.update();
      camera.position.x += (mouseX - camera.position.x) * 0.05
      camera.position.y += (mouseX - camera.position.y) * 0.05
      // 拍攝角度， 可改變地球視角
      camera.lookAt(scene.position)
      // 地球自轉速度
      group.rotation.y -= 0.005
      // 核心 遞迴呼叫
      renderer.render(scene, camera)
    }

    function initStats() {
      stats = new Stats();
      //設定統計模式
      stats.setMode(0); // 0: fps, 1: ms
      //統計資訊顯示在左上角
      stats.domElement.style.position = 'absolute';
      stats.domElement.style.left = '10px';
      stats.domElement.style.top = '10px';
      //將統計物件新增到對應的<div>元素中
      document.getElementById("stats-output").appendChild(stats.domElement);
      return stats;
    }

    // ecchat 資料視覺化
    // 平面的世界是錯誤的， css  perspective:1000px  transform-style:perserve-3d
    // Camera Scene render(渲染容器) Light  ->  canvas
  </script>
</body>

</html>
複製程式碼

圖片素材和js庫可以到我的github上下載：
github.com/FightingHao…

第一次在掘金上發文章，希望大家可以點點贊哈哈~

WebGL之繪製三維地球
2021-04-26
Web
WebGL 3d賀卡
2019-04-26
Web3D
WebGL入門之基於WebGL的3D視覺化引擎介紹
2022-11-29
Web3D視覺化
WebGL展示3D房屋內景
2018-05-31
Web3D
WebGL學習(3) - 3D模型
2017-12-27
Web3D模型
WebGL 3D 電信機架實戰之資料繫結
2018-03-22
Web3D
WebGL 的 3D 模型交併補
2020-04-06
Web3D模型
WebGL 3D概念講解(著色器)
2018-12-15
Web3D
使用WebGL 2.0更快地渲染 3D
2017-03-21
Web3D
基於 WebGL 的 3D 電信機架之資料繫結
2019-03-15
Web3D
WebGL自學課程(10):通過OpenStreetMap獲取資料繪製地球
2012-09-13
Web
基於 WebGL 的 3D Chart 圖表
2019-04-29
Web3D
WebGL 3D on iOS8 正式版
2014-09-18
Web3DiOS
分享一個WebGL開發的網站-用JavaScript + WebGL開發3D模型
2018-08-28
Web網站JavaScript3D模型
飛一般的WebGL之唱起3D程式設計前的戰歌
2019-03-02
Web3D程式設計
WebGL 3D 工業隧道監控實戰
2018-03-26
Web3D
用webgl打造自己的3D迷宮遊戲
2016-09-19
Web3D遊戲
three.js實現的地球3D旋轉效果
2017-04-17
JS3D
WebGL之延遲著色
2020-09-18
Web
基於 HTML5 WebGL 的 3D 挖掘機
2020-04-06
HTMLWeb3D
WebGL 手擼3d賀卡+小草飄動濾鏡
2019-04-26
Web3D
基於 HTML5 WebGL 的 3D 機房
2018-03-16
HTMLWeb3D
WebGL之物體選擇
2019-05-29
Web
基於 HTML5 WebGL 的 3D 科幻風機
2020-04-06
HTMLWeb3D
基於 HTML5 的 WebGL 3D 隧道監控
2019-03-18
HTMLWeb3D
3D繪圖：18個WebGL開源引擎框架及Web 3D圖形庫
2023-02-10
3D繪圖Web框架
WebGL學習之HDR與Bloom
2019-05-21
WebOOM
基於 WebGL 的 HTML5 3D 工控裙房系統
2019-03-27
WebHTML3D
基於 HTML5 WebGL 的 3D 模型斜面生成
2019-03-11
HTMLWeb3D模型
基於 WebGL HTML5 的 3D 模型分離控制
2019-04-30
WebHTML3D模型
基於 HTML5 WebGL 的 3D 工控裙房系統
2019-02-16
HTMLWeb3D
基於Web的6個完美3D圖形WebGL庫
2023-02-14
Web3D
基於 HTML5 WebGL 的 3D “彈力”佈局
2017-11-22
HTMLWeb3D
透過WebGL 3D看動畫Easing函式本質
2014-05-29
Web3D動畫函式
[WebGL入門]三，3D繪圖的基礎知識
2014-07-30
Web3D繪圖
WebGL實現HTML5的3D貪吃蛇遊戲
2015-11-24
WebHTML3D遊戲
基於 HTML5 WebGL 的 3D 網路拓撲圖
2020-04-06
HTMLWeb3D
基於 HTML5 WebGL 構建智慧城市 3D 場景
2020-04-06
HTMLWeb3D

WebGL之3D地球

什麼是Three.js

Three.js使用方法

準備階段

建立場景素材

建立3D圖形

建立組合

將建立好的3D圖形新增進組合中

運動起來

什麼是stats.js

stats.js使用

準備階段

開始使用

最後優化

1.通過滑鼠可控制地球角度

2.響應式

相關文章