微信小遊戲學習筆記 - 使用three.js 繪製一個旋轉的三角形

three.js是一個可使用javascript繪製3d圖形的庫，它對WebGL的api進行封裝，使開發更加方便，就像jQuery對DOM的api進行封裝同樣。接下來就記錄一下在小遊戲中繪製一個 旋轉的三角形的步驟：

一. 初始化項目

下載微信官方的開發者工具，而後新建項目

appid選擇測試號便可，項目路徑自行指定

用編輯器打開項目，獲得以下目錄：

而後除了game.js，game.json, project.config.json所有刪除，並把game.js中的內容清空。

game.js是整個小遊戲的入口，game.json是小遊戲配置。具體參考文檔。

二. 引入three.js 和 Adapter

• Adapter

  小遊戲的運行環境中是沒有 BOM 和 DOM 的，使用 wx API 模擬 BOM 和 DOM 的代碼組成的庫稱之爲 Adapter。官方提供了一個Adapter，用它就好了。

  Adapter文檔

• three.js

  gitHub地址

  

  複製three.min.js中的內容

新建目錄libs，將three.js和Adapter的源碼放在該目錄下

在game.js中添加：

import './libs/weapp-adapter'
import * as THREE from './libs/three'
複製代碼

三. 繪製三角形

根據adapter的文檔只要引入了adapter就會建立一個上屏 Canvas，並暴露爲一個全局變量 canvas。

使用three.js渲染一個圖形必備的三個條件：渲染器，場景，相機

• Renderer 渲染器

  渲染器看名字就知道了，就是用於將圖形渲染到屏幕上的方法。

• Scene 場景

  假如把繪製的圖形看作是一個個物體的話，那麼場景就是用來存放這些物體的地方。

• Camera 相機

  相機就好像人的眼睛同樣，相機用於肯定在什麼地方去看場景中的物體，就好像有一個東西，不一樣的角度去看這個物體，看到的有多是不同的形狀。

在game.js 中建立這三個東西

import './libs/weapp-adapter'
import * as THREE from './libs/three'

const width = window.innerWidth
const height = window.innerHeight
// 建立WebGL渲染器
const renderer = new THREE.WebGLRenderer({
  // 因爲weapp-adapter會自動建立一個全屏的canvas因此這裏直接用
  canvas
})

// 建立場景
const scene = new THREE.Scene()

/** 
 * OrthographicCamera是正交相機，
 * 在這種投影模式下，不管物體距離相機距離遠或者近，在最終渲染的圖片中物體的大小都保持不變。 
*/
const camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 1000)
複製代碼

new THREE.OrthographicCamera 的參數能夠參考官方文檔或者Three.js基礎探尋二——正交投影照相機

如今必要的三個條件都有了，就要添加物體到場景中了。

物體在three.js中叫作mesh，它由幾何體（geometry）和材料（material）組成。

個人理解就是幾何體就是物體的基本形狀，就像WebGL中的頂點着色器，材料就是幾何體的顏色啊，光照等信息，就像WebGL中的片元着色器。

three.js中提供了不少幾何體，可是好像沒有基本的三角形，因此要本身畫一個三角形。

在game.js 中添加：

// 畫一個三角形
const triangleShape = new THREE.Shape()
triangleShape.moveTo(0, 100)  // 三角形起始位置
triangleShape.lineTo(-100, -100)
triangleShape.lineTo(100, -100)
triangleShape.lineTo(0, 100)
複製代碼

這裏說一下three.js的座標系

有了三角形的基本形狀，經過three.js中提供的api，將這個三角形變成幾何體

在game.js 中添加：

// 將三角形變成組成物體的幾何體
const geometry = new THREE.ShapeGeometry(triangleShape)
複製代碼

組成物體的幾何體就搞定了。

而後就是材料了：

在game.js 中添加：

// 物體的材料
const material = new THREE.MeshBasicMaterial({
  color: new THREE.Color('#7fffd4'),  // 顏色信息
  side: THREE.DoubleSide         // 用於肯定渲染哪一面，由於是旋轉的，因此須要正反面都渲染，也就是兩面
})
複製代碼

用幾何體 + 材料組成物體，並添加到場景中：

// 組成物體並添加到場景中
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, -200)  // 設置物體在場景中的位置
scene.add(mesh)
複製代碼

設置相機的位置以及看向的座標

camera.position.set(0, 0, 0)  // 相機位置
camera.lookAt(new THREE.Vector3(0, 0, -200)) // 讓相機從0, 0, 0 看向 0, 0, -200
複製代碼

最後一步就是渲染了：

renderer.setClearColor(new THREE.Color('#f84462')) // 設置背景色
renderer.setSize(width, height) // 設置最終渲染的尺寸
renderer.render(scene, camera)
複製代碼

這時候去在開發者工具中就能夠看到一個三角形了：

四. 讓三角形動起來

const render = () => {
  mesh.rotateY(0.05)  // three.js 中旋轉角度是經過弧度計算的，公式：度＝弧度×180°/π
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}

render()
複製代碼

效果：

完整代碼：

import './libs/weapp-adapter'
import * as THREE from './libs/three'

const width = window.innerWidth
const height = window.innerHeight
// 建立WebGL渲染器
const renderer = new THREE.WebGLRenderer({
  // 因爲weapp-adapter會自動建立一個全屏的canvas因此這裏直接用
  canvas
})

// 建立場景
const scene = new THREE.Scene()

/** 
 * OrthographicCamera是正交相機，
 * 在這種投影模式下，不管物體距離相機距離遠或者近，在最終渲染的圖片中物體的大小都保持不變。 
*/
const camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 1000)


// 畫一個三角形
const triangleShape = new THREE.Shape()
triangleShape.moveTo(0, 100)  // 三角形起始位置
triangleShape.lineTo(-100, -100)
triangleShape.lineTo(100, -100)
triangleShape.lineTo(0, 100)
// 將三角形變成組成物體的幾何體
const geometry = new THREE.ShapeGeometry(triangleShape)

// 物體的材料
const material = new THREE.MeshBasicMaterial({
  color: new THREE.Color('#7fffd4'),  // 顏色信息
  side: THREE.DoubleSide         // 用於肯定渲染哪一面，由於是旋轉的，因此須要正反面都渲染，也就是兩面
})

// 組成物體並添加到場景中
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, -200)  // 設置物體在場景中的位置
scene.add(mesh)

camera.position.set(0, 0, 0)  // 相機位置
camera.lookAt(new THREE.Vector3(0, 0, -200)) // 讓相機從0, 0, 0 看向 0, 0, -200

renderer.setClearColor(new THREE.Color('#f84462')) // 設置背景色
renderer.setSize(width, height) // 設置最終渲染的尺寸

const render = () => {
  mesh.rotateY(0.05)  // three.js 中旋轉角度是經過弧度計算的，公式：度＝弧度×180°/π
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}

render()
複製代碼