微信小遊戲開發之四：使用three.js引擎

一、前言

微信小遊戲中最魔性的‘跳一跳’就是基於three.js 引擎開發的

看這裏！！！！不要再讓我發郵箱了！

源碼放到github上了：GitHub地址   請自行下載。

二、下載

three.min.js 打開頁面，複製代碼到本地

三、引用

使用如下方式在小遊戲中引用three

let THREE = require('three.min.js的路徑')

四、開始

創建3dgame.js文件

需要注意的是，在微信小遊戲中並沒有‘ImageBitmap’這個全局對象，所以在加載紋理貼圖時會報錯，此時需要修改源碼

let THREE = require('./three/three')

export default class Game3d {
    constructor() {
        // 場景
        this.scene = new THREE.Scene();
        // 透視攝像頭
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // webGL渲染器
        // 同時指定canvas爲小遊戲暴露出來的canvas
        this.renderer = new THREE.WebGLRenderer({
            canvas: canvas
        });
        this.start()
    }
    start() {
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        var geometry = new THREE.CubeGeometry(1, 1, 1);
        // 加載紋理貼圖
        var texture = new THREE.TextureLoader().load("images/metal.jpg");
        var material = new THREE.MeshBasicMaterial({ map: texture });
        this.cube = new THREE.Mesh(geometry, material);
        this.scene.add(this.cube);
        // 設置camera的高度，若是低於當前場景的高度則屁也看不到
        this.camera.position.z = 2.5;
        this.cube.castShadow = true
        console.log(this.cube)
        window.requestAnimationFrame(this.loop.bind(this), canvas);
    }
    update() {
        this.cube.rotation.x += 0.02;
        this.cube.rotation.y += 0.04;
        this.cube.rotation.z += 0.06;
    }
    loop() {
        this.update()
        this.renderer.render(this.scene, this.camera);
        window.requestAnimationFrame(this.loop.bind(this), canvas);
    }
}

在game.js中調用

import './js/libs/weapp-adapter'
import './js/libs/symbol'

import Game3d from './3dgame'

new Game3d()

五、效果