之前看到过 threejs
做的各种炫酷的案例,甚是乏味,始终打算本人也能写个 demo 尝试下,这次就跟着教程来学习下,小小的入个门。
建模
这次是用 blender
建的模,当然也能够用其他软件。
建模这个其实没啥好说的,各种细节十分琐碎,就是一个游刃有余的过程。教程对老手还是比拟敌对的,每一步的具体操作,快捷键等,教程都有讲到。多看几遍视频,入门 blender
建模不是问题。
也是心有点大,不想齐全复制课上讲的场馆,就按本人想法搭个略微不一样点的。那就来个大话西游(大爱紫霞)里的场景吧。
对于老手来说,建模齐全就是一个迟缓而纠结的过程,遇到各种各样的问题自不必说,跟着教程一步步来就好,其中细节此处略过不表。
插一句
老手可能会遇到无奈插入中文文本的问题,略微提一下:因为默认不反对中文,所以增加文本的时候抉择下反对中文的字体(比方 `Microsoft YaHei`)而后把须要的文字从别的中央复制过去,在编辑模式下粘贴就 OK 了
人物
有了大略的模型后,当然想让场景能动起来,像游戏里一样,退出一个人物,并管制着到处走动,参观下场景 ^_^。
人物模型能够在网上 白嫖 找一个,比方 sketchfab,此处咱们先应用教程提供的模型。
个别模型荡下来时都是动态的,要想有走动的动作,还要进行骨骼绑定,之后咱们能够获取到 走动 -walk
和 静止 -idle
两种动作。
绑定动作
通过 threejs
中的动画混合器,能够剪辑(clip
)出下面的两种动作
而后判断键盘按下的是否是行走(w
)键来对应的播放 走动 -walk
或 静止 -idle
的模型动画
此处 crossPlay
是做了一个动画切换的优化。
视角管制
像游戏里一样,视角追随鼠标进行转动,其实是相机的视角切换,此处咱们能够获取到鼠标的挪动时的地位,而后计算出 clientX
的差值,给予肯定权重后让人物转动 (rotateY
) 相应角度即可。
先要把相机 camera
add
到任务模型
射线检测
此处根据 Raycaster
进行了射线碰撞检测,简略来讲,就是以人物核心为终点,向各个方向收回射线,而后检测射线是否与其余物体相交,若相交再依据两个中心点间隔来判断是否会产生碰撞。
结尾
blender
建模真的是细活,一点点抠,很须要急躁啊。。
以上只是一点浅见,这次课程真的是播种蛮多,心愿多来点这种课程。