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执行顺序改变一下就可以了。//img.mukewang.com/szimg/5e634525089c12fc06780292.jpg

2
0

慕运维3231767

2019-03-17

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

这句代码写在哪?

0
1
Miu69
提问者不是写在了game-over-page.js里了吗?
2020-03-07
共1条回复

three.js-打造微信小游戏跳一跳 快速掌握3D游戏开发

three.js+WebGL+微信小游戏API, 带你进入3D的游戏世界

793 学习 · 147 问题

查看课程