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