初始化三维场景

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { NavigationComponent } from './navigation/navigation.component';
 //路由守卫
 import { AuthGuard } from './auth.guard'
 import { HomeComponent } from './pages/home/home.component';
+import { ThreeHomeComponent } from './three-dimensional/three-home/three-home.component';
 
 
 
@@ -14,6 +15,7 @@ const routes: Routes = [
   { path: '', redirectTo: 'login', pathMatch: 'full' },
   { path: 'login', component: LoginComponent }, //登录页
   { path: 'register', component: RegisterComponent }, //注册页
+  { path: 'threeDimensional', component: ThreeHomeComponent }, //三维场景
   {
     path: '', component: HomeComponent, children: [
       { path: 'home', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) }

src/app/three-dimensional/three-home/three-home.component.html

@@ -1 +1,3 @@
-<p>three-home works!</p>
+<div class="content">
+  <canvas id="center"></canvas>
+</div>

src/app/three-dimensional/three-home/three-home.component.scss

@@ -0,0 +1,7 @@
+.content{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  canvas{ width: 100%; height: 100%; border: none; outline: none; }
+}

src/app/three-dimensional/three-home/three-home.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-three-home',
@@ -7,9 +7,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ThreeHomeComponent implements OnInit {
 
-  constructor() { }
+  constructor(private element: ElementRef,) { }
+
+  static instance: ThreeHomeComponent;
+  //public game: Game = new Game();
+  public canvas: HTMLCanvasElement; //canvas 实例
 
   ngOnInit(): void {
+    ThreeHomeComponent.instance = this;
+    this.canvas = this.element.nativeElement.querySelector('#center') as HTMLCanvasElement;
+    //this.game.init(this.canvas);
   }
 
 }

src/app/ui/tabbar/tabbar.component.ts

@@ -27,7 +27,7 @@ export class TabbarComponent implements OnInit {
 
   //进入 三维场景
   initThreeDimensional() {
-
+    this.router.navigate(['/threeDimensional'])
   }
 
   //获得时间