Game over 页面无法渲染出来

Question

按照教程写了Game Over的代码，但是怎么调试都无法把页面渲染出来
game over 的代码：

export default class GameOverPage {
constructor (callbacks) {
this.callbacks = callbacks
}

init (options) {
	this.initGameoverCanvas(options)
}

initGameoverCanvas (options) {
	const aspect = window.innerHeight / window.innerWidth
	this.scene = options.scene
	this.canvas = document.createElement('canvas')
	this.canvas.width = window.innerWidth
	this.canvas.height = window.innerHeight
	this.texture = new THREE.Texture(this.canvas)
	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.context = this.canvas.getContext('2d')
	this.context.fillStyle = '#333'
	this.context.fillRect((window.innerWidth - 200) / 2, (window.innerHeight - 100) / 2, 200, 100)
	this.texture.needUpdate = true
	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.scene.add(this.obj)
	console.log(this.obj)
	console.log('game over page show')
}

show () {
	console.log('game over page show')
}

}

程序也没有错误的提示！

Answer 1

千迦 2019-01-04 12:38:38

参考一下课程提供的代码看看、没有报错只能说明语法是对的，并不能说明渲染的逻辑的是对的，位置不对，大小不对都可能导致无法看到渲染结果

• 提问者 慕容9431294 #1

  非常感谢！

• _move_on_ 回复 提问者 慕容9431294 #2

  虽说时间上过的很久了…请问您当时是怎么排查解决的呀T-T同渲染不出来gameover字样 但是矩形有显示了