Day23 - 打造质感系3D聊天室 - three.js + socket.io(一)

这里是「Three.js学习日誌」的第23篇，这篇是在讲解使用three.js + socket.io打造3D聊天室作品。这系列的文章假设读者看得懂javascript，并且有Canvas 2D Context的相关知识。

今天我们要开始本次赛程的第一个创作!话不多说，就让我们马上开始吧!

这边先来看一下今天我们预计要达成的进度画面。

我们在上一回製作了的，也就是专案模板!

而这次我们当然就是要直接拿来使用了，不过在用之前我们先来看图回忆一下整体模板的流程架构。

备注:由于笔者在2022/10/9有对上一回的文章做过一些优化更改，部分的内容可能跟赛事官方保留的快照有些微差异(主要是补上类别的描述)，在这边特此注明，对评审造成不便，敬请见谅。

:

首先就是要先从上面的先一份下来(当然也可以直接选择Use this template)。

接着:

先跟大家说一下，这边我其实已经先在上面的REPO装好，以备后续使用。

我们先来稍微修改一下的架构，以符合之后UI上的需求。

这边因为我们在调整过之后，的机制会变得有点异常，所以得要修正一下的方法。

调整完结构接下来当然就是调整的样式。

不过老实说笔者自己也觉得在这边把一拖拉库的搬上来照贴实在没太大意义。

毕竟切版也不是这次的主题

所以我打算用图片说明一下我在UI方面的规划。

这边我会把UI分成区和区。

给读者的题外话: 对 ~ 两边都会显示聊天室的内容，因为笔者小弟我觉得这样很Cool~，麻烦别吐槽我实用性或意义的问题，那样很没幽默感唷 ^.<*~

: 就是中间的方块

: 右下角的按钮按下之后整个画面会往左推，接着在右侧显示出来的画面。

如果真的想要确认样式的部分，我们在这个作品创作的部分结束后会再提供这个专案的REPO地址。

在上面的进度画面中我们其实可以看到画面上会有灰色-深灰色的渐层背景，这部分我们之前是没有提到过。

其实那就是把环境贴图应用在背景的结果，而我是在作的相关设置。

在我们製作的中，如果想要创建新的物件，规範上是要开一个新的文件放在底下的

并且要在 Export 出去。

所以这边我们先创立一个在底下

在这边我们实际上是用来实作导角方块。

所谓的(突出)其实是建模的一种术语，意思是把一或多个平面沿着它自己的法向量突出，并形成一个全新的体积。

extrude前和extrude后

而大多数建模软体在之后都有搭配一个机能，叫做，这个机能就是用来让我们创造导角用的。

blender的bevel看起来就像这样

而的用法是:

首先要先传入一个 的实例，就有点像我们在上绘製的路径

把shape传进去ExtrudeGeometry做 和。

最后要记得发动的方法，不然他会以左下角为原点置中

我的构想是这个方块在的时候会有一个比较大幅度的旋转动画，而且本身会在这个动画之后慢慢自旋。

所以这边我们这样写:

这边比较值得一提的就是旋转动画的实作。

这边我选择去把放入一个中，再把加入场景。

像这样去实作方块的动画，也就是我们之前有提到过的「把旋转轴分离在不同层级」，这样就可以同时达成两种旋转方向的总和，而且也比较直观。

如果忘记是哪里有提到，可以看这边

今天我们主要是作完整体外观的一部分，明天将会继续这部分的製作，希望各位能够继续追蹤~