大佬给鸿星尔克写了一个720看鞋展厅
前段时间,在各大互联网平台,鸿星尔克成为了顶流般的存在。鸿星尔克官方账号更是一夜暴涨百万粉丝,直播间产品也被卖到下架,在鸿星尔克捐款的消息出现之后,在短短的几天里,鸿星尔克的销售额就超过了上半年的总销售额。
一周前,有一个程序员@蓝色的秋风在 GitHub 开源了一个项目,用 Three.js 和自己训练的模型搞了一个看鞋展厅。
作者大致总结了以下几个步骤:
1.建模
2.使用 Thee.js 创建场景
3.导入模型
4.加入 Three.js 控制器
作者首先环绕着鞋子拍摄了一组照片,但是发现这个模型差强人意。
然后将背景图 P 成白色便好了很多:
进行到这一步,基本上的点云模型已经出来了:
作者花一天的时间训练了一个模型:
模型训练完毕,接下来便正式开发展厅了。
1. 构建3d场景
首先加载 Three.js,创建一个WebGL渲染器,然后再将添加一个场景和照相机,将场景和相机添加到 WebGL渲染器中。
2. 模型加载
直接使用 Three.js 写好的 GLTF 的 loader 加载模型,然后添加一束光,照亮鞋子。
3. 添加控制器
到了这里只能看到鞋子,并无法通过鼠标或者手势控制,需要用到我们 Three.js 控制器来控制模型的角度。
这个时候我们就能从各个角度看我们的鞋子啦。
在线体验地址: resume.mdedit.online/erke/ 开源地址:https://github.com/hua1995116/360-sneakers-viewer