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

一个开源的Webgl3D引擎，javascript or typescript

http://www.babylonjs.com

啥是WebGL

WebGL

网页图形库，简称WebGL,是一个JS库，设计来为任何兼容它的浏览器显示实时3D或者2D图像，是w3c标准，无需插件.

啥是JS

我不想谈这个问题

啥是TypeScript

TypeScript是C#首席设计师Andrew设计的新语言，特性非常克制，克制的原因是要保证他可以零代价转换为javaScript,是目前最高效的js类型增强手段。Js没有类型，编译器能做的事情非常少，所以很多奇怪bug，开发起来非常痛苦。TypeScript，简称TS，弥补了这个痛点。

http://www.typescriptlang.org/

该系列一篇一个例子，全部开源哟

http://code.taobao.org/p/hayabusa/src/trunk/babylon_study/studybegin/

首先用vs创建一个typescript应用程序，把babylon相关的文件弄进来。

Html部分只弄了一个canvas，注意id，其他都是些样式配置

代码部分就不赘述了，需要看去下载代码就行了。

因为第一个例子，只是把3D环境跑起来。下一篇开始我会认真的一行行讲解。

运行起来是这样

时间： 2024-12-28 01:24:38

Web3DGame之路，Babylonjs 和TypeScript学习笔记（一）的相关文章

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看着舒服吧,

Typescript学习笔记（一）基础类型

为了面向ng2和前端未来,开始搞向ts,ts是微软出的一枚语言,作为es6的超集,他出的一些特性还是蛮好用的(略坑).对于我等纯前端(从开始就接触javascript)的人来说,真想说,这特么什么鬼.部分特性同es6(个人对es6还是蛮有好感的).ts同期的coffeescript,将js python化,ts也把js搞的向其他语言靠拢.. 中文学习,这里是英文学习.如果不想看这些东西,那看我笔记学吧.哈哈. ts的基础类型,布尔值,数字,字符串,数组,元组(Tuple),枚举,任意值,空值.后

TypeScript学习笔记（四）：函数

这篇笔记我们来看看TypeScript中的函数. 函数类型 在JavaScript中存在两种定义函数的方法,如下: 1 //命名函数 2 function add(x, y) { 3 return x+y; 4 } 5 6 //匿名函数 7 var myAdd = function(x, y) { return x+y; }; 在TypeScript中对应的写法如下: 1 function add(x: number, y: number): number { 2 return x+y; 3 }

TypeScript学习笔记（七）：模块

JavaScript中的模块 在学习TypeScript的模块之前我们先看看在JavaScript中的模块是如何实现的. 模块的好处 首先我们要了解使用模块的好处都有什么? 模块化.可重用: 封装变量与函数: 下面的示例为使用JavaScript实现的模块: 1 var MyModule = function(name) 2 { 3 //这里定义的都是私有的成员 4 var myName = name; 5 var age = 25; 6 7 //这里返回一个对象, 使用 JS 的闭包实现类的效

TypeScript学习笔记之基础类型

从今天开始学习typescript了,记录ts学习点滴,最后,使用ts结合nodejs开发后端应用,一起共勉吧: typescript最新版本2.6,所有演示代码均基于此版本 开始之前确定安装了如下npm包: npm i typescript -g // ts全局包 npm i ts-node -g // 使用ts-node可以直接运行ts文件 基础类型 布尔类型 let isDone: boolean = false let isExist: boolean = true console.lo

TypeScript学习笔记（六） - 模块

本篇将介绍TypeScript里的模块,和使用方法. 在ECMAScript 2015标准里,JavaScript新增了模块的概念.TypeScript也沿用了这个概念. 一.模块的导入和导出 模块在其自身的作用域里执行,而不是在全局作用域里:这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export之一导出它们. 相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import之一. 模块是自声明的.在TypeScript里

TypeScript学习笔记（五） - 泛型

本篇将介绍在TypeScript如何使用泛型. 一.泛型方法 在TypeScript里,声明泛型方法有以下两种方式: 1 function generics_func1<T>(arg: T): T { 2 return arg; 3 } 4 // 或者 5 let generics_func2: <T>(arg: T) => T = function (arg) { 6 return arg; 7 } 调用方式也有两种: 1 generics_func1<string&

TypeScript学习笔记（八） - 声明文件

本篇将介绍TypeScript的声明文件,并简单演示一下如何编写和使用声明文件.本篇也是这个系列的最后一篇. 一.声明文件简介 TypeScript作为JavaScript的超集,在开发过程中不可避免要引用其他第三方的JavaScript的库.虽然通过直接引用可以调用库的类和方法,但是却无法使用TypeScript诸如类型检查等特性功能.为了解决这个问题,需要将这些库里的函数和方法体去掉后只保留导出类型声明,而产生了一个描述JavaScript库和模块信息的声明文件.通过引用这个声明文件,就可以

TypeScript学习笔记（三） - 方法

本篇将介绍在TypeScript里如何定义和使用方法. 一.方法标准声明和使用 1 // 方法声明 2 function func(x: number, y: number): number { 3 return x + y; 4 } 在TypeScript里,方法声明可以明确定义每一个参数的类型,和返回值的类型.在编译时,编译器会检查方法体的返回值类型是否符合定义的类型,同时在调用的时候也会检查传入的参数类型是否符合定义的类型,参数个数是否符合定义的个数. 1 let result1 = fu