Web3dgame Road, Babylonjs and Typescript study notes (ii)

First come to know Babylonjs, because based on WEBGL to develop, so first introduce the basic knowledge.

WebGL is an HTML standard that he wants to initialize on a canvas element.

Preparing for the HTML page

So let's start by looking at the HTML page

We set up a canvas that is available for Babylon rendering

And then because we use typescript, you can see that the script introduced is called App.js, but in my project only app.ts

App.ts will be compiled as app.js when generated.

Typescript Code

Look, the familiar class, than JS prototype look comfortable bar, see () = familiar with the "spicy big" expression.

This code is good to understand, window.onload is a page initialization event, where you get the canvas and use it to initialize the game

The game is that I got something to do with the main program, using our client's past habits.

Update and stop are not actually written.

int inside initializes the Babylon engine

Create a scene, and then tell Babylonengine to start rendering, the rendering method is to call Scene.render ();

See what the Createscene function has done.

This place API design is a bit confusing, engine initialization on the demon canvas

Camera is also associated with canvas

This is the first to initialize the scene, the camera, the light

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

and put two objects inside the scene .

Create a built-in "sphere" shape; Its constructor takes 5 params:name, width, depth, subdivisions, scene

var sphere = BABYLON. Mesh.createsphere (' Sphere1 ', 2, Scene);

Move the sphere upward 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);

a ball, a plane

Babylon a lot of basic forms for you.

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, ten, scene, false);

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

var knot = BABYLON. Mesh.createtorusknot ("Knot", 2, 0.5, +, 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);

we randomly set up a group

This is the basic initialization and form of the Babylon engine.

Web3dgame Road, Babylonjs and Typescript study notes (ii)