環(huán)境配置
下載開發(fā)者工具
下載地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
微信小程序/小游戲的開發(fā)需要在專門的開發(fā)者工具中，可下載最近更新的穩(wěn)定版，若之前沒有使用過微信開發(fā)的話，進入 小游戲開發(fā)指南填寫和提交相關的注冊信息。
如圖新建一個空目錄，選擇該目錄建立自己的項目。
選擇小游戲打開后會默認進入一個示例小游戲，在模擬器中可以將聲音關閉：
目錄結構
以上為小游戲的目錄，紅色方框里的為小程序的常規(guī)配置，具體內容見文檔：微信配置文檔。其它目錄：
- audio ：存放音頻文件
- images： 圖片資源
- js： 游戲邏輯的具體實現(xiàn)，需要的工具類庫等
- databus.js：管控游戲狀態(tài)
- game.js：打包入口
- game.json：微信小游戲配置，參考文檔：小游戲配置
./js中內容如下，里面基本所有的代碼我們都可以舍棄，但是有一個依賴包很重要：weapp-adapter.js 。這個包為微信小程序環(huán)境創(chuàng)建了類似與WEB瀏覽器的一系列 API 與 DOM，其中就包括了 canvas 。
./js
├── base // 定義游戲開發(fā)基礎類
│ ├── animatoin.js // 幀動畫的簡易實現(xiàn)
│ ├── pool.js // 對象池的簡易實現(xiàn)
│ └── sprite.js // 游戲基本元素精靈類
├── libs
│ ├── symbol.js // ES6 Symbol簡易兼容
│ └── weapp-adapter.js // 小游戲適配器
├── npc
│ └── enemy.js // 敵機類
├── player
│ ├── bullet.js // 子彈類
│ └── index.js // 玩家類
├── runtime
│ ├── background.js // 背景類
│ ├── gameinfo.js // 用于展示分數(shù)和結算界面
│ └── music.js // 全局音效管理器
├── databus.js // 管控游戲狀態(tài)
└── main.js // 游戲入口主函數(shù)
引入Three.js
現(xiàn)在我們還缺少Three.js，因為我在其它項目中使用過 three ，從node_modules找到three，把編譯后的文件放到libs目錄下即可。
在小程序中運行 threejs
目標效果
我們的目標是把博文threejs-場景創(chuàng)建中的效果搬到小屏幕上，在web端運行效果如下。
小程序代碼
代碼邏輯和在web端是完全一樣的，唯一的區(qū)別就是在小程序中無法使用框架（react）,需要使用原生JS寫法，不過問題不大。
import * as THREE from './js/libs/three.js'
import './js/libs/weapp-adapter.js'
// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setClearColor(new THREE.Color(0x000000)); // 設置背景顏色和透明度
renderer.shadowMap.enabled = true; // 渲染器允許渲染陰影?
renderer.setSize(window.innerWidth, window.innerHeight)
// 創(chuàng)建場景
const scene = new THREE.Scene()
// 創(chuàng)建相機并設置屬性
const camera = new THREE.PerspectiveCamera()
camera.aspect = (window.innerWidth / window.innerHeight) // 攝像機設置屏幕寬高比
camera.fov = 45; // 攝像機的視角
camera.near = 0.01; // 近面距離
camera.far = 1001; // 遠面距離
camera.position.set(30, 40, 30) // 設置攝像機在threejs坐標系中的位置
camera.lookAt(0, 0, 0) // 攝像機的指向
// 添加一個坐標軸
const axes = new THREE.AxesHelper(20);
scene.add(axes);
// 添加一個地板
const planeGeometry = new THREE.PlaneGeometry(60, 20); // 創(chuàng)建平面幾何體
const planeMaterial = new THREE.MeshBasicMaterial({ // 一種非光澤表面的材質，沒有鏡面高光
color: 0xAAAAAA
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial); // 創(chuàng)建地板模型
plane.rotation.x = -0.5 * Math.PI; // 默認平行于xoy面，沿著X軸旋轉-90°至xoz面
plane.receiveShadow = true;
scene.add(plane); // 向場景中添加創(chuàng)建的地板
// 添加一個球體
const sphereGeometry = new THREE.SphereGeometry(4, 20, 20); // 球狀幾何體
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x7777FF, side: THREE.DoubleSide });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true; // 允許接受陰影
sphere.position.set(20, 4, 2); // 球模型在坐標系中位置
scene.add(sphere); // 向場景中添加光源
// 添加一個立方體
const cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 'blue' })
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.set(-20, 2.5, 0);
scene.add(cube)
let step = 0;
const cubrRoatetSpeed = 0.03;
const sphereRotateSpeed = 0.03
const animate = function () {
step += sphereRotateSpeed
sphere.position.x = 20 + (10 * Math.cos(step)); //水平方向為余弦曲線
sphere.position.y = 4 + (10 * Math.abs(Math.sin(step))); // 豎直方向為正弦曲線
// // 立方體添加旋轉效果
cube.rotation.x += cubrRoatetSpeed;
cube.rotation.y += cubrRoatetSpeed;
cube.rotation.z += cubrRoatetSpeed;
}
const render = function () {
animate()
renderer.render(scene, camera)
requestAnimationFrame(render)
}
render()
打開微信開發(fā)者工具，查看效果：
這里發(fā)現(xiàn)兩個問題：文章來源：http://www.zghlxwxcb.cn/news/detail-441647.html
- 使用 MeshLambertMaterial 材質時顏色沒有生效，只能換成 MeshBasicMaterial
- 原生threejs 的陰影沒有生效，可能需要書寫webgl來解決這個問題。
看來threejs在小程序上的適配還是有很大問題，不過也可以理解，畢竟小程序的運行環(huán)境與瀏覽器是完全不同的。但是目標已經(jīng)完成，工程代碼可下載。文章來源地址http://www.zghlxwxcb.cn/news/detail-441647.html
到了這里，關于微信3D小游戲系列一：在微信小游戲中使用threejs的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
