From 4592cdd8b9e765ac250f02a1579b6b34521f2a4c Mon Sep 17 00:00:00 2001
From: cpf <1105965053@qq.com>
Date: Wed, 27 Oct 2021 11:01:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E4=B8=89=E7=BB=B4?=
 =?UTF-8?q?=E5=9C=BA=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app-routing.module.ts                         |  2 ++
 .../three-home/three-home.component.html              |  4 +++-
 .../three-home/three-home.component.scss              |  7 +++++++
 .../three-home/three-home.component.ts                | 11 +++++++++--
 src/app/ui/tabbar/tabbar.component.ts                 |  2 +-
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 61196b3..c8e1abc 100644
--- a/src/app/app-routing.module.ts
+++ b/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) }
diff --git a/src/app/three-dimensional/three-home/three-home.component.html b/src/app/three-dimensional/three-home/three-home.component.html
index 00885e8..bf2dc3b 100644
--- a/src/app/three-dimensional/three-home/three-home.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/three-dimensional/three-home/three-home.component.scss b/src/app/three-dimensional/three-home/three-home.component.scss
index e69de29..ea25d2d 100644
--- a/src/app/three-dimensional/three-home/three-home.component.scss
+++ b/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; }
+}
\ No newline at end of file
diff --git a/src/app/three-dimensional/three-home/three-home.component.ts b/src/app/three-dimensional/three-home/three-home.component.ts
index 70b1927..6891b4b 100644
--- a/src/app/three-dimensional/three-home/three-home.component.ts
+++ b/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);
   }
 
 }
diff --git a/src/app/ui/tabbar/tabbar.component.ts b/src/app/ui/tabbar/tabbar.component.ts
index aa53acb..cdba3e1 100644
--- a/src/app/ui/tabbar/tabbar.component.ts
+++ b/src/app/ui/tabbar/tabbar.component.ts
@@ -27,7 +27,7 @@ export class TabbarComponent implements OnInit {
 
   //进入 三维场景
   initThreeDimensional() {
-
+    this.router.navigate(['/threeDimensional'])
   }
 
   //获得时间