随笔

Hello Threejs

最近看到好多项目都开始做 3D 的了,没错已经不满足 2D 的图标,开始上各种高大上的 3D 展示了,凑巧又看到一个房间的模型,心痒难耐就去了解了下。

1.png

从开始接触到 Canvas 的时候就有过一个想法,我要把虹桥火车站做成 3D 的,对分不清方向的人来说大型建筑简直就是迷宫,尤其虹桥火车站还分南北广场,然后左右还有两条通道。

经过简单的了解后,发现了一个可以让人喘口气的信息,就是你看到的那些模型,其实都是通过建模软件做出来的,不需要去手动创建一个个 Cube,然后找到位置定位拼起来...

所以,每次去火车站的怨念其实要到建模软件里解决,而不是 Canvas 或者 WebGL 啊!

都这份上了,索性便自己实现一个 demo 吧

创建的过程很像七日创世说,神说“要有光”,“要有物”,哈哈哈,代码可以 点击这里 查看,通过 Commit 记录可以看到 “创世” 记录。

整个系统简述下:
第一是 Scene,也就是场景,整个活动在这个 Scene 里面。
第二是 Mesh,也就是物料或者模型,一个个东西。
第三是 Light,有各种光源,比如束光,照射光等,总之就是用光的艺术,哎那这样摄影师学光的时候是不是可以用来模拟学习?

3.gif

做的很简陋啊哈哈,就是导入了一个模型,上方加了个照射光,然后加上了阴影显示,再给模型加上 blender 导入的飞舞动画。

封面 点击这里 查看,一个在线版的英语儿童故事书,比之传统的纸质书,可以看到流动的水还有水流声,飞舞的蝴蝶,轻轻摇动的小草,真的太美了。


刚下楼出去拿快递,一股桂花香味扑面而来~
时间真快呀,一转眼就这么过去了,四月份的场景感觉又要重现了,四周全是封控,希望早日能够科学的解决疫情。

本文链接:https://note.lilonghe.net/post/hello-threejs.html

-- EOF --