J.c
I think this is a more accurate Chinese translation: 片段 / 片断 -> 片元
最近为基于 Egg.js 的项目编写单元测试用例。写得七七八八后，想了解一下单元测试的覆盖率。由于第一次接触测试覆盖率报告，对其中一些细节存在疑惑。 经查阅资料后，整理出这篇文章，希望能解答大家一些关于测试覆盖率报告的疑问。 > 注：以下内容是基于 Istanbul 覆盖率引擎。不同覆盖率引擎可能会存在一些差异。 ![通过 Istanbul 得到的测试覆盖率报告][1] 通过 Istanbul 得到的测试覆盖率报告 ## 四个测量维度 1. 行覆盖率（line coverage）：每个可执行代码行是否都执行了？ 2. 函数覆盖率（function coverage）：每个函数是否都调用了？ 3. 分支覆盖率（branch coverage）：每个流程控制的各个分支是否都执行了？ 4. 语句覆盖率（statement coverage）：每个语句是否都执行了？ ![四个测量维度][2] 四个测量维度...
原文：[How to Create an Interactive 3D Character with Three.js][1] 在本长篇教程中，你将学会如何创建一个头部朝向鼠标和点击执行随机动画的交互式 3D 模型。 ![封面][2] 你是否曾经拥有一个展示职业生涯的个人网站，并且里面放着一张个人照片？最近我想更进一步，往里面添加一个完全交互式 3D 版本的自己，它能注视用户的光标。当然这还不够，你甚至可以点击“我”，然后我会作出动作进行响应。本篇教程将讲述如何基于名为 Stacy 的模型实现这件事。 以下就是体验案例（点击 Stacy，同时移动鼠标观察它的动作）。 由于是基于 Three.js 实现，我假设你已掌握了 JavaScript。 See the Pen Character Tutorial -...
原文：[How to Build a Color Customizer App for a 3D Model with Three.js][1] ![封面][2] 本文将阐述如何基于 Three.js 创建一个完整的 3D 模型（椅子）颜色自定义应用。 ![应用截图][3] 马上体验：[3D Model Color Customizer App with Three.js][4] ### 快速介绍 该工具的灵感来源于...
> 本文首发于 [凹凸实验室](https://aotu.io/notes/2016/08/24/2016-8-24-css-3d-panorama/) ![封面][1] ### 前言 3D 全景并不是什么新鲜事物了，但以前我们在 Web 上看到的 3D 全景一般是通过 Flash 实现的。若我们能将 `CSS3 Transform` 的相关知识运用得当，也是能实现类似的效果。 ### 准备 在实现 CSS3 3D 全景之前，我们先理清部分 CSS3 Transform 相关的属性： - [perspective][2]: 指定观察者与 `z=0`...
![封面][1] 呃~貌似好久没写文章了，感觉有点奇怪。废话不多说，但还是加点前戏吧。 > 不想听废话，[直入主题>>](#ae2css-manual) ### 前戏 **为何要写这篇文章** 接下来因工作调整，应该就很少接触 H5 开发了。借此机会总结个人对动画的一些思考。 本文贴合实战，会结合笔者为数不多的开发案例进行讲解🤣。文章结尾也会提供相应文件让读者进行实践。 ### 为何“别人”实现的动效恰到好处？ 同一份设计稿给到不同开发者，结果可能千差万别。而结果主要由两部分体现——内在与外在。『内在』指的是代码质量、性能优化，『外在』则指的是视觉还原度和动效（交互）。 其中对于更直观的『外在』来说，视觉还原度高是前提，真正体现差距的是『动效』。因为设计师一般只给到“静态”的视觉稿，而无动画演示，更不用说提供动效搞（如 AE）了。 在这种情况下，页面的动效更多是由前端开发者自由发挥。因此对动效有钻研的同学优势尽显。我也曾问过这些同学，他们大多回答是：“多试多调”。因此，在设计师无『动效稿』提供的情况下，都需要花时间慢慢调整，以达到各方（本人、设计师、产品和需求方等）满意。若没有设计、动效等相关知识的学习与积累，恐怕是一只『没头苍蝇』。 关于动画的理论方面，笔者并没有积累，但推荐一些不错的资料（或许需要梯子）。同时也希望得到读者们的有效补充： - 动画的十二原则——[12 Principles of Animation (Official Full Series)][2] - 动画的第一步是『观察』——[Exploring Animation And...
![封面][1] “碰乜鬼嘢啊，碰走晒我滴靓牌”。想到“碰”笔者就自然联想到“麻将”这一伟大发明。当然除了“碰”，洗牌的时候也充满了大量『碰撞』。 好了，不废话。直入主题——碰撞检测。 在 2D 环境下，常见的碰撞检测方法有如下几种： - 外接图形判别法 - 轴对称包围盒（Axis-Aligned Bounding Box），即无旋转矩形 - 圆形碰撞 - 圆形与矩形（无旋转） - 圆形与旋转矩形（以矩形中心点为旋转轴） - 光线投射法 - 分离轴定理 - 其他 - 地图格子划分 - 像素检测 下文将以由易到难的顺序介绍上述各种碰撞检测方法：外接图形判别法 >...
> 本文首发于 [凹凸实验室](https://aotu.io/notes/2017/07/23/some-doubts-about-web-games/) ![封面][1] 本文记录了笔者对 Web 游戏的一些疑问，也许你也恰巧曾经遇到过。 ## 回顾 Flash 习大大说道：“不忘历史才能开辟未来，善于继承才能善于创新”。对于新生一代（如 00 后和我🙄 ），由于 Web 新标准的快速推进，有些旧事物也许未接触就已经被新事物取代了。如曾经如日中天的 Flash，现在被 HTML5 逐渐蚕食。 由于我未曾学习过 Flash 编程，所以通过查阅资料发现了一个网站——Waste Creative 公司的[《Flash vs HTML5》][2]，它对 Flash 与 HTML5 作出了比较**（具体数据也许已过时，但整体趋势不变）**。...
> 本文涉及多个 Codepen 案例，若想获得更佳体验，请到 [凹凸实验室博客](https://aotu.io/notes/2017/06/29/motion-detection/) 阅读，谢谢。 ![封面][1] 本文将阐述如何通过 Web 技术实现简易的移动监测效果，并附上一些有意思的案例。 > 移动侦测，英文翻译为“Motion detection technology”，一般也叫运动检测，常用于无人值守监控录像和自动报警。通过摄像头按照不同帧率采集得到的图像会被 CPU 按照一定算法进行计算和比较，当画面有变化时，如有人走过，镜头被移动，计算比较结果得出的数字会超过阈值并指示系统能自动作出相应的处理。——百度百科 由上述引用语句可得出“移动监测”需要以下要素： 1. 一个拥有摄像头的计算机 2. 用于判断移动的算法 3. 移动后的处理 **注：本文涉及的所有案例均基于 PC/Mac 较新版本的 Chrome / Firefox 浏览器，部分案例需配合摄像头完成，所有截图均保存在本地。**...
> 本文涉及多个 Codepen 案例，若想获得更佳体验，请到 [凹凸实验室博客](https://aotu.io/notes/2017/03/24/webar/) 阅读，谢谢。 ![封面][1] > 增强现实（Augmented Reality，简称AR）：是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术，这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。 本文将让你了解“如何通过 Web 技术实现一个简单但有趣的 AR 效果”。 ### 实现分析 正如文章开头说道：AR 是将真实环境与虚拟物体实时地叠加到一个画面。因此我们需要通过摄像头实时获取真实环境，并通过识别算法识别与分析真实环境中特定的物体，然后结合得到的数据，将虚拟物体以某种方式结合到画面中。 结合我们的案例，可得出以下步骤： 1. 获取视频源 2. 分析源，并识别出 Marker 位置 3. 将虚拟物体叠加在 Marker 上...