关于前端:blender建模threejs开发初体验

之前看到过 threejs 做的各种炫酷的案例，甚是乏味，始终打算本人也能写个 demo 尝试下，这次就跟着教程来学习下，小小的入个门。

建模

这次是用 blender 建的模，当然也能够用其他软件。

建模这个其实没啥好说的，各种细节十分琐碎，就是一个游刃有余的过程。教程对老手还是比拟敌对的，每一步的具体操作，快捷键等，教程都有讲到。多看几遍视频，入门 blender 建模不是问题。

也是心有点大，不想齐全复制课上讲的场馆，就按本人想法搭个略微不一样点的。那就来个大话西游（大爱紫霞）里的场景吧。

对于老手来说，建模齐全就是一个迟缓而纠结的过程，遇到各种各样的问题自不必说，跟着教程一步步来就好，其中细节此处略过不表。

插一句

老手可能会遇到无奈插入中文文本的问题，略微提一下：因为默认不反对中文，所以增加文本的时候抉择下反对中文的字体（比方 `Microsoft YaHei`）而后把须要的文字从别的中央复制过去，在编辑模式下粘贴就 OK 了

人物

有了大略的模型后，当然想让场景能动起来，像游戏里一样，退出一个人物，并管制着到处走动，参观下场景 ^_^。

人物模型能够在网上 白嫖 找一个，比方 sketchfab，此处咱们先应用教程提供的模型。

个别模型荡下来时都是动态的，要想有走动的动作，还要进行骨骼绑定，之后咱们能够获取到 走动 -walk和 静止 -idle两种动作。

绑定动作

通过 threejs 中的动画混合器，能够剪辑（clip）出下面的两种动作

而后判断键盘按下的是否是行走（w）键来对应的播放 走动 -walk或 静止 -idle的模型动画

此处 crossPlay 是做了一个动画切换的优化。

视角管制

像游戏里一样，视角追随鼠标进行转动，其实是相机的视角切换，此处咱们能够获取到鼠标的挪动时的地位，而后计算出 clientX 的差值，给予肯定权重后让人物转动 (rotateY) 相应角度即可。

先要把相机 cameraadd到任务模型

射线检测

此处根据 Raycaster 进行了射线碰撞检测，简略来讲，就是以人物核心为终点，向各个方向收回射线，而后检测射线是否与其余物体相交，若相交再依据两个中心点间隔来判断是否会产生碰撞。

结尾

blender建模真的是细活，一点点抠，很须要急躁啊。。

以上只是一点浅见，这次课程真的是播种蛮多，心愿多来点这种课程。