前段时间,在各大互联网平台,鸿星尔克成为了顶流般的存在。鸿星尔克官方账号更是一夜暴涨百万粉丝,直播间产品也被卖到下架,在鸿星尔克捐款的消息出现之后,在短短的几天里,鸿星尔克的销售额就超过了上半年的总销售额。 一周前,有一个程序员@蓝色的秋风在 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