圣诞节要到了,准备蹭一下热度。画一颗3D的圣诞树。(好吧!这就是一颗松树,没有彩灯彩带糖果的不能叫圣诞树。)
先看效果:
还没有研究过three.js,想做个3D的树,开始也没有一个好的想法。
偶然间想起上学时候玩CS的时候(我是不是暴露年龄了),里边有些场景的树。远看是树的样子,走过去就是一张纸片。是由多角度的2D图形拼起来的。
按照这个思路来做。使用CSS3的3D样式。
大概就像翻开的书的样子,将多张2D的树复制并旋转。
(图片来自互联网)
如何画出一颗树就不再多说了。之前好几篇文章都是关于画树的了。
最简的3D树做法,画出一颗树之后,将数据复制多份,以Y轴为圆心均匀旋转。
我为了不让显得那么雷同,每张图都重新画,然后做的旋转。
这里仅提下思路,具体代码就查看演示地址源码吧。
领取专属 10元无门槛券
私享最新 技术干货