精彩的世界杯决赛期间,参与了胖达老师基于Three.js&Blender的元宇宙搭建入门实训,趁着年前还有点记忆,来做个笔记。本来想在这篇笔记里面完整记下整个流程,但是篇幅实在太长了,本文暂时以Blender探索为主。

Three.js提供的API是可以让我们基于原生JavaScript随便玩的,但是为了让我们能在VSCode环境下有更好的代码提示和热更新,我们可以把Vite和Typescript利用起来(而且Three.js的API命名都比较长,对于我这种中式英语都说不好的人来说,纯手写压力太大)。

依赖安装成功后,我们可以在/src目录下新建一个JS文件,比如study.js,引入three.js以便于我们随后可以随意输出。

这个时候,我们通过npm run start来启动项目,在浏览器中打开控制台,可以看到three.js的API被打印了出来。

元宇宙到底火没火,能不能火?我作为一个小小的web开发无法预知,但是基于元宇宙延伸的web3D交互营销却是在慢热起来,而这些交互必然少不了场景。那我们就借助Blender这个免费开源跨平台的App来手撸一个展馆模型,后续就可以在three.js中加载使用。

打开Blender,新建【常规】项目会默认给我们创建一个立方体box,这个时候我们要清场删掉一切,快捷键A全选视图元素,快捷键X唤起删除。

我们先来创建出场馆主体,使用组件快捷键Shift+A唤起【添加】面板-【网格】-【柱体】,此时面板左下角会有针对我们当前操作项的一个编辑面板,我们可以编辑柱体的半径、深度和顶点,特别需要注意的是【柱体】的顶点数,顶点越多会生成越多的面,会使得曲面越圆滑,但是面数越多加载起来就越耗性能,因此我们要针对需求来合理设置顶点数,比如这里我们可以设置为120就够用了。

我们点选【柱体】并使用快捷键Tab来进入【编辑模式】,此时通过快捷键1/2/3对应切换到点/边/面的编辑模式。

为了更逼真,我们需要把封闭的柱体拆出来一个大门来。流程很简单:选中面并删除,缝合顶点。

首先呢,我们需要了解操作面板右上角的线框/实体/材质渲染预览的视图着色方式,切换这三种视图方式可以让我们编辑时更直观选中或预览渲染效果。

但是此时我们会发现,删除面以后,两侧的连接处是镂空的,我们需要把面缝合起来。

好啦,我们的场馆大体基本完工啦,纯毛坯房啊有木有?这里只是基础的入门笔记,对于Blender而言,掌握常用快捷键就够啦。剩下的,就靠我们的反复click,就可以一点点搭建出更完善的细节,当然这个过程还需要更多的时间和耐心,以及兴趣。

如果你愿意给多一点时间,你能创建出一个自己满意的场景,起码不会比我的差哦。

虽说Blender菜单工具栏的国际化中文支持做的很不错,但是我们要在场景中添加中文文本,还是要稍微费一丢丢功夫。

比葫芦画瓢,我们参照创建柱体的方法(组合键Shift+A)来添加一个【文本】,默认文本内容是“Text”,但是我们怎么编辑文本内容呢?

大家还记得快捷键Tab可以快速进入编辑模式么?同样地,我们使用这个快捷键,此时进入的就是文本的编辑模式啦。我们输入123还是abc都可以,但是就是输入不了中文。不知道是因为中文字体包太大,还是因为有这个需求的用户比较少,反正Blender目前(v3.4.0)版本预置的文本字体是不支持中文的。

选中【文本】节点时,在工作区右侧会有一个【物体数据属性】的菜单,点击进入后有【字体】选择。点击对应字体右侧的目录图标,会自动进入系统字体目录,选择自己中意的字体即可。

选好满意的字体,高高兴兴地输入了新年快乐,发现依然输入不进去,这可怎么办呢?

莫慌,我们有一个经典的土方法:复制粘贴。把想要展示的文本输入到其他编辑器甚至搜索框任意可以复制的地方,复制粘贴进去。

但是我的文本节点就是一个面,这还怎么玩?那接下来,就要把文本立体化处理。

再次快捷键Tab退出编辑模式,快捷键G移动文本节点到合适的为止,快捷键R旋转节点到合适的角度。

旋转的时候,也可以通过左侧的【旋转】菜单,通过轴向坐标拖拽旋转,旋转时如果有固定角度,可以配合左下角当前编辑面板输入角度值进行旋转。

OK,到这里,关于Blender建模的常规操作已经基本都包含啦,大家可以继续舞起来啦~

不管是three.js还是Blender,内容都太多太多了,展开讲三天三夜都讲不完,何况我只是一个寻求入门的web开发。也基于此,在这篇笔记里,我也就暂时忽略了大家可能会比我还熟悉的three.js部分,只留下我这并不完善的代码,着重记录了我第一次接触Blender时遇到的卡壳的地方。 Emm,写得不好请见谅,我要去继续探索了,争取以后能分享给大家更多入门探索笔记。当然,如果你也感兴趣,那就加入猿创营 (v:dashuailaoyuan),一起交流学习。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注