大佬给鸿星尔克写了一个 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