blender建模&threejs开发初体验

之前看到过threejs做的各种炫酷的案例,甚是有趣,一直打算自己也能写个demo尝试下,这次就跟着教程来学习下,小小的入个门。

建模

这次是用blender建的模,当然也可以用其他软件。

建模这个其实没啥好说的,各种细节非常琐碎,就是一个熟能生巧的过程。教程对新手还是比较友好的,每一步的具体操作,快捷键等,教程都有讲到。多看几遍视频,入门blender建模不是问题。

也是心有点大,不想完全复制课上讲的场馆,就按自己想法搭个稍微不一样点的。那就来个大话西游(大爱紫霞)里的场景吧。

blender建模&threejs开发初体验_第1张图片

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

插一句

新手可能会遇到无法插入中文文本的问题,稍微提一下:
由于默认不支持中文,所以添加文本的时候选择下支持中文的字体(比如`Microsoft YaHei`)
然后把需要的文字从别的地方复制过来,在编辑模式下粘贴就OK了

blender建模&threejs开发初体验_第2张图片

人物

有了大概的模型后,当然想让场景能动起来,像游戏里一样,加入一个人物,并控制着四处走动,参观下场景^_^。

人物模型可以在网上白嫖找一个,比如sketchfab,此处我们先使用教程提供的模型。

blender建模&threejs开发初体验_第3张图片

一般模型荡下来时都是静态的,要想有走动的动作,还要进行骨骼绑定,之后我们可以获取到走动-walk静止-idle两种动作。

blender建模&threejs开发初体验_第4张图片

绑定动作

通过threejs中的动画混合器,可以剪辑(clip)出上面的两种动作

blender建模&threejs开发初体验_第5张图片

然后判断键盘按下的是否是行走(w)键来对应的播放走动-walk静止-idle的模型动画

blender建模&threejs开发初体验_第6张图片

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

视角控制

像游戏里一样,视角跟随鼠标进行转动,其实是相机的视角切换,此处我们可以获取到鼠标的移动时的位置,然后计算出clientX的差值,给予一定权重后让人物转动(rotateY)相应角度即可。

先要把相机cameraadd到任务模型

blender建模&threejs开发初体验_第7张图片

射线检测

此处依据Raycaster进行了射线碰撞检测,简单来讲,就是以人物中心为起点,向各个方向发出射线,然后检测射线是否与其他物体相交,若相交再根据两个中心点距离来判断是否会发生碰撞。

结尾

blender建模真的是细活,一点点抠,很需要耐心啊。。

以上只是一点浅见,这次课程真的是收获蛮多,希望多来点这种课程。

你可能感兴趣的:(blender建模&threejs开发初体验)