微信小游戲之使用three.js 繪制一個旋轉(zhuǎn)的三角形
three.js是一個可以使用javascript繪制3d圖形的庫，它對WebGL的api進(jìn)行封裝，使開發(fā)更加方便，就像jQuery對DOM的api進(jìn)行封裝一樣。接下來就記錄一下在小游戲中繪制一個 旋轉(zhuǎn)的三角形的步驟：
一. 初始化項(xiàng)目
下載微信官方的開發(fā)者工具，然后新建項(xiàng)目
appid選擇測試號即可，項(xiàng)目路徑自行指定
用編輯器打開項(xiàng)目，得到如下目錄：
然后除了game.js，game.json, project.config.json全部刪除，并把game.js中的內(nèi)容清空。
game.js是整個小游戲的入口，game.json是小游戲配置。具體參考文檔。
二. 引入three.js 和 Adapter
Adapter
小游戲的運(yùn)行環(huán)境中是沒有 BOM 和 DOM 的，使用 wx API 模擬 BOM 和 DOM 的代碼組成的庫稱之為 Adapter。官方提供了一個Adapter，用它就行了。
three.js
復(fù)制three.min.js中的內(nèi)容
新建目錄libs，將three.js和Adapter的源碼放在該目錄下
在game.js中添加：
import './libs/weapp-adapter' import * as THREE from './libs/three'
三. 繪制三角形
根據(jù)adapter的文檔只要引入了adapter就會創(chuàng)建一個上屏 Canvas，并暴露為一個全局變量 canvas。
使用three.js渲染一個圖形必備的三個條件：渲染器，場景，相機(jī)
Renderer 渲染器
渲染器看名字就知道了，就是用于將圖形渲染到屏幕上的方法。
Scene 場景
假如把繪制的圖形看做是一個個物體的話，那么場景就是用來存放這些物體的地方。
Camera 相機(jī)
相機(jī)就好像人的眼睛一樣，相機(jī)用于確定在什么地方去看場景中的物體，就好像有一個東西，不同的角度去看這個物體，看到的有可能是不一樣的形狀。
在game.js 中創(chuàng)建這三個東西
import './libs/weapp-adapter'
import * as THREE from './libs/three'
const width = window.innerWidth
const height = window.innerHeight
// 創(chuàng)建WebGL渲染器
const renderer = new THREE.WebGLRenderer({
// 由于weapp-adapter會自動創(chuàng)建一個全屏的canvas所以這里直接用
canvas
})
// 創(chuàng)建場景
const scene = new THREE.Scene()
/**
* OrthographicCamera是正交相機(jī)，
* 在這種投影模式下，無論物體距離相機(jī)距離遠(yuǎn)或者近，在最終渲染的圖片中物體的大小都保持不變。
*/
const camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 1000)
new THREE.OrthographicCamera 的參數(shù)可以參考官方文檔或者 Three.js基礎(chǔ)探尋二——正交投影照相機(jī)
現(xiàn)在必要的三個條件都有了，就要添加物體到場景中了。
物體在three.js中叫做mesh，它由幾何體（geometry）和材料（material）組成。
我的理解就是幾何體就是物體的基本形狀，就像WebGL中的頂點(diǎn)著色器，材料就是幾何體的顏色啊，光照等信息，就像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的坐標(biāo)系
有了三角形的基本形狀，通過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 // 用于確定渲染哪一面，因?yàn)槭切D(zhuǎn)的，所以需要正反面都渲染，也就是兩面
})
用幾何體 + 材料組成物體，并添加到場景中：
// 組成物體并添加到場景中 const mesh = new THREE.Mesh(geometry, material) mesh.position.set(0, 0, -200) // 設(shè)置物體在場景中的位置 scene.add(mesh)
設(shè)置相機(jī)的位置以及看向的坐標(biāo)
camera.position.set(0, 0, 0) // 相機(jī)位置 camera.lookAt(new THREE.Vector3(0, 0, -200)) // 讓相機(jī)從0, 0, 0 看向 0, 0, -200
最后一步就是渲染了：
renderer.setClearColor(new THREE.Color('#f84462')) // 設(shè)置背景色
renderer.setSize(width, height) // 設(shè)置最終渲染的尺寸
renderer.render(scene, camera)
這時候去在開發(fā)者工具中就可以看到一個三角形了：
四. 讓三角形動起來
const render = () => {
mesh.rotateY(0.05) // three.js 中旋轉(zhuǎn)角度是通過弧度計(jì)算的，公式：度＝弧度×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
// 創(chuàng)建WebGL渲染器
const renderer = new THREE.WebGLRenderer({
// 由于weapp-adapter會自動創(chuàng)建一個全屏的canvas所以這里直接用
canvas
})
// 創(chuàng)建場景
const scene = new THREE.Scene()
/**
* OrthographicCamera是正交相機(jī)，
* 在這種投影模式下，無論物體距離相機(jī)距離遠(yuǎn)或者近，在最終渲染的圖片中物體的大小都保持不變。
*/
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 // 用于確定渲染哪一面，因?yàn)槭切D(zhuǎn)的，所以需要正反面都渲染，也就是兩面
})
// 組成物體并添加到場景中
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, -200) // 設(shè)置物體在場景中的位置
scene.add(mesh)
camera.position.set(0, 0, 0) // 相機(jī)位置
camera.lookAt(new THREE.Vector3(0, 0, -200)) // 讓相機(jī)從0, 0, 0 看向 0, 0, -200
renderer.setClearColor(new THREE.Color('#f84462')) // 設(shè)置背景色
renderer.setSize(width, height) // 設(shè)置最終渲染的尺寸
const render = () => {
mesh.rotateY(0.05) // three.js 中旋轉(zhuǎn)角度是通過弧度計(jì)算的，公式：度＝弧度×180°/π
renderer.render(scene, camera)
requestAnimationFrame(render)
}
render()
總結(jié)
以上所述是小編給大家介紹的微信小游戲之使用three.js 繪制一個旋轉(zhuǎn)的三角形,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
gulp-uglify 與gulp.watch()配合使用時報(bào)錯(重復(fù)壓縮問題)
gulp是基于Nodejs的自動任務(wù)運(yùn)行器，gulp 和 grunt 非常類似，但相比于 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構(gòu)建工作。今天在學(xué)習(xí)gulp時遇到當(dāng)用gulp.watch來監(jiān)聽js文件的變動時出現(xiàn)重復(fù)壓縮問題，下面小編給大家解答下2016-08-08
Javascript實(shí)現(xiàn)計(jì)算個人所得稅
用javascript腳本語言編寫一個“個人所得稅計(jì)算器”？計(jì)算公式：所得稅=（月收入-起征額）*10%；重填就是全部清空；十分的實(shí)用，有需要的小伙伴可以參考下。2015-05-05
Echarts.js實(shí)現(xiàn)水滴球和海洋效果
這篇文章介紹了Echarts.js實(shí)現(xiàn)水滴球和海洋效果的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
js使用for循環(huán)與innerHTML獲取選中tr下td值
這篇文章主要與大家分享了js使用for循環(huán)與innerHTML獲取選中tr下td值的方法，很簡單，但很實(shí)用，有需要的朋友可以參考下2014-09-09
這篇文章主要介紹了JS修改iframe頁面背景顏色的方法,涉及javascript操作iframe頁面樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
javascript實(shí)現(xiàn)焦點(diǎn)滾動圖效果 具體方法
以下JS代碼實(shí)現(xiàn)了焦點(diǎn)滾動圖的效果方法，有需要的朋友可以參考一下2013-06-06
基于JavaScript實(shí)現(xiàn)新年賀卡特效
本文介紹了一款超級炫酷的2022新年快樂html網(wǎng)頁特效，霓虹的城市夜景和絢爛的煙花很是特別，該html頁面還有交互效果，點(diǎn)擊鼠標(biāo)就會呈現(xiàn)煙花綻放的特效。需要的可以參考一下2022-01-01
本文主要介紹了利用display的none與block判斷登錄界面的賬號密碼是否為空的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
現(xiàn)如今，二維碼無處不在，掃一掃送抽紙，那么基于js二維碼是如何生成的呢？面對這一問題，下面小編給分享一代碼介紹javascript生成二維碼圖片小結(jié)，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
js String對象中常用方法小結(jié)(字符串操作)
js String對象中常用方法小結(jié),需要的朋友可以參考下2012-01-01