微信3d小游戏(three)-逻辑设计与场景添加

最新推荐文章于 2023-08-02 11:39:43 发布

_Zou

最新推荐文章于 2023-08-02 11:39:43 发布

阅读量490

点赞数

分类专栏：微信小游戏文章标签： 3d canvas es6 html5 小程序

zouzouzou

本文链接：https://blog.csdn.net/weixin_40676050/article/details/108696125

版权

微信小游戏专栏收录该内容

12 篇文章 0 订阅

订阅专栏

2D画布在three中整合

pages/game-over-page.js

// 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')

}

}

game/view.js

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页面切换

src/game/model.js

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类设置

src/scene/camera.js

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

Conf/block-conf.js

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)

}