Blender建模3D虚拟书架

全篇共 1687 字。按500字/分钟阅读速度,阅读完预计需要 3.4 分钟。

截止到这篇文章发布,我已经在自己的个站发布了9篇记录读书心得的想法,而这才刚刚开始。我有创作虚拟书架这一独立作品的设想,一来因为我真实的小书桌已经快要满了,二来因为我希望自己读过的书单和写过的心得能以视觉化的方式呈现。我没在一开始就思考我的虚拟书架最终会做成什么样子,而是做一步想一步,每一步都有结果,逐渐成熟,但不会结束。

上手准备

  1. 下载Blender。前往Blender官方网站下载最新版Blender软件。Blender可以在Windows、macOS和Linux系统上使用。
  2. 入门Blender。在Bilibili、YouTube等视频分享平台可以找到大量关于Blender入门的系列视频教程。在Blender官方支持中可查阅到更详尽的Blender使用文档。

制作模型

把书简化成一个立方体。为了快速验证虚拟书架的想法是否在技术上可行,因此在前期探索阶段不在细节上浪费时间。

制作纹理贴图

拍摄一本书的各个角度,作为纹理贴图素材使用。

在Blender中展开模型的UV。

在Photoshop中将拍摄的素材按照UV展开图制作纹理贴图。下图中左侧是模型的UV展开图,右侧是模型的纹理贴图。

应用贴图

在Blender中导入制作好的纹理贴图并应用到模型上。

导出模型

在Blender中给每个模型添加必要的自定义属性,以便于在前端使用这些数据。在模型导出设置面板中将自定义属性包括在glTF文件内。

前端渲染模型

在前端,借助ThreeJS库将带有纹理贴图的模型渲染出来。

使用ThreeJS库导入glb/gltf格式的模型的代码片段。

const loader = new THREE.GLTFLoader();
loader.load('book.glb', function (gltf) {
  const geometry = new THREE.Geometry();
  geometry.fromBufferGeometry(gltf.scene.children[0].geometry);
  const mesh = new THREE.Mesh(geometry, gltf.scene.children[0].material);
  scene.add(mesh);
})

想要看到导入的模型,还需在场景中添加一枚环境灯光。

var light = new THREE.AmbientLight(0xffffff); // 环境白光
scene.add(light);
原创作者 » 陈帅华
版权声明 » 自由转载-保持署名-非商用-非衍生
发布日期 » 2020年8月19日 周三
更新日期 » 2020年8月21日 周五
上一篇 » C1驾考之科目三
下一篇 » 项目管理平台开发记录
:)记录此刻想法
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录