网页3D引擎“Babylon.JS”入门教程翻译总结
使用三个月的业余时间把官方教程的入门部分译为中文并上传到github,在下一步编程前做一个总结。
历程:
最早接触游戏编程是在大三下学期,用汇编语言和实验室里的单片机、触摸屏、电机(提供声效)编的打地鼠程序。后来因为大四的毕业设计与三维空间模拟有关,又自学了MFC编程和NEHE的OpenGL教程(国人翻译版)(C++3D编程的复杂会给任何参与者留下深刻的印象,向先驱者们致敬)。工作后自学了JavaScript语言和前端知识,感觉js与C++相比极其简单易用,如果能以js代替C++进行3D开发可以极大降低编程门槛。在有目的性的搜索下我开始学习html5引入的新技术WebGL(事实上WebGL来自Khronos Group组织,而html5规范来自WHATWG和W3C组织,二者并没有从属关系,只是实际应用时WebGL通常通过html5的canvas被调用)。
派系:
现在网上比较容易找到的WebGL资料分成三个派系:WebGL原生开发派(基础教程参见:http://learningwebgl.com/blog/),Three.js派(《WebGL入门指南》这本书比较简单易懂),Babylon.js派(官方网站:http://www.babylonjs.com/)。按顺序学习了三个派系的基础教程(前两个派系在网上只能找到基础教程)之后我决定以Babylon.js为主要方向。如果要对这三种开发方式做个比较的话:WebGL原生开发好比远古时期的投石索,既原始又难以控制,但通过不断使用投石索锻炼出来的强壮体魄可以在任何情况下给予你支持;Three.js好比AK47,简单粗暴又威力强大,在特定情况下能够快速解决问题,但当你想深入研究时又发觉难以控制;Babylon.js好比绝地武士的光剑,外形简约但变化无穷,一剑在手顿感原力与你同在(丰富的教程和社区)。
教程:
Babylon.js官网上有极其丰富的免费教程和示例,其官网教程区(http://doc.babylonjs.com/tutorials)共有网页博客形式的教程81篇,视频形式的教程10部,其中博客教程分为19篇初级教程、22篇中级教程、40篇高级教程。我翻译的是初级教程前15篇针对入门者的教程,以后有时间会挑选后面重要的部分继续翻译。
语言:
在网络词典的帮助下,单词的认读并没有多大障碍,翻译的难点在于汉语和英语的习惯句式不同,比如中国人习惯说“向那里慢慢走”,而美国人则习惯说“走向那里慢慢地”,当这些被倒装的元素变成词组甚至子句时英汉互译会变得非常复杂。面对这种情况,不浪费分数过英语六级的我只能选择意译或者将一个长句拆成多个短句,实在不行也只能按原文的顺序一一罗列释义,难免有失原文风采,请读者多多原谅。再者,入门部分教程的原文编写者在文中使用了许多表示情感的语气词和表示尴尬的省略号,限于水平,也无法一一完整译出。
工具:
Babylonjs的教程网站使用不同样式来突出强调重要内容,所以我同样以网站方式进行翻译(网站下载地址:https://github.com/ljzc002/ljzc002.github.io/tree/master/BABYLON,可以将文件放在本机的Tomcat中使用,通过githubio直接访问的方法见最后)。为了提高翻译效率我在网站的代码中添加了一个自己编写的全手动翻译插件(限于时间只在IE11下详细调试过,Chrome下肯定有bug)。该插件的基本思路是监听网页中每个可编辑标签的鼠标移入、鼠标移出、鼠标单击事件,在鼠标移入时对标签高亮显示,点击标签时弹出对话框修改本处文字,同时维护一个日志列表支持对错误修改的回滚,最后提供一个按钮将修改完毕的网页导出。我在发布版本中禁用了翻译插件,如果希望使用可以在window.onload中注释掉“if(true) return;”。顺便说一下Babylonjs网站的“分布式程度”极高,其样式表、字体、乃至JavaScript脚本都是通过CDN进行动态分配、组装的,我们甚至可以看到有些标签的类名是本地的地名!我做的翻译网页只是对其外形的粗略模仿。
版权:
上面所有文字的版权、翻译插件的版权、译文的版权归我所有,使用MIT协议发布;原版官方教程和引用的各项资源的版权归原作者所有,使用各自原有的许可协议。
githubio访问方法:
使用url“"http://ljzc002.github.io/BABYLON/HTML/"+html文件名访问”,比如“http://ljzc002.github.io/BABYLON/HTML/001Basic_scene.html”即为访问/BABYLON/HTML/目录下的“基础场景”网页。
网页3D引擎“Babylon.JS”入门教程翻译总结的更多相关文章
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- js模版引擎handlebars.js实用教程
js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- D3.js 入门教程
最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程 http://wiki.jikexueyuan.com/project/d3wiki/author.h ...
- Babylon.js 入门简介和开发实例
Babylon.js是一款WebGL开发框架,和Three.js类似. Three.js是由社区推动的,比Babylon.js要成熟些,而Babylon.js是微软推动的,和微软的相关技术结合更好. ...
- js模版引擎handlebars.js实用教程——目录
写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
随机推荐
- java.lang.ClassNotFoundException: org.apache.catalina.startup.VersionLoggerListener
解决办法 找到Tomcat配置文件server.xml apache-tomcat-7.0.57/conf 将<Listener className="org.apache.cat ...
- js实现去重字符串
实现去重字符串主要是把重复的字符与原来的字符(先push()进入一个数组存起来)相匹配,如果match返回的不是null则说明重复,就删除掉: <script> var str = pro ...
- Java-Android【1】-控制手机震动
一.配置震动授权 1.在AndroidManifest.xml文件中添加<manifest></manifest>中添加一行 <uses-permission andro ...
- jQuery 一些神奇的选择器写法
======================================================================== =========================== ...
- PKUSC2016
day x(x<0) 外出培训倒数第二天晚上发烧了....逃过了第二天早上的考试,orz 抢到rank 1 的commonc神犇!! day 0 下午到了北大,发了两张50元饭卡.这是第三次来北 ...
- C#_Express-ickd接口
爱查快递接口使用 using System; using System.Collections.Generic; using System.IO; using System.Net; using Sy ...
- Mysql创建新用户方法
1. CREATE USER 语法: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 例子: CREATE USER 'dog'@'lo ...
- onselectstart="return false"
以前在做图片滚动时,在双击左右箭头,快速切换图片滚动时,会选择附近区域的文字,感觉不是很好,今天在查资料时,讲到了这个问题, 试了一下,不错,解决了问题. IE及Chrome下的方法一样,对相应的元素 ...
- 【Alpha】Daily Scrum Meeting第七次
一.本次Daily Scrum Meeting主要内容 各队员的任务完成情况 文件选择器布局只是暂时使用,后期会改方式,放在后面解决. 接下去都要做什么 二.项目进展 学号尾数 今日已完成任务 接下去 ...
- TweenMax参数说明
TweenMax 建立在 TweenLite 和 TweenFilterLite 基础之上,因此,又揉合了这二者的功能,使得功能更加的齐备,但是如果说易用性,觉得还是 TweenLite 来得方便一些 ...