关于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
已经解决了问题。
view.js中
initGameOverPage (callbacks){
this.gameOverPage = new GameOverPage(callbacks);
this.gameOverPage.init({
原: scene: this.gamePage.scene
更正为: scene: this.gamePage.scene.camera.instance
});
}
scene.js中init()
原: this.axesHelper = THREE.AxesHelper(100);
更改为:this.axesHelper = new THREE.AxesHelper(100);
更改后无报错。
10 -
千迦
2020-04-09
赞 ~~~~~~
00
相似问题