关于5-13中坐标轴无法显示的问题

来源:5-14 scene和camera的设置

Miu69

2020-03-09

在5-13中有一个报错
图片描述
下面是我的代码
controller.js代码:

import gameView from './view';
import gameModel from './model';

class GameController{
    constructor(){
        this.gameView = gameView;
        this.gameModel = gameModel;
        this.gameModel.stageChanged.attach((sender,args) => {
            const stageName = args.stage;
            switch(stageName){
                case 'game-over':
                    this.gameView.showGameOverPage()
                    break;
                case 'game':
                    this.gameView.showGamePage()
                    break;
                default:;
            }
        })
    }

 initPages(){
      const gamePageCallbacks = {
        showGameOverPage: () => {
            this.gameModel.setStage('game-over');
        }
    };

    const gameOverPageCallbacks = () => {
        this.gameModel.setStage('game');
    };

    this.gameView.initGamePage(gamePageCallbacks);
    this.gameView.initGameOverPage(gameOverPageCallbacks);
    }
}
export default new GameController();

view.js代码:

import GamePage from '../pages/game-page';
import GameOverPage from '../pages/game-over-page';

class GameView{
    constructor(){

    }

    showGameOverPage(){
        this.gamePage.hide();
        this.gameOverPage.show();
    }

    showGamePage(){
        this.gameOverPage.hide();
        this.gamePage.restart();
        this.gamePage.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-page.js代码:

import {scene} from '../scene/index'

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

    init () {
        this.scene = scene;
        this.scene.init();
        this.render();
    }

    render () {
        this.scene.render();
        requestAnimationFrame(this.render.bind(this));
    }
}

game-over-page.js代码:

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.obj.rotation.y = Math.PI;
        this.context = this.canvas.getContext('2d');
        this.context.fillStyle = '#333';
        this.context.fillRect((window.innerWidth - 200) / 2, (window.innerHeight - 100) / 2, 200, 100);
        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.texture.needsUpdate = true;
        this.obj.visible = false;
        this.scene.add(this.obj);
    }

    show(){
        this.obj.visible = true;
    }

    hide(){
        this.obj.visible = false;
    }
}

请老师解答一下!

写回答

2回答

Miu69

提问者

2020-03-10

已经解决了问题。

  1. view.js中


    initGameOverPage (callbacks){

          this.gameOverPage = new GameOverPage(callbacks);

          this.gameOverPage.init({

    原:          scene: this.gamePage.scene

    更正为:   scene: this.gamePage.scene.camera.instance

          });

        }

  2. scene.js中init()

    原:       this.axesHelper = THREE.AxesHelper(100);

    更改为:this.axesHelper = new THREE.AxesHelper(100);

更改后无报错。

1
0

千迦

2020-04-09

赞 ~~~~~~

0
0

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

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

793 学习 · 147 问题

查看课程