Three.js 项目实战之在线3D纸箱包装DIY设计

709 阅读1分钟

     这个项目是在大学的时候做的,做了没多久就移交给下届的同学继续做了,那我今天分享一下这个项目,主要是是给纸箱厂做一个3D在线包装设计,增加包装纸厂的客户流量,并且也能过让用户得到更好的体验,下面展示的是客户端,后台在我同学那边,我就展示一下客户端。 项目是预研原型,可以拿出来分享。

主界面:

登录和注册页面:

核心纸箱3D展示、编辑界面 

 1.纸箱纹理编辑

2.纸箱平面图展开与折叠

3.平面图展开

        然后呢,就简单说一下啦,注册登录啥的就是传统的javaweb,3D部分就是基于Three.js,平面图的折叠展开呢,也就是基于四元数旋转,当然是为了避免万向解锁的问题,主要是利用Object3D.partent和.children构建层级模型,进行旋转操作,纹理编辑呢,当然也很简单啦,就是利用Canvas2D绘图API进行绘图,在当做Map贴到模型材质上去。

       最后呢,发下广告啦啦啦!这里有WebGL、Vulkan、OpenGL,也有Three.js、Unity、UE4,还有前端框架Vue等!当然也有图形图像处理大佬哈!我们在这里期待你的加入!

                              ​