Web3DGame之路，Babylonjs 和TypeScript学习笔记（二）

先来认识一下Babylonjs，由于基于webgl来开发，所以先介绍一下基础知识。

 

Webgl是一个html标准，他要在canvas元素上初始化。

 

Html页面上的准备

所以我们先从html页面开始看起

 

我们设置一个canvas，提供给babylon渲染用

 

然后因为我们用typescript，你可以看到引入的脚本叫app.js,但是在我么的项目里只有app.ts

生成的时候app.ts 会被编译为app.js

 

TypeScript代码

看，熟悉的class，比js的prototype看着舒服吧，看()=> 熟悉的"辣么大"表达式。

 

这段代码很好理解吧，window.onload 是页面初始化事件，在这里取得canvas，并用它初始化了Game

 

Game是我弄了个当主程序的东西，使用咱客户端过去的习惯。

Update 和 stop 其实都没写

 

Int里面初始化了 babylon engine

创建了一个场景，然后告诉babylonengine 开始渲染，渲染方法就是调用scene.render();

 

看看createScene函数都干了什么

 

 

这地方api设计有一点混乱，engine初始化就妖了canvas

Camera又要和canvas关联

这是先初始化场景、摄像机、灯光

// create a basic BJS Scene object

var scene = new BABYLON.Scene(this.engine);

 

// create a FreeCamera, and set its position to (x:0, y:5, z:-10)

var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);

 

// target the camera to scene origin

camera.setTarget(BABYLON.Vector3.Zero());

 

// attach the camera to the canvas

camera.attachControl(this.canvas, false);

 

// create a basic light, aiming 0,1,0 - meaning, to the sky

var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);

 

然后给场景里面放俩物体

// create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene

var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

 

// move the sphere upward 1/2 of its height

sphere.position.y = 1;

 

// create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one

var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

 

一个球，一个平面

Babylon 为你准备了大量的基本形体

 

var box = BABYLON.Mesh.CreateBox("box", 1.0, scene);

box.position = new BABYLON.Vector3(3, 0, 0);

var plane = BABYLON.Mesh.CreatePlane("plane", 2.0, scene);

plane.position = new BABYLON.Vector3(2, 0, 1);

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);

cylinder.position = new BABYLON.Vector3(-2, 0, 1);

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);

torus.position = new BABYLON.Vector3(-3, 0, 1);

 

var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene);

knot.position.y = 3;

 

var lines = BABYLON.Mesh.CreateLines("lines", [

new BABYLON.Vector3(-10, 0, 0),

new BABYLON.Vector3(10, 0, 0),

new BABYLON.Vector3(0, 0, -10),

new BABYLON.Vector3(0, 0, 10)

], scene);

 

我们随便建立一批

 

这就是babylon引擎的基本初始化和形体