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一致