3D小游戏(three)-分数显示更新

1. src/view3d/font.js导入字体
2. Src/view3d/ScoreText.js

import font from './font'

 

export default class Text {

constructor () {

 

}

 

init (options) {//初始化

this.material = new THREE.MeshBasicMaterial({ color: (options && options.fillStyle) ? options.fillStyle : 0xffffff, transparent: true })

if (options && options.opacity) this.material.opacity = options.opacity

this.options = options || {}

const geometry = new THREE.TextGeometry('0', { 'font': font, 'size': 6.0, 'height': 0.1 })

this.instance = new THREE.Mesh(geometry, this.material)

this.instance.name = 'scoreText'

}

updateScore (score) {//更新分数模型

const scoreStr = score.toString()

this.instance = new THREE.Mesh(new THREE.TextGeometry(scoreStr, { 'font': font, 'size': 6.0, 'height': 0.1 }), this.material)

}

}

1. game-page.js

Init

this.score = 0

this.scoreText = new ScoreText()//分数初始化

this.scoreText.init({

fillStyle: 0x666699

})

this.render()

this.addScore()

JS中

addScore () {

this.scene.addScore(this.scoreText.instance)//加载文字

}

updateScore (score) {

this.scoreText.updateScore(score)

this.scene.updateScore(this.scoreText.instance)

}

checkBottleHit中

this.updateScore(++this.score)//更新分数

Restrat

this.updateScore(0)

1. scene/scene.js

addScore (scoreInstance) {//加载文字

this.currentScore = scoreInstance

this.camera.instance.add(scoreInstance)

scoreInstance.position.x = -20

scoreInstance.position.y = 40

}

updateScore (scoreInstance) {//更新

this.camera.instance.remove(this.currentScore)

this.currentScore = scoreInstance

this.camera.instance.add(scoreInstance)

scoreInstance.position.x = -20

scoreInstance.position.y = 40

}

注：此时会有一BUG当再次重新开始是background会出现一个三角空白、视觉补救方法：

renderer.setClearColor(0xd7dbe6, 1.0)//与background一致