three.ar.js_我们如何通过AR.js使产品吉祥物栩栩如生

three.ar.js

by Mateusz Tarnaski

由Mateusz Tarnaski

我们如何通过AR.js使产品吉祥物栩栩如生 (How we brought our product mascot to life with AR.js)

Short answer: using a browser-based Augmented Reality (AR) application. For the long answer, read below.

简短答案：使用基于浏览器的增强现实(AR)应用程序。 对于长答案，请阅读以下内容。

The idea of playing with AR started as a random interesting experiment. In our company, we strive to stay at the edge of the curve. We share technical novelties and new technologies with each other on a semi-regular basis. Since we are mostly dealing with web technologies, the concept of AR in the browser really took off.

玩AR的想法最初是一个有趣的随机实验。 在我们公司，我们努力保持在曲线的边缘。 我们半定期地分享技术新颖性和新技术。 由于我们主要处理Web技术，因此浏览器中AR的概念真正兴起了。

Since AR is mostly an entertainment technology, a practical application was not obvious to us from the start. Luckily, two unrelated things happened at the same time:

由于AR主要是一种娱乐技术，因此从一开始，实际应用对我们来说并不明显。 幸运的是，同时发生了两项无关的事情：

• we had just created a mascot for our product — Hubert,

  我们刚刚为我们的产品创建了一个吉祥物- 休伯特(Hubert) ，

• we had to do a marketing booth at devoxxPL 2018

  我们必须在devoxxPL 2018上做一个营销摊位

We decided to bring Hubert to life during the event, in the form of an AR app for people to play with. In our heads, users should be able to:

我们决定在活动期间通过一个可供人们玩耍的AR应用程序使Hubert栩栩如生。 在我们看来，用户应该能够：

• render Hubert on a wall background in their phones
  在手机中的背景墙上渲染休伯特
• take a picture of the rendered model
  拍摄渲染模型的照片
• tweet the photo (not the subject of this article)
  鸣叫照片(不是本文的主题)

The end result is available on