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);
}


}
