init: web3-0210427

CraftsMart-angular/package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser": "^16.2.0",
         "@angular/platform-browser-dynamic": "^16.2.0",
         "@angular/router": "^16.2.0",
+        "babylonjs": "^6.27.1",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.13.0"
@@ -4019,6 +4020,12 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/babylonjs": {
+      "version": "6.27.1",
+      "resolved": "https://registry.npmmirror.com/babylonjs/-/babylonjs-6.27.1.tgz",
+      "integrity": "sha512-25MKsEuiqMe073V5HKAUXIoQhQp9h5hDbxHcLCi/Qy9VzlJfq/XyFfu8owph3dZXXQ6+psdcCBtCa6pAURbFrA==",
+      "hasInstallScript": true
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",

CraftsMart-angular/package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
+    "babylonjs": "^6.27.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

CraftsMart-angular/src/app/app-routing.module.ts

@@ -6,13 +6,8 @@ import { PageCartComponent } from 'src/modules/craftsmart/page-cart/page-cart.co
 import { PageMineComponent } from 'src/modules/craftsmart/page-mine/page-mine.component';
 
 const routes: Routes = [
-   {
-  path:"",redirectTo:"/craftsmart/home",pathMatch:"full"
-   },
-   {
-    path:'craftsmart',
-    loadChildren:() => import('../modules/craftsmart/craftsmart.module').then(m => m.CraftsmartModule)
-   },
+   {path:"",redirectTo:"/craftsmart/home",pathMatch:"full" },
+   {path:'craftsmart', loadChildren:() => import('../modules/craftsmart/craftsmart.module').then(m => m.CraftsmartModule)},
    { path: 'home', component: HomeComponent },
    { path: 'nav-tabs', component: NavTabsComponent },
    { path: 'page-cart', component: PageCartComponent },

CraftsMart-angular/src/modules/craftsmart/craftsmart-routing.module.ts

@@ -5,30 +5,25 @@ import { HomeComponent } from './home/home.component';
 import { PageMineComponent } from './page-mine/page-mine.component';
 import { NavTabsComponent } from './nav-tabs/nav-tabs.component';
 import { PageDiscoverComponent } from './page-discover/page-discover.component';
+import { PageItemDetailComponent } from './page-item-detail/page-item-detail.component';
 
 const routes: Routes = [
   {
     path:"",
     component:NavTabsComponent,
     children:[
-      {    path:"home",component:HomeComponent
-      },
-      {
-           path:"page-cart",component:PageCartComponent
-      },
-      {
-           path:"page-mine",component:PageMineComponent
-      },
-      {
-           path:"page-discover",component:PageDiscoverComponent
-      }
+      { path:"home", component:HomeComponent },
+      { path:"page-cart", component:PageCartComponent },
+      { path:"page-mine", component:PageMineComponent },
+      { path:"page-discover", component:PageDiscoverComponent },
+      { path:"page-item-detail/:name", component:PageItemDetailComponent }
     ]
   },
-  
+  { path: '**', redirectTo: 'home', pathMatch: 'full' }
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class CraftsmartRoutingModule { }
+export class CraftsmartRoutingModule { }

CraftsMart-angular/src/modules/craftsmart/craftsmart.module.ts

@@ -6,25 +6,25 @@ import { PageCartComponent } from './page-cart/page-cart.component';
 import { RouterModule } from '@angular/router';
 import { CraftsmartRoutingModule } from './craftsmart-routing.module';
 import { PageDiscoverComponent } from './page-discover/page-discover.component';
-
+import { PageItemDetailComponent } from './page-item-detail/page-item-detail.component';
 
 @NgModule({
-  
   declarations: [
     NavTabsComponent,
     PageMineComponent,
     PageCartComponent,
-    PageDiscoverComponent
+    PageDiscoverComponent,
+    PageItemDetailComponent
   ],
   imports: [
     CommonModule,
     RouterModule,
     CraftsmartRoutingModule
-    ],
+  ],
   exports:[
     NavTabsComponent,
     PageCartComponent,
     PageMineComponent
   ]
 })
-export class CraftsmartModule { }
+export class CraftsmartModule { }

CraftsMart-angular/src/modules/craftsmart/home/home.component.html

@@ -22,20 +22,19 @@
       </div>
     </div>
     <ul class="image-grid">
-      <!-- 物品类型列表 -->
-      <li *ngFor="let homeObj of itemList">
-        <div class="image-item">
-          <img [src]="sanitizer.bypassSecurityTrustUrl('/assets/image/cp1.jpg')" alt="Digital Collectible">
-          <p>{{ homeObj.description }}</p>
-          <p>{{ homeObj.name }}</p>
-        </div>
+  <li *ngFor="let homeObj of itemList">
+    <div class="image-item" (click)="goToItemDetail(homeObj.name)">
+      <img [src]="sanitizer.bypassSecurityTrustUrl('/assets/image/cp1.jpg')" alt="Digital Collectible">
+      <p>{{ homeObj.description }}</p>
+      <p >{{ homeObj.name }}</p> <!-- 添加点击事件绑定 -->
+    </div>
 
-        <div class="image-item2">
-          <img [src]="sanitizer.bypassSecurityTrustUrl('./assets/image/cp1.jpg')" alt="Digital Collectible">
-          <p>{{ homeObj.description }}</p>
-          <p>{{ homeObj.name }}</p>
-        </div>
-      </li>
-    </ul>
+    <div class="image-item2" (click)="goToItemDetail(homeObj.name)">
+      <img [src]="sanitizer.bypassSecurityTrustUrl('./assets/image/cp1.jpg')" alt="Digital Collectible">
+      <p>{{ homeObj.description }}</p>
+      <p >{{ homeObj.name }}</p> <!-- 添加点击事件绑定 -->
+    </div>
+  </li>
+</ul>
   </div>
 </div>

CraftsMart-angular/src/modules/craftsmart/home/home.component.ts

@@ -2,6 +2,10 @@ import { Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
+
+//detail跳转
+import { Router, ActivatedRoute } from '@angular/router';
+
 interface Home {
   name: string;
   description: string;
@@ -11,7 +15,7 @@ interface Home {
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+  styleUrls: ['./home.component.scss']  // 添加样式文件
 })
 export class HomeComponent {
   homes: Home[] = [
@@ -35,7 +39,7 @@ export class HomeComponent {
   itemList: Home[] = []; // 初始化物品列表为空
   sanitizer: DomSanitizer;
 
-  constructor(private _sanitizer: DomSanitizer) {
+  constructor(private _sanitizer: DomSanitizer, private router: Router, private route: ActivatedRoute) {
     this.sanitizer = _sanitizer as DomSanitizer;
     this.showItemList('推荐'); // 默认显示推荐物品列表
   }
@@ -65,6 +69,10 @@ export class HomeComponent {
       });
     }
   }
+  goToItemDetail(name: string) {
+    // 实现你的方法逻辑
+    this.router.navigate(['../page-item-detail', name], { relativeTo: this.route });
+  }
 }
 
 @NgModule({

CraftsMart-angular/src/modules/craftsmart/nav-tabs/nav-tabs.component.ts

@@ -1,19 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RouterModule } from '@angular/router'; // 导入 RouterModule
 
 @Component({
   selector: 'app-nav-tabs',
   templateUrl: './nav-tabs.component.html',
   styleUrls: ['./nav-tabs.component.scss'],
-  
 })
-export class NavTabsComponent {
+export class NavTabsComponent implements OnInit {
+
   public path = '';
 
-  constructor(private route: ActivatedRoute, private router: Router) {
+  constructor(private route: ActivatedRoute, private router: Router) { }
+
+  ngOnInit() {
     this.route.queryParams.subscribe(params => {
-      this.path = location.pathname;
+      this.path = this.router.url;
     });
   }
 

CraftsMart-angular/src/modules/craftsmart/page-item-detail/page-item-detail.component.html

@@ -0,0 +1 @@
+<p>page-item-detail works!</p>

CraftsMart-angular/src/modules/craftsmart/page-item-detail/page-item-detail.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageItemDetailComponent } from './page-item-detail.component';
+
+describe('PageItemDetailComponent', () => {
+  let component: PageItemDetailComponent;
+  let fixture: ComponentFixture<PageItemDetailComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageItemDetailComponent]
+    });
+    fixture = TestBed.createComponent(PageItemDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

CraftsMart-angular/src/modules/craftsmart/page-item-detail/page-item-detail.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-item-detail',
+  templateUrl: './page-item-detail.component.html',
+  styleUrls: ['./page-item-detail.component.scss']
+})
+export class PageItemDetailComponent {
+
+}

CraftsMart-angular/src/modules/meta/meta-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path:"meta/start",
+    
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MetaRoutingModule { }

CraftsMart-angular/src/modules/meta/meta.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MetaRoutingModule } from './meta-routing.module';
+import { PageBabtlonStartComponent } from './page-babtlon-start/page-babtlon-start.component';
+
+
+@NgModule({
+  declarations: [
+    PageBabtlonStartComponent
+  ],
+  imports: [
+    CommonModule,
+    MetaRoutingModule
+  ]
+})
+export class MetaModule { }

CraftsMart-angular/src/modules/meta/page-babtlon-start/page-babtlon-start.component.html

@@ -0,0 +1,2 @@
+<canvas id="renderCanvas"></canvas>
+

CraftsMart-angular/src/modules/meta/page-babtlon-start/page-babtlon-start.component.scss

@@ -0,0 +1,13 @@
+html, body {
+    overflow: hidden;
+    width   : 100%;
+    height  : 100%;
+    margin  : 0;
+    padding : 0;
+}
+
+#renderCanvas {
+    width   : 100%;
+    height  : 100%;
+    touch-action: none;
+}

CraftsMart-angular/src/modules/meta/page-babtlon-start/page-babtlon-start.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageBabtlonStartComponent } from './page-babtlon-start.component';
+
+describe('PageBabtlonStartComponent', () => {
+  let component: PageBabtlonStartComponent;
+  let fixture: ComponentFixture<PageBabtlonStartComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageBabtlonStartComponent]
+    });
+    fixture = TestBed.createComponent(PageBabtlonStartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

CraftsMart-angular/src/modules/meta/page-babtlon-start/page-babtlon-start.component.ts

@@ -0,0 +1,122 @@
+import { Component,AfterViewInit, ElementRef } from '@angular/core';
+import * as BABYLON from 'babylonjs';
+@Component({
+  selector: 'app-page-babtlon-start',
+  templateUrl: './page-babtlon-start.component.html',
+  styleUrls: ['./page-babtlon-start.component.scss']
+})
+export class PageBabtlonStartComponent {
+  private canvas:HTMLCanvasElement|undefined;
+  private engine: BABYLON.Engine|undefined;
+  private scene: BABYLON.Scene|undefined;
+
+  constructor(private elementRef:ElementRef) { }
+
+ngAfeterViewInit():void{
+  this.canvas = this.elementRef.nativeElement.querySelector('#renderCanvas');
+    console.log(this.canvas)
+    if(this.canvas){
+      this.engine = new BABYLON.Engine((this.canvas as any), true);
+      console.log(this.engine)
+      // 创建场景
+      this.createScene();
+      this.engine.runRenderLoop(() => {
+        this.scene?.render();
+      });
+      window.addEventListener('resize', () => {
+        this.engine?.resize();
+      });
+  }
+
+}
+
+createScene(): void {
+  this.scene = new BABYLON.Scene((this.engine as any));
+  this.scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
+
+  const camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(2, 2, -10), this.scene);
+  camera.setTarget(BABYLON.Vector3.Zero());
+  camera.attachControl(this.canvas, false);
+  camera.applyGravity = true;
+  camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
+
+  // Enable Collisions
+  this.scene.collisionsEnabled = true;
+  camera.checkCollisions = true;
+
+  // Create a basic light, aiming 0,1,0 - meaning, to the sky.
+  let light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this.scene);
+
+  for (let index = 0; index < 10; index++) {
+    // this.createSphere(index)
+  }
+  // Animation Example
+  this.playCubeAnim()
+  // Create a built-in "ground" shape.
+  let ground = BABYLON.MeshBuilder.CreateGround('ground1', {height:6, width:6, subdivisions: 2}, this.scene);
+
+  ground.checkCollisions = true;
+
+}
+playCubeAnim(){
+  if(this.scene){
+    //Create a box
+    let box1 = BABYLON.MeshBuilder.CreateSphere('sphere', {segments:16, diameter:0.5}, this.scene);
+    box1.position.x = 0;
+    box1.position.y = 2;
+      // 创建一个动画
+      const animation = new BABYLON.Animation(
+        'circleAnimation',
+        'position.x',
+        60,
+        BABYLON.Animation.ANIMATIONTYPE_FLOAT,
+        BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
+      );
+
+      // 定义动画关键帧
+      const keys = [];
+      keys.push({
+        frame: 0,
+        value: 0
+      });
+      keys.push({
+        frame: 150,
+        value: 10
+      });
+
+      // 将关键帧添加到动画中
+      animation.setKeys(keys);
+
+      // 将动画绑定到圆形上
+      box1.animations.push(animation);
+      console.log(box1.animations)
+
+      // 创建动画任务
+      const animationTask = this.scene.beginAnimation(box1, 0, 150, true, 5);
+
+      // 设置场景背景色
+      this.scene.clearColor = new BABYLON.Color4(0, 0, 0, 1);
+  }
+}
+createSphere(y:number){
+  // Create a built-in "sphere" shape. 
+  let sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {segments:16, diameter:0.5}, this.scene);
+  // Move the sphere upward 1/2 of its height.
+  sphere.position.y = y;
+  sphere.checkCollisions = true; 
+  
+  sphere.ellipsoid = new BABYLON.Vector3(0.5, 1.0, 0.5);
+  sphere.ellipsoidOffset = new BABYLON.Vector3(0, 1.0, 0);
+
+  let speedCharacter = 8;
+  let gravity = 0.15;
+  let forwards = new BABYLON.Vector3(parseFloat(String(Math.sin(sphere.rotation.y))) / speedCharacter, gravity, parseFloat(String(Math.cos(sphere.rotation.y))) / speedCharacter);
+  forwards.negate();
+  sphere.moveWithCollisions(forwards);
+  // or
+  let backwards = new BABYLON.Vector3(parseFloat(String(Math.sin(sphere.rotation.y))) / speedCharacter, -gravity, parseFloat(String(Math.cos(sphere.rotation.y))) / speedCharacter);
+  sphere.moveWithCollisions(backwards);
+}
+
+
+}