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