一步一步教你如何利用threejs加载gltf模型来实现DIY换肤功能。

第一次尝试使用GLSL来对页面效果进行处理，所以把实现的过程记录下来，方便自己下次查阅。如果你在这篇文章中发现错误，请帮助我纠正，谢谢。

功能需求：“用户绘制一条线，然后镜像出另外一条线。”

下面是我实现的过程，怕以后要用，就记下来了。

首先对问题的描述转化了一下：“求p(x, y)点， 关于直线p1(x1, y1), p2(x2, y2)镜像 得到P(Px, Py)” 。

带着这个问题开始思考，也在网上找了一些数学计算的公式。

基于threejs来是实现文字&图片3d粒子化的一些方案。

3d框架选择： threejs R88dev

实现一： THREE.TextGeometry（）

利用threejs提供的TextGeometry方法来实现

思路: 利用FontLoader加载一个字体，再通过TextGeometry来将文字粒子化。

实现code如下：

虽然利用threejs来在网页中渲染3d模型不是第一次折腾了，但是还是遇到了各种问题。总结下我所遇到的问题，希望能给正在使用threejs的小伙伴一个帮助。

虽然这个小游戏逻辑不是很复杂，但为了熟悉Phaser这个游戏框架的使用方法所以就选择了它。

另外第一次在项目中尝试使用ES6，之后利用babel进行转换。

自动化构建：gulp(其他文件复制和解析) + webpack(负责js的模块打包) + browser-sync(实时预览);

这个项目尝试用了一些以前没用过的东西，以前项目都是用grunt去打包项目的，这次尝试用了一下webpack，这玩意并不怎么好用（跟我们自己项目的结构有关吧）。因为webpack要把所有东西都模块化，所以所有东西都要require。尴尬的是像我们这种H5页面里面有视频和音频，用webpack打包的时候它不会将这些资源打到dist目录下去，只能手动复制过去，文件少的时候也还可以接受，多的时候就操蛋了。只能结合grunt或者gulp一起来解决这个问题了。

第一次使用threejs到实际项目中，开始的时候心情有点小激动，毕竟是第一次嘛，然而做着做着就感受到这玩意水好深，满满的都是坑，填都填不过来。经过老板20天惨无人道的摧残，终于小有成就。

threejs基本使用

今天突然翻出自己之前做的一个项目，看看了之前的需求有一个动画条需要在用户播放时动画条就闪动，暂停就停止不动。当时自己年少无知，以为实现不了就利用一个gif蒙混过去了。自从在移动端写了大量的animation动画后，发现animation可以实现此需求，所以决定将gif给废掉，自己模仿一个。

控制背景图片的太小以前我们都是使用js去动态设定它的大小，然而css3给我们提供了background-size这个属性我们可以轻松的来控制背景图片的大小。还可以通过媒体查询来进行不同屏幕的适配。

####background-size

取值：

length(长度值) | percentage(百分比值) | auto | cover | contain 

最近的的项目基本都是移动端的活动页面，所以css3的很多属性都可以肆无忌惮的用了，布局常见的就是利用box来布局了。下面就来介绍利用旧版box的基本使用，高级使用自行揣摩。

####-webkit-box

属性： box-orient; box-align; box-pack; box-flex; box-ordinal-group; box-lines;

首先需要有一个github的帐号,如果没的同学请绕过下面,点击左上角的小叉叉.

###一、安装Ruby

PS:我的系统环境是win7 64bit

    进入http://rubyinstaller.org/downloads/ 下载Ruby和DevKit并安装，因为运行Jekyll需要他们的支持，DevKit请大家选择自己的版本，分64位和32位两个版本.

安装如下:

一、安装 markdown:

ctrl+ ‘ 打开命令控制台 输入如下命令（或者点击sublime的菜单栏 view->show console）.

 import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

ps:sublime text3 请使用输入以下命令.

 import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

This Jekyll introduction will outline specifically what Jekyll is and why you would want to use it. Directly following the intro we’ll learn exactly how Jekyll does what it does.