從1開始學習THREE.js

爲何不是從零開始呢? 由於這裏面確實涉及到不少編程知識須要有必定基礎, 特別是面向對象的設計模式, 0基礎要看懂仍是很難很難.

整個系列將會基於THREEjs權威指南的知識體系, 力圖撥絲抽繭.

我將分爲幾個模塊來一步步梳理, 主要分爲如下幾個部分:

• 總體描述
• 場景
• 光源
• 材質
• 幾何體
• 粒子, 精靈, 點雲
• 建立動畫和移動攝像機
• 高級用法
  • 高級的集合體的操做
  • 建立高級網絡和幾何體
  • 加載使用紋理
  • 着色器
  • 物理引擎

總體描述

總體流程

整個THREjs的最核心部分就是如下的流程

1. 建立一個場景scene --> 一個容器, 保存和跟蹤索要渲染的物體和光源, 沒有它就沒法渲染任何物體
2. 添加攝像機 --> 決定可以看到場景中的內容
3. 添加光源 --> 決定材質的表面, 亮度等
4. 添加參考平面,帶材質的物體 --> 組成複雜場景的原子
5. 添加渲染器 --> 基於攝像機的角度計算場景應該被渲染成什麼樣, 會使用WebGL技術使用顯卡進行場景渲染.
6. 對物體,物體集合或攝像機進行控制並對渲染器進行循環渲染以產生動畫 --> 會使用requestAnimationFrame使動畫更平滑.
7. 氪金皮膚--着色器, 紋理等
8. 模擬天然--物理引擎
9. 添加到HTML的DOM節點中
10. renderer進行渲染

其中最後兩個不是必須會的, 並且須要第三方的庫的支持可供選擇的格式也有不少種, 我會盡量在後面對應章節中舉實例來講明.

以上流程其實就是一堆API的調用, 全局有個THREE對象, 封裝了全部的方法, 跟jQuery的$符相似.

總體代碼

本系列的全部代碼都力圖不用使用webpack等打包方式來實現. 文件較大, 官方不推薦使用script在線引用, 請下載build版本到本地路徑, 而後再行引入, 除此以外, 還須要設置一些全局樣式以更好的進行內容呈現

設置全局樣式

body { margin: 0; }
canvas { width: 100%; height: 100% }
複製代碼

建立第一個場景

如下代碼只會簡略說明, 具體每個對象的用法會在以後的文章中一一介紹詳情.

這第一個場景將會包含基本材質,基本集合體,平面, 攝像機, 輔助axes. 最終的效果爲:

function init() {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
  const renderer = new THREE.WebGLRenderer()
  renderer.setClearColor(new THREE.Color(0x000000))
  renderer.setSize(window.innerWidth, window.innerHeight)

  const axes = new THREE.AxesHelper(20)
  scene.add(axes)

  const planeGeometry = new THREE.PlaneGeometry(60, 20)
  const planeMaterial = new THREE.MeshBasicMaterial({color: 'grey'})
  const plane = new THREE.Mesh(planeGeometry, planeMaterial)
  plane.rotation.x = -0.5 * Math.PI
  plane.position.set(15, 0, 0)
  scene.add(plane)

  const cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
  const cubeMaterial = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 'red',
  })
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

  cube.position.set(-4, 4, 4)
  scene.add(cube)

  camera.position.set(-30, 30, 30)
  camera.lookAt(scene.position)
  // 將render的dom對象放到DOM中進行渲染
  document.getElementById('webgl-output').appendChild(renderer.domElement)
  renderer.render(scene, camera)
}
複製代碼

上述代碼其實就是最開始咱們說的如何建立一個THREEjs的流程, 每一個API的具體用法, 好比PerspectiveCamera, Geometry等會在以後的文章中一一進行解釋.

有不少數據不是隨意設置的, 好比cube的Geometry設置爲4,4,4, 也就是長寬高, 那麼再去設置它的position的時候須要注意, 若是設置爲-4,-4,-4, 那麼cube就會在平面的下方, 也就看不見cube了, 仍是須要一些基礎的幾何學基礎, 因此不能說從零開始學.不過難度不會很大, 請讀者放心.

本章具體代碼以及每行的註釋請參見github

最後再引入一個全局都會使用到的一個輔助工具, dat.gui, 能夠很方便的使用GUI的方式控制某些參數., 下面的參數就是用於控制cube的座標位置

// 添加control.js
import * as dat from 'dat.gui'
const gui = new dat.GUI()

export const controller = {
  x : -4,
  y : 4,
  z : 4,
}

gui.add(controller, 'x', -10, 10)
gui.add(controller, 'y', -10, 10)
gui.add(controller, 'z', -10, 10)
複製代碼

而後再使用requestAnimationFrame這個全局方法來實時響應式更新場景

const render = function() {
  cube.position.x = controller.x
  cube.position.y = controller.y
  cube.position.z = controller.z
  // 進行渲染
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}
複製代碼

這樣在界面中就能夠看到cube的移動了

動畫也是如此原理, 只須要使用

// 沿x軸移動
cube.position.x += 0.02
複製代碼

下一篇會說到場景相關的東西.

封面圖來自threejs.org