微信3d小游戏(three)-搭建框架

目录

引入three.js

MVP基础项目搭建

MVC框架pages页面搭建

---

引入three.js

1. 新建项目（game.js、game.json、project.config.json）

game.json:(设置竖屏)

{

"deviceOrientation": "portrait"

}

1. 下载weapp-adapter包，编译npm run build 得到dist/weapp-adapter.js
2. 在game.js加载lib/three.js、weapp-adater.js

game.js

/* 小游戏入口文件*/

import adapter from './libs/weapp-adapter.js'//操作BOM、DOM结点

import * as THREE from './libs/three.js'//引入three

MVP基础项目搭建

game.js

/* 小游戏入口文件*/

import adapter from './libs/weapp-adapter.js'//操作BOM、DOM结点

import main from './src/main.js'

 

main.init()//初始化

main.js

import * as THREE from '../libs/three.js'//引入three

window.THREE = THREE//在window下加载three

class Main{//声明main类

constructor (){

 

}

init (){

}

}

export default new Main()

截图

 

MVC框架pages页面搭建

1. Src/pages/game-page.js

export default class GamePage{

constructor(callbacks){

this.callbacks = callbacks

}

 

init(){

console.log('game page init')

}

restart(){

console.log('game page restart')

}

}

2.src/pages/game-over-page.js

export default class GamePage{

constructor(callbacks){

this.callbacks = callbacks

}

 

init(){

console.log('gameover page init')

}

show(){

console.log('gameover page show')

}

}

3.src/game/view.js

import GamePage from '../pages/game-page'

import GameOverPage from '../pages/game-over-page'

 

class GameView{

constructor (){

 

}

showGameOverPage(){

this.gameOverPage.show()

}

restartGame(){

this.gamePage.restart()

}

initGameOverPage(callbacks){

this.gameOverPage = new GameOverPage(callbacks)

this.gameOverPage.init()

}

initGamePage(callbacks){

this.gamePage = new GamePage(callbacks)

this.gamePage.init()

}

}

export default new GameView()

4.src/game/controller.js

import gameView from './view'

import gameModel from './model'

 

class GameController{

constructor (){//初始化构造

this.gameView = gameView

this.gameModel = gameModel

}

showGameOverPage = () => {

this.gameView.showGameOverPage()

}

restratGame = () => {

this.gameView.restratGame()

}

initPages(){

const gamePageCallbacks = {

showGameOverPage: this.showGameOverPage

}

const gameOverPageCallbacks = {

gameRestart: this.restratGame

}

this.gameView.initGamePage(gamePageCallbacks)

this.gameView.initGameOverPage(gameOverPageCallbacks)

}

}

export default new GameController()

5.src/game/game.js

//游戏入口文件

import gameController from './controller'

class Game{

constructor(){

this.gameController = gameController

}

 

init (){

this.gameController.initPages()

}

}

export default new Game()

6.src/utils/event.js

class Event {//维护callback

constructor (sender){

this._sender = sender

this._listeners = []

}

attach (callback){

this._listeners.push(callback)

}

notify(args){//遍历回调

for (let i = 0; i < this._listeners.length; i++) {

this._listeners[i](sender,args)

}

}

}

export default Event