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

2D画布在three中整合

利用MVC页面切换

Scene与Camera类设置

ES6继承多态开发Block

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)

}

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

视频教程-Layabox3D游戏开发入门-微信3D小游戏案例 -微信开发
Layabox3D游戏开发入门-微信3D小游戏案例有多年Unity程序开发经验,有策划和美术设计的经验.愿意在csdn这个平台和大家一起分享! 金龙 ¥29.00 立即订阅扫码下载「CSDN程序员 ...
微信3D小游戏系列一：在微信小游戏中使用threejs
文章目录环境配置下载开发者工具目录结构引入Three.js 在小程序中运行 threejs 目标效果小程序代码环境配置下载开发者工具下载地址: https://developers.w ...
Unity初学：制作2D小游戏Sunny Land 1.游戏背景场景添加
1.首先我们先从asset store里下载我们需要的素材 2.打开unity将这些素材导入到里面 3.点开Environment文件夹将其中的back拖拽到左侧的文件框中为我们的小游戏添加一个背景 ...
3D小游戏开发经验总结：建模、逻辑实现、渲染与玩家控制
最近准备接触一下3D手机游戏开发,因此利用空闲时间制作了一个iPhone 上面的3D小游戏.因为以前没有在实际项目中应用过OpenGLES 2.0,通过这次开发,积累了不少实战经验,为了分享经验,也为 ...
原来微信里有这么多好玩的3D小游戏了
自从<跳一跳>打开微信小游戏之门伊始,小游戏之势已然燎原.小编体验了上千款微信小游戏,虽然当前仍是以2D休闲游戏为主,但是3D小游戏也越来越多了(悄悄的说一下,小编已知的3D游戏里除了2款 ...
3D 小游戏《欢乐贪吃龙》关键技术盘点 | Cocos 技术派第13期
<欢乐贪吃龙>是由 SK2GAME 基于 Cocos Creator v2.2 研发的一款 3D 休闲小游戏,游戏画面卡通精美,玩法简单,玩家将扮演一只"贪吃龙",在 ...
Cocos Creator 微信创意小游戏《五子大作战》团队专访
2019 微信公开课 PRO:首批创意小游戏公布 1 月 9 日,以"同行 WITH US"为主题的微信公开课 PRO 在广州召开.公开课上,讲师孙春光发布了微信首批创意小游戏,包 ...
Cocos Creator 微信创意小游戏《甜蜜糖果屋》团队专访：让纸片人活起来
在 1 月 9 日的 2019 微信公开课 Pro 上,有一款创意十足的互动式游戏出现在小游戏宣讲环节,它便是今日 Cocos 的专访对象<甜蜜糖果屋>. <甜蜜糖果屋之花恋奇妙物语 ...
新春特辑|Cocos 精品 2D、3D 小游戏合集
今日 C 姐精选了 40+ 款基于 Cocos Creator 开发的 2D.3D 小游戏,推荐给各位开发者在春节假期休闲玩耍,也希望能通过这些小游戏,让大家更加了解 Cocos Creator . ...

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

2D画布在three中整合

利用MVC页面切换

Scene与Camera类设置

ES6继承多态开发Block

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

最新文章

热门文章