先来认识一下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引擎的基本初始化和形体

Web3DGame之路,Babylonjs 和TypeScript学习笔记(二)的更多相关文章

  1. Typescript 学习笔记二:数据类型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  2. Web3DGame之路,Babylonjs 和TypeScript学习笔记(一)

    一个开源的Webgl3D引擎,javascript or typescript http://www.babylonjs.com 啥是WebGL WebGL 网页图形库,简称WebGL,是一个JS库, ...

  3. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  4. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. Typescript 学习笔记五:类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. Typescript 学习笔记三:函数

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  8. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  9. TypeScript学习笔记(八):1.5版本之后的模块和命名空间

    我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以 ...

随机推荐

  1. 【iOS】Jenkins Gitlab持续集成打包平台搭建

    Jenkins Gitlab持续集成打包平台搭建 SkySeraph July. 18th 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点: ...

  2. Mvc 之System.Web.Optimization 压缩合并如何让*.min.js 脚本不再压缩

    最近项目中用到了easy ui ,但是在配置BundleConfig 的时候出现了问题,easy ui的脚本jquery.easyui.min.js 压缩后出现各种脚本错误,总是莫名其妙的 i标量错误 ...

  3. [原创]Centos7 从零整合LNMP一体包

    按照前几章配置好后,我们就可以把这些工具打包啦.生成LNMP一体包. # export LD_LIBRARY_PATH=/package/libmemcached/lib:$LD_LIBRARY_PA ...

  4. [转载] SSH入门学习基础教程

    在Linux系统中,OpenSSH是目前最流行的远程系统登录与文件传输应用,也是传统Telenet.FTP和R系列等网络应用的换代产品.其 中,ssh(Secure Shell)可以替代telnet. ...

  5. 优化Web中的性能

    优化Web中的性能 简介 web的优化就是一场阻止http请求最终访问到数据库的战争. 优化的方式就是加缓存,在各个节点加缓存. web请求的流程及节点 熟悉流程及节点,才能定位性能的问题.而且优化的 ...

  6. SQL 语句与性能之执行顺序

    select * , t3.Name from t1 left join t2 on t1.sysno = t2.Asysno left join t3 on t3.sysno = t2.Bsysno ...

  7. LeetCode 136. Single Number

    最原始的方法:先排序,然后从头查找.若nums[i] = nums[i] + 1则为一对相同的数,i = i  + 2,继续判断.若nums[i] != nums[i] + 1,则输出nums[i]. ...

  8. 杨氏矩阵定义及其查找的实现C++

    先介绍一下这个数据结构的定义,Young Tableau有一个m*n的矩阵,然后有一数组 a[k], 其中 k<=m*n ,然后把a[k]中的数填入 m*n 的矩阵中,填充规则为: 1.  每一 ...

  9. [资料分享]2016 黑马 Java 19期视频+Hadoop大数据实战视频

    下载链接: 链接:http://pan.baidu.com/s/1bToXK6 密码:7k43 解压密码: www.lthack.com 或者 2cifang.com 或者 2cifang.com_2 ...

  10. js获取cookie中存储的值

    最近看了试卷题目发现自己会的十分的匮乏, 第一题就把自己难住了,知道有这个东西,但是实际上没有操作过. ========================================= cookie ...