Web3DGame之路,Babylonjs 和TypeScript學習筆記(二)

瘋光無線發表於2015-11-26

先來認識一下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引擎的基本初始化和形體

相關文章