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看着舒服吧,看()=> 熟悉的"辣么大"表达式。
这段代码很好理解吧,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学习笔记(二)相关推荐
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记一:介绍、安装、编译
前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...
- TypeScript学习笔记3:运算符
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 运算符 ...
- TypeScript学习笔记2:数据类型
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 数据类型 ...
- TypeScript学习笔记1:变量赋值及书写方式
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 变量赋值 ...
- 小白终是踏上了这条不归路----小文的mysql学习笔记(1)
**这里真的是一个大佬云集的地方,作为刚刚学习的小白来这里向各位大佬取经,这是学习的时候做的笔记,有什么不对的地方还请兄弟们斧正.卑微小白终究是踏上了这条不归路阿,如果这篇笔记能给你带来帮助,还请大哥 ...
- 小白终是踏上了这条不归路----小文的mysql学习笔记目录
** 小文的学习笔记正在每日连载当中 为了方便观察,小文在练习的时候用的是图形化工具SQLyog然后用共用到两张表,employees表和girls表. 如果有需要该软件和上述两张表的兄弟可以 关注 ...
- 小白终是踏上了这条不归路----小文的mysql学习笔记(8)----分页查询
** 小白终是踏上了这条不归路----小文的mysql学习笔记(1) 小白终是踏上了这条不归路----小文的mysql学习笔记(2)----条件查询 小白终是踏上了这条不归路----小文的mysql学 ...
- 小白终是踏上了这条不归路----小文的mysql学习笔记(4)----常见的基本函数
** 小白终是踏上了这条不归路----小文的mysql学习笔记(1) 小白终是踏上了这条不归路----小文的mysql学习笔记(2)----条件查询 小白终是踏上了这条不归路----小文的mysql学 ...
最新文章
- bootStrap-treeview插件
- memmove 对同一个指针不操作
- cocos2d-x 3.0 画图节点——Node
- autojs toast 可以改变字体颜色吗_喃喃札记 | 你真的需要一部pad做笔记吗?
- 使用MyBatis Plus 3.2.0版本插件代码生成器生成实体类后,对于数据库中字段类型datetime的字段会转变为LocalDateTime类型
- mysql 8.0 yum_CentOS7使用yum安装MySQL8.0
- 怎么解锁blockinput锁定的键盘_“键盘云”--锐角云母公司(Acute angle)又一款矿渣神器...
- GDAL打开HDF格式时遇到的中文路径问题(未解决)
- 为什么volatile能保证有序性不能保证原子性
- [3-6] xp系统主题下载最新xp系统软件更新 [yeskm整理]
- 解读大族激光Q3财报:多元化战略已有成效 未来仍值得关注
- linux下安装postgresql遇到的问题(zlib library not found,readline library not found)
- october cms_October CMS静态页面入门
- 数据结构试卷及答案(七)
- FPGA信号截位策略
- 实现网站的-浏览器的favicon.ico
- seLinux的管理
- uni-app 上传图片到阿里云oss
- 第五篇:Spring源码篇-ApplicationContext
- C语言求最大公约数,最小公倍数
热门文章
- iOS进阶之底层原理-锁、synchronized
- Kali Linux打开多个终端窗口
- XamarinSQLite教程在Xamarin.iOS项目中定位数据库文件
- Linux漏洞建议工具Linux Exploit Suggester
- FMDB使用的数据库的三种形式
- Xamarin.iOS项目编译提示Could not AOT the assembly
- iis日志php,win2008 iis7开启日志按日期分割
- 假赋值java_Java十四天零基础入门-Java赋值运算符
- sap事务代码_SAP事务码太多,记不住怎么办?
- java访问glusterfs_GlusterFS: 访问权限设置