体验Blender3D建模UV贴图导入Threejs

初次认识Blender,是在2016年11月。就在上个月,Blender发布2.8beta版。我自己对新版Blender的使用感受是,Blender一改2.7及之前版本的界面风格。

  1. 扁平化图标/UI,这使得用户的注意力都在场景当中。
  2. 凸显常用操作,3D变换、建模、显示模式等常用操作总是保持在主界面中。

blender开始建模界面 - 陈帅华

迫不及待上手体验新版Blender3D建模与UV贴图。回想起了我2016年初识Blender。上面这个卫星3D模型是我在2016年在某院某所为某项目制作的,当时就是使用Blender做的建模和贴图。这个模型将和THREEJS配合用于在Web端呈现。

blender制作3D卫星 - 陈帅华

blender导出模型与纹理贴图 - 陈帅华

上图是我在整理过去做过的项目时翻出来的,目录中所罗列出来的就是卫星模型的导出文件以及纹理贴图素材了。

  1. dae格式支持导出动画;
  2. obj格式不支持导出动画;
  3. mtl专门存储材质贴图;
  4. glb/gltf为推荐格式,支持导出动画导出材质贴图。

从Blender2.8支持导出新格式.glb和.gltf,.glb格式存储的是二进制数据格式,.gltf存储的是JSON格式的数据,

  1. glb格式为二进制文件;
  2. gltf格式为JSON格式。

glb和gltf只是格式和存储网格模型数据的方式不同,但导入Threejs项目中后得到的对象完全相同。使用GLTFLoader加载器加载glb和gltf格式的文件,加载成功后在回调函数中得到一个表示glb或gltf中的数据的对象,对象中包括以下属性字段:

  1. animations,动画数据
  2. asset,包括作者署名、导出glb/gltf格式的插件名称及版本号
  3. cameras,包含场景中的摄像机信息
  4. parser,解析glb/gltf格式文件的解析器对象
  5. scene,当前场景,包含场景中的所有物体
  6. scenes,场景数组
  7. userData,用户在blender中自定义的数据

Blender建模Threejs渲染

每次新创建一个blender项目,场景中都会出现一个小立方体。可以将这个立方体删除创建其他物体,但我要保留这个小立方体,并用它来开始一座简易灯塔的建模。

从物体模式切换至编辑模式,开始对小立方体进行建模。通过一系列的挤出、缩放与移动变换操作,一座简易的塔就完成了。这座塔共有64个点、124条边和62个面。这些点、线和面越少,当然也就越省性能。在保证效果的基础上尽可能减少模型面数,能节省内存占用提升性能。

使用blender建模一座塔 - 陈帅华

暂时不修饰材质和贴图,仅仅导出3D模型,也就是仅保留立体几何数据。导出为.glb二进制格式,导出后现实文件有5KB大小。

将模型导入Threejs项目中后,得到一个表示所导入数据的对象,其中我要的模型就在scene场景中。scene继承THREEJS的Object3D基类,所以包含children属性,从中找到塔这个网格模型。然后是材质,我临时使用Threejs提供的MeshNormalMaterial材质,这款材质能清晰的反应3D模型的立体几何外观。

blender能够自动展开模型的UV。但是为了让展开的UV更清楚,需要人工的标记展开切缝。进入编辑模式后,选择线编辑模式,然后将要展开的缝隙切开,再展开UV。展开后的UV布局图就可以导出成图像了。导入到图像编辑软件中绘制贴图,然后再将贴图导入进blender中,即完成了UV贴图的制作。

blender中场景的显示模式包括线框、实体、视觉预览、渲染。这里选择视觉预览模式,就可以看到附加在模型上的UV贴图。开启渲染模式,则会加入灯光的作用。

最后导出带材质的模型到THREEJS项目中即可。如果使用blender导出的材质和贴图,记得要在Threejs场景中添加一种灯光,可以是环境光、电光源或其他灯光类型。这样blender和threejs之间的协作方式就一目了然了。

坐标系

Blender中的3D坐标系与Threejs中的3D坐标系不同,简单来说:

  1. X轴指向相同;
  2. Y轴/Z轴对调。

创建动画

事先在blender中创建简单的关键帧动画。

如果要Threejs中应用动画,时间总是起到关键作用。Threejs提供了一个Clock类像时钟那样记录时间。

var clock = new THREE.Clock();

假设已经在场景中创建了一个网格物体(这个物体通常是从glb文件获取的,这样才能和动画匹配),这里变量名为mesh。

var mesh;
var mixer = new THREE.AnimationMixer( mesh );
var animations = glb.animations; // 获取
var animation = THREE.AnimationClip.findByName(animations, "tower");
var action = mixer.clipAction( animation );
action.play();

动画开始播放了,但是并没有实时渲染到场景中,此时将以下代码加入到requestAnimationFrame中即可在渲染场景时更新动画。

mixer.update( clock.getDelta() );

这样就能看到在blender中创建的动画在Threejs中的渲染效果了。我在blender中创建了塔在平面上移动的简单动画。

授权账号 » 
原创声明 » 未经授权,请勿复制转载,谢谢配合
联系方式 » 
微信:huazi19930927
邮箱:lanserdi@163.com
发布日期 » 2019年8月13日 周二
1条留言 · Github账号登录以留言

陈帅华 · 2019年8月15日 · 第1楼

Blender2.8变化蛮大的