欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小游戲之使用three.js 繪制一個(gè)旋轉(zhuǎn)的三角形

 更新時(shí)間：2019年06月10日 09:53:07   作者：MADAO是不會(huì)開花的  
three.js是一個(gè)可以使用javascript繪制3d圖形的庫(kù)，它對(duì)WebGL的api進(jìn)行封裝，使開發(fā)更加方便，就像jQuery對(duì)DOM的api進(jìn)行封裝一樣。這篇文章主要介紹了微信小游戲之使用three.js 繪制一個(gè)旋轉(zhuǎn)的三角形,需要的朋友可以參考下

three.js是一個(gè)可以使用javascript繪制3d圖形的庫(kù)，它對(duì)WebGL的api進(jìn)行封裝，使開發(fā)更加方便，就像jQuery對(duì)DOM的api進(jìn)行封裝一樣。接下來(lái)就記錄一下在小游戲中繪制一個(gè) 旋轉(zhuǎn)的三角形的步驟：

一. 初始化項(xiàng)目

下載微信官方的開發(fā)者工具，然后新建項(xiàng)目

appid選擇測(cè)試號(hào)即可，項(xiàng)目路徑自行指定

用編輯器打開項(xiàng)目，得到如下目錄：

然后除了game.js，game.json, project.config.json全部刪除，并把game.js中的內(nèi)容清空。

game.js是整個(gè)小游戲的入口，game.json是小游戲配置。具體參考文檔。

二. 引入three.js 和 Adapter

Adapter

小游戲的運(yùn)行環(huán)境中是沒(méi)有 BOM 和 DOM 的，使用 wx API 模擬 BOM 和 DOM 的代碼組成的庫(kù)稱之為 Adapter。官方提供了一個(gè)Adapter，用它就行了。

Adapter文檔

three.js

gitHub地址

復(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就會(huì)創(chuàng)建一個(gè)上屏 Canvas，并暴露為一個(gè)全局變量 canvas。

使用three.js渲染一個(gè)圖形必備的三個(gè)條件：渲染器，場(chǎng)景，相機(jī)

Renderer 渲染器

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

Scene 場(chǎng)景

假如把繪制的圖形看做是一個(gè)個(gè)物體的話，那么場(chǎng)景就是用來(lái)存放這些物體的地方。

Camera 相機(jī)

相機(jī)就好像人的眼睛一樣，相機(jī)用于確定在什么地方去看場(chǎng)景中的物體，就好像有一個(gè)東西，不同的角度去看這個(gè)物體，看到的有可能是不一樣的形狀。

在game.js 中創(chuàng)建這三個(gè)東西

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會(huì)自動(dòng)創(chuàng)建一個(gè)全屏的canvas所以這里直接用
 canvas
})
// 創(chuàng)建場(chǎng)景
const scene = new THREE.Scene()
/** 
 * OrthographicCamera是正交相機(jī)，
 * 在這種投影模式下，無(wú)論物體距離相機(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)在必要的三個(gè)條件都有了，就要添加物體到場(chǎng)景中了。

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

我的理解就是幾何體就是物體的基本形狀，就像WebGL中的頂點(diǎn)著色器，材料就是幾何體的顏色啊，光照等信息，就像WebGL中的片元著色器。

three.js中提供了很多幾何體，但是好像沒(méi)有基本的三角形，所以要自己畫一個(gè)三角形。

在game.js 中添加：

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

這里說(shuō)一下three.js的坐標(biāo)系

有了三角形的基本形狀，通過(guò)three.js中提供的api，將這個(gè)三角形變成幾何體

在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)的，所以需要正反面都渲染，也就是兩面
})

用幾何體 + 材料組成物體，并添加到場(chǎng)景中：

// 組成物體并添加到場(chǎng)景中
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, -200) // 設(shè)置物體在場(chǎng)景中的位置
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)

這時(shí)候去在開發(fā)者工具中就可以看到一個(gè)三角形了：


四. 讓三角形動(dòng)起來(lái)

const render = () => {
 mesh.rotateY(0.05) // three.js 中旋轉(zhuǎn)角度是通過(guò)弧度計(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會(huì)自動(dòng)創(chuàng)建一個(gè)全屏的canvas所以這里直接用
 canvas
})
// 創(chuàng)建場(chǎng)景
const scene = new THREE.Scene()
/** 
 * OrthographicCamera是正交相機(jī)，
 * 在這種投影模式下，無(wú)論物體距離相機(jī)距離遠(yuǎn)或者近，在最終渲染的圖片中物體的大小都保持不變。 
*/
const camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 1000)
// 畫一個(gè)三角形
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)的，所以需要正反面都渲染，也就是兩面
})
// 組成物體并添加到場(chǎng)景中
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, -200) // 設(shè)置物體在場(chǎng)景中的位置
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)角度是通過(guò)弧度計(jì)算的，公式：度＝弧度×180°/π
 renderer.render(scene, camera)
 requestAnimationFrame(render)
}
render()

總結(jié)

以上所述是小編給大家介紹的微信小游戲之使用three.js 繪制一個(gè)旋轉(zhuǎn)的三角形,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論