微信3d小游戏(three)-逻辑设计与场景添加
目錄
2D畫布在three中整合
利用MVC頁面切換
Scene與Camera類設置
ES6繼承多態開發Block
2D畫布在three中整合
// import * as THREE from '../../libs/three.js'//智能提示用
export default class GamePage{
constructor(callbacks){
this.callbacks = callbacks
}
?
init(options){
this.initGameoverCanvas(options)
console.log('gameover page init')
}
initGameoverCanvas(options){
this.scene = options.scene//引進gamePage中的scene
const aspect = window.innerHeight/window.innerWidth//屏幕長寬比
this.canvas = document.createElement('canvas')//adapter中獲取的canvas
this.canvas.width = window.innerWidth
this.canvas.height = window.innerHeight
this.texture = new THREE.Texture(this.canvas)//定義texture
this.material = new THREE.MeshBasicMaterial({//材質
map:this.texture,
transparent:true,
side:THREE.DoubleSide
})
//定義形狀
this.geometry = new THREE.PlaneGeometry(window.innerWidth,window.innerHeight)
this.obj = new THREE.Mesh(this.geometry,this.material)
this.obj.position.z = 1
this.obj.rotation.y = Math.PI
this.context = this.canvas.getContext('2d')//獲取2d-canvas上下文
this.context.fillStyle='#333'//2D畫布填充灰色
//設置位置，寬高
this.context.fillRect((window.innerWidth-200)/2,(window.innerHeight-100)/2,200,100)
//設置文字
this.context.fillStyle='#eee'
this.context.font = '20px Georgia'
this.context.fillText('Game Over',(window.innerWidth-200)/2+50,(window.innerHeight-100)/2 +55)
//刷新
this.texture.needsUpdate = true
//添加
this.scene.add(this.obj)
}
show(){
console.log('gameover page show')
}
}
initGameOverPage(callbacks){//初始化
this.gameOverPage = new GameOverPage(callbacks)
this.gameOverPage.init({
scene:this.gamePage.scene//引入gamePage中的scene
})
}
2.pages/game-game.js
this.scene = scene//對外暴露scene
利用MVC頁面切換
import Event from '../utils/event.js'
?
class GameModel{
constructor(){
this.stage = ''
this.stageChanged= new Event(this)
}
getStage(){
return this.stage
}
setStage(stage){//設置傳入事件控制的參數
this.stage = stage
this.stageChanged.notify({
stage:stage
})
}
}
export default new GameModel()
2.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](this._sender,args)
}
}
}
export default Event
3.src/game/controller.js
在constructor中
this.gameModel.stageChanged.attach((sender,args)=>{//初始添加事件控制
const stageName = args.stage
switch (stageName) {
case 'game-over':
this.gameView.showGameOverPage()
break
case 'game':
this.gameView.showGamePage()
?
default:
break
}
})
在initPages中
const gamePageCallbacks = {
showGameOverPage: ()=>{//傳入Model，觸發事件控制
this.gameModel.setStage('game-over')
}
}
this.gameView.initGamePage(gamePageCallbacks)//給view.js傳回調
4.src/game/view.js
initGamePages中
this.gamePage = new GamePage(callbacks)//從controller得來的回調傳入page中
5.在pages/game-page.js中觸發事件
//測試界面切換
setTimeout(()=>{
this.callbacks.showGameOverPage()//controller中的showGameOver
},2000)
Scene與Camera類設置
import sceneConf from '../../confs/scene-conf.js'
class Camera {
constructor() {
this.instance = null
}
init() {
const aspect = window.innerHeight / window.innerWidth
this.instance = new THREE.OrthographicCamera(-sceneConf.frustumSize, sceneConf.frustumSize,
sceneConf.frustumSize * aspect, -sceneConf.frustumSize, -100, 85)
this.instance.position.set(-10, 10, 10)//位置
this.target = new THREE.Vector3(0, 0, 0)
this.instance.lookAt(this.target)//目標
}
}
?
export default new Camera()
2.src/scene/scene.js
import camera from './camera'
// import * as THREE from '../../libs/three'
// import { canvas } from '../../libs/weapp-adapter'
class Scene{
constructor (){
this.instance = null
}
?
init(){
this.instance = new THREE.Scene()
const renderer = this.renderer = new THREE.WebGLRenderer({
canvas:canvas,
antialias:true,//抗鋸齒
preserveDrawingBuffer:true//保存繪制BUffer
})
this.camera = camera
this.camera.init()
this.axisHelper =new THREE.AxisHelper(100)
this.instance.add(this.axisHelper)
this.instance.add(this.camera.instance)
}
render() {
this.renderer.render(this.instance,this.camera.instance)
}
}
export default new Scene()
3.src/game/index.js
export camera from './camera.js'
export scene from './scene.js'
4.src/pages/pages/game-page.js
import {scene} from '../scene/index.js'
export default class GamePage {
constructor(callbacks) {
this.callbacks = callbacks
}
?
init() {
this.scene = scene
this.scene.init()
this.render()
}
render() {
this.scene.render()
requestAnimationFrame(this.render.bind(this))//循環渲染
}
}
ES6繼承多態開發Block
export default {
height: 10,
width: 16
}
?
2.src/block/base.js
import blockConf from '../../confs/block-conf.js'
?
export default class BaseBlock{
constructor(type){
this.type = type//cuboid||culinder
this.height = blockConf.height
this.width = blockConf.width
}
}
3.src/block/cuboid.js
import BaseBlock from './base.js'
?
export default class Cuboid extends BaseBlock{//繼承BaseBlock
constructor(x,y,z,width){
super('cuboud')// 訪問父對象上的構造函數
const size = width || this.width
const geometry = new THREE.BoxGeometry(size,this.height,size)
const material = new THREE.MeshBasicMaterial({
color:0xffffff
})
this.instance = new THREE.Mesh(geometry,material)
this.x = x
this.y = y
this.z = z
this.instance.position.x = this.x
this.instance.position.y = this.y
this.instance.position.z = this.z
}
}
4.src/block/cylinder.js
import BaseBlock from './base.js'
?
export default class Cylinder extends BaseBlock {//繼承BaseBlock
constructor(x, y, z, width) {
super('cylinder')// 訪問父對象上的構造函數
const size = width || this.width
const geometry = new THREE.CylinderGeometry(size / 2, size / 2, this.height, 120)
const material = new THREE.MeshBasicMaterial({
color: 0xffffff
})
this.instance = new THREE.Mesh(geometry, material)
this.instance.name = 'block'
this.x = x
this.y = y
this.z = z
this.instance.position.x = this.x
this.instance.position.y = this.y
this.instance.position.z = this.z
}
}
5.src/pages/game-page.js使用
在init中
this.addInitBlock()//添加Block
新構造函數
addInitBlock(){
const cuboidBlock = new Cuboid(-15,0,0)
const cylinderBlock = new Cylinder(23,0,0)
this.scene.instance.add(cuboidBlock.instance)
this.scene.instance.add(cylinderBlock.instance)
}
總結
以上是生活随笔為你收集整理的微信3d小游戏(three)-逻辑设计与场景添加的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1218上机
- 下一篇： [树形DP | Uva 1218]P