关于前端:我给鸿星尔克写了一个720°看鞋展厅

最近因为鸿星尔克给河南捐了 5000 万物资，真的是看哭了很多的网友，一般一家公司捐款 5000 万可能不会有这样的共情，然而看了鸿星尔克的背景之后，发现真的是令人心酸。鸿星尔克 2020 年的营收是 28 亿，然而利润却是亏损 2 个亿，甚至连微博的官网账号都舍不得开会员，在这种状况下，还豪气地捐献 5000 万，真的是破防了。

网友还称鸿星尔克，特地像是老一辈人省吃俭用一分一毛攒起来的贷款，小心翼翼存在铁盒里。一据说祖国须要，立马拿出铁盒子，哗~ 全导给你。让上最贵的鞋，拿出了双 249 的。

而后我去鸿星尔克的官网看了看他家的鞋子。

好家伙，等了55 秒，终于把网站关上了。。。（看来真的是年久失修了，太令人心酸了。作为一个前端看到这一幕真的疯了 …）

恰逢周末，我就去了离我最近的鸿星尔克看了看。买了一双 136 的鞋子（是真的便宜，最要害的还是难受）。

买回家后心里想着，像毒 APP 下面那些阿迪、耐克的都有线上 360° 查看，就想着能不能给鸿星尔克也做一个呢，算作为一个技术人员为它出的一份绵薄之力。

有了这个想法后，我就立马开始口头了。而后我大抵总结了以下几个步骤：

1. 建模

2. 应用 Thee.js 创立场景

3. 导入模型

4. 退出 Three.js 控制器

因为之前学习了一些 Three.js 的相干常识，因而对于有了模型后的展现还是比拟有底的，因而其中最麻烦的就是建模了，因为咱们须要把一个 3 维的货色，放到电脑中。对于 2 维的物体，想要放到电脑上，咱们都晓得，非常简单，就是应用相机拍摄一下就好了，然而想要在电脑中查看 3 维的物体却不一样，它多了一个维度，减少的量的确成倍的增长，于是开始查阅各种材料来看如何可能建设一个物体的模型。

查了一堆材料，想要建设一个鞋子模型，总结起来共有两种模式。

1. 摄影绘图法（photogrammetry）：通过拍摄照片，通过纯算法转化成 3d 模型，在图形学中也称为单目重建。

2. 雷达扫描（Lidar scan）：是通过激光雷达扫描，何同学的最新一期视频中也提到了这种形式扫描出点云。

放上一个我总结的纲要，大部分都是国外的网站 / 工具。

一开始搜寻后果中，绝大多数人都在提 123D Catch，并且也看了很多视频，说它建设模型疾速且真切，然而再进一步的摸索中，发现它貌似在 2017 年的时候业务就进行了合并进行了整合。整合后的 ReMake 须要付费，处于老本思考我就没有持续了。（毕竟只是 demo 尝试）

前面发现一款叫做 Polycam 的软件，成品成果十分好。

然而当我抉择应用的时候，发现它须要激光雷达扫描仪（LiDAR），必须要 iphone 12 pro 以上的机型能力应用。

最终我抉择了 Reality Capture 来创立模型，他是能够通过多张图片来合成一个模型的形式，看了一些 b 站的视频，感觉它的呈像成果也不错，不过它只反对 windows，且运行内存须要 8g，这个时候我搬出了我 7 年前的 windows 电脑 … 发现没想到它还能退役，也是惊喜。

上面就开始正式的内容，配角就是我这次买的鞋子（结尾放的那双）

而后咱们开始拍摄，首先我环绕着鞋子随便拍摄了一组照片，然而发现这个模型真的差强人意 …

前面我也采纳了白幕的模式，加了一层背景，前面发现还是不行，利用更多是辨认到了前面的背景数字。

最初 … 还是在楠溪的帮忙下，将背景图 P 成了红色。

皇天不负有心人，最终的成果还不错，基本上的点云模型曾经进去了。（这感觉还不错，有种电影里的黑科技的感觉）

上面是模型的样子，曾经是我花了一天的工夫训练出的最好的模型了（然而还是有一些轻微的毛糙）

为了尽可能的让模型看起来完满，两头一共花了一天的工夫来测试模型，因为拍摄的角度以及十分影响模型的生成，我一共拍了大概 1G 的图片，大概 500 张图片（因为后期不懂如何调整模型，因而尝试了大量的办法。）

有了模型后，咱们就能够将它展现在互联网上啦，这里采纳了 Three.js（因为这里思考到很多人不是这块畛域相干的人员，因而会讲的比拟根底，大佬们请见谅。）

次要由三局部组成（构建场景、模型加载、增加控制器）

1. 构建 3d 场景

首先咱们先加载 Three.js

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.module.js';
</script>

而后创立一个WebGL 渲染器

const container = document.createElement('div');
document.body.appendChild(container);

let renderer = new THREE.WebGLRenderer({ antialias: true} );
container.appendChild(renderer.domElement);

再将增加一个场景和照相机

let scene = new THREE.Scene();

相机语法PerspectiveCamera(fov, aspect, near, far)

// 设置一个透视摄像机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 1000);
// 设置相机的地位
camera.position.set(0, 1.5, -30.0);

将场景和相机增加到 WebGL 渲染器 中。

renderer.render(scene, camera);

2. 模型加载

因为咱们的导出的模型是 OBJ 格局的，体积十分大，我先后给它压成了 gltf、glb 的格局，Three.js 曾经帮咱们写好了 GLTF 的 loader，咱们间接应用即可。

// 加载模型
const gltfloader = new GLTFLoader();
const draco = new DRACOLoader();
draco.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
gltfloader.setDRACOLoader(draco);
gltfloader.setPath('assets/obj4/');
gltfloader.load('er4-1.glb', function (gltf) {gltf.scene.scale.set(0.2, 0.2, 0.2); // 设置缩放
  gltf.scene.rotation.set(-Math.PI / 2, 0, 0) // 设置角度
  const Orbit = new THREE.Object3D();
  Orbit.add(gltf.scene);
  Orbit.rotation.set(0, Math.PI / 2, 0);

  scene.add(Orbit);
  render();});

然而通过以上代码关上咱们的页面会是一片乌黑，这个是因为咱们的还没有增加光照。于是咱们持续来增加一束光，来照亮咱们的鞋子。

// 设置灯光
const directionalLight = new THREE.AmbientLight(0xffffff, 4);
scene.add(directionalLight);
directionalLight.position.set(2, 5, 5);

当初可能清晰地看到咱们的鞋子了，好像光明中看到了光明，然而这时候无奈通过鼠标或者手势管制的，须要用到咱们 Three.js 的控制器来帮忙咱们管制咱们的模型角度。

3. 增加控制器

const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
controls.minDistance = 2; // 限度缩放
controls.maxDistance = 10;
controls.target.set(0, 0, 0);  // 旋转中心点
controls.update();

这个时候咱们就能从各个角度看咱们的鞋子啦。

功败垂成！

在线体验地址: https://resume.mdedit.online/…

开源地址（蕴含了工具、运行步骤以及理论 demo）：https://github.com/hua1995116…

因为工夫无限（花了一整天周末的工夫），还是没有失去一个十分完满的模型，后续也会持续摸索这块的实现，再后续将摸索是否能实现一条自动化的形式，从拍摄到模型的展现，以及其实咱们有了模型后，离 AR 试鞋也不远了，如果你有趣味或者有更好的想法倡议，欢送和我交换。

最初非常感谢楠溪，放下了本来打算的一些事件来帮忙一起拍摄加前期解决，以及陪我解决了一整天的模型。（条件无限的拍摄真的太艰巨了。）

还有祝鸿星尔克可能成为短暂的企业，放弃翻新，做出更多更好的运动服装，让此刻的全民青眼的状态放弃上来。

得出的几个拍摄技巧，也是官网提供的。

1. 不要限度图像数量，RealityCapture 能够解决任意张图片。

2. 应用高分辨率的图片。

3. 场景外表中的每个点应该在至多两个高质量的图像中清晰可见。

4. 拍照时以圆形形式围绕物体挪动。

5. 挪动的角度不要超过 30 度以上。

6. 从拍摄整个对象的照片，挪动它而后关注细节，保障大小都差不多。

7. 残缺的盘绕。（不要绕半圈就完结了）

回看笔者往期高赞文章，兴许能播种更多喔！

2021 前端学习门路书单—自我成长之路
从破解某设计网站谈前端水印(具体教程)
一文带你层层解锁「文件下载」的神秘
10 种跨域解决方案（附终极大招）

❤️关注 + 点赞 + 珍藏 + 评论 + 转发❤️ ，原创不易，激励笔者创作更好的文章

关注公众号 秋风的笔记，一个专一于前端面试、工程化、开源的前端公众号

关于前端:我给鸿星尔克写了一个720°看鞋展厅

口头

建模

构建利用

后续布局

附录

结语