之前看到过`threejs`做的各种炫酷的案例,甚是有趣,一直打算自己也能写个demo尝试下,这次就跟着课程来学习下,小小的入个门。
建模
这次是用`blender`建的模,当然也可以用其他软件。
建模这个其实没啥好说的,各种细节非常琐碎,就是一个熟能生巧的过程。课程对新手还是比较友好的,每一步的具体操作,快捷键等,胖达老师都有讲到。多看几遍视频,入门`blender`建模不是问题。
也是心有点大,不想完全复制课上讲的场馆,就按自己想法搭个稍微不一样点的。那就来个大话西游(大爱紫霞)里的场景吧。
![](https://img-blog.csdnimg.cn/img_convert/1da0f4fd25818b7a7c70d6c344e5cdc1.gif)
对于新手来说,建模完全就是一个缓慢而纠结的过程,遇到各种各样的问题自不必说,**跟着训练营一步步来就好**,其中细节此处略过不表。
插一句
新手可能会遇到无法插入中文文本的问题,稍微提一下:
由于默认不支持中文,所以添加文本的时候选择下支持中文的字体(比如`Microsoft YaHei`)
然后把需要的文字从别的地方复制过来,在编辑模式下粘贴就OK了
![](https://i-blog.csdnimg.cn/blog_migrate/0c027e0b2a94e1e31da5da200e9d6dcd.png)
人物
有了大概的模型后,当然想让场景能动起来,像游戏里一样,加入一个人物,并控制着四处走动,参观下场景^_^。
人物模型可以在网上~~白嫖~~找一个,比如[sketchfab](www.sketchfab.com),此处我们先使用@胖达老师提供的模型
![](https://i-blog.csdnimg.cn/blog_migrate/6389849dcf9cee3569f2463c96592f62.png)
一般模型荡下来时都是静态的,要想有走动的动作,还要[进行骨骼绑定](www.mixamo.com),之后我们可以获取到`走动-walk`和`静止-idle`两种动作。
![](https://i-blog.csdnimg.cn/blog_migrate/73e208e4545d8391945cc6e84db09d86.gif)
绑定动作
通过`threejs`中的动画混合器,可以剪辑(`clip`)出上面的两种动作
![](https://i-blog.csdnimg.cn/blog_migrate/a2745bbebc8e1a60bbbd3ef7b6bf4bec.png)
然后判断键盘按下的是否是行走(`w`)键来对应的播放`走动-walk`或`静止-idle`的模型动画
![](https://i-blog.csdnimg.cn/blog_migrate/1fd1af3603d6b24e22ae3f5a52181bdb.png)
此处`crossPlay`是做了一个动画切换的优化。
视角控制
像游戏里一样,视角跟随鼠标进行转动,其实是相机的视角切换,此处我们可以获取到鼠标的移动时的位置,然后计算出`clientX`的差值,给予一定权重后让人物转动(`rotateY`)相应角度即可。
先要把相机camera`add`到任务模型
![](https://i-blog.csdnimg.cn/blog_migrate/190cd45ca0e5979a6b65fa5c26f31038.png)
射线检测
此处依据`Raycaster`进行了射线碰撞检测,简单来讲,就是以人物中心为起点,向各个方向发出射线,然后检测射线是否与其他物体相交,若相交再根据两个中心点距离来判断是否会发生碰撞。
结尾
`blender`建模真的是细活,一点点抠,很需要耐心啊。。
以上只是一点浅见,这次训练营真的是收获蛮多,希望多来点这种课程。
![](https://i-blog.csdnimg.cn/blog_migrate/b1ae511be36095717c9ee856c9107c08.png)