scene 传递错误,请帮助
来源:5-12 2d画布绘制能力在threejs中的整合

Mecil9
2019-01-29
按照讲解 在gameView从game-page引入Scene,终端报错:
VM8066:1 gameThirdScriptError
Cannot read property 'scene' of undefined
TypeError: Cannot read property 'scene' of undefined
at GameView.initGameOverPage (http://127.0.0.1:17162/game/src/game/view.js:41:29)
at GameController.initPages (http://127.0.0.1:17162/game/src/game/controller.js:50:21)
at Game.init (http://127.0.0.1:17162/game/src/game/game.js:27:27)
at new Main (http://127.0.0.1:17162/game/src/main.js:26:18)
at http://127.0.0.1:17162/game/game.js:13:1
at require (http://127.0.0.1:17162/game/__dev__/WAGame.js:1:78872)
at <anonymous>:1:1
view.js代码段:
import GamePage from '../pages/game-page'
import GameOverPage from '../pages/game-over-page'
class GameView {
constructor () {
}
showGameOverPage () {
this.gameOverPage.show()
}
restartGame() {
this.gamePage.restart()
}
initGameOverPage (callbacks) {
this.gameOverPage = new GameOverPage(callbacks)
this.gameOverPage.init({
scene: this.gamePage.scene
})
}
initGamePage (callbacks) {
this.gamePage = new GamePage(callbacks)
this.gamePage.init()
}
}
export default new GameView()
game-over-paged代码段
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.scene.add(this.obj)
}
show () {
console.log('game over page show')
}
}
game-page.js 代码段
....
var renderer = new THREE.WebGLRenderer({canvas: canvas})
var scene = new THREE.Scene()
this.scene = scene
var camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, -1000, 1000)
....
这是啥原因呢?
还有一个问题,在这里引入了一个options,这个options是从哪里传过来的呢?
init (options) {
this.initGameoverCanvas(options)
}
写回答
2回答
-
Miu69
2020-03-07
将controller.js里的initGamePage和initGameOverPage执行顺序改变一下就可以了。
20 -
慕运维3231767
2019-03-17
init (options) {
this.initGameoverCanvas(options)
}这句代码写在哪?
012020-03-07
相似问题