一、前言
微信小游戲中最魔性的‘跳一跳’就是基於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()
五、效果
您可能感興趣的
原文鏈接：https://blog.csdn.net/Register_man/article/details/78950187