我们如何构建BFCM 2023地球仪
Every year for Black Friday Cyber Monday (BFCM), we put together a real-time visualization of purchases made through Shopify-powered merchants worldwide. This year we're cooking up something big, and in anticipation we wanted to show you how we built the globe last year.
每年在黑色星期五网络星期一（BFCM）期间，我们都会制作一个实时可视化展示，通过Shopify支持的商家在全球范围内的购买情况。今年我们正在准备一些大动作，并且为了预热，我们想向你展示我们去年是如何构建这个地球仪的。
Video of BFCM 2023 Globe
BFCM 2023 地球仪视频
Besides going for better visuals, a big focus was performance. We've put together an interactive deep dive into how we built and optimized the 3D visuals using technologies such as Three.js and React-three-fiber.
除了追求更好的视觉效果，我们还非常注重性能。我们汇总了一个互动深入探讨，展示了我们如何使用 Three.js 和 React-three-fiber 等技术构建和优化 3D 视觉效果。
Before we jump in, here's the globe with simulated data that you can play with.
在我们开始之前，这里有一个带有模拟数据的地球，你可以玩一下。
Arcs
弧线
The arcs flying around are the most important component. Each one represents an order being placed in real time, and they travel from the merchant to the buyer's location.
飞来飞去的弧线是最重要的组成部分。每一个都代表一个实时下的订单，它们从商家位置飞到买家位置。
These can be defined as a Bézier curve with 4 control points. Each point is a 3-dimensional vector.
这些可以定义为具有4个控制点的贝塞尔曲线。每个点是一个三维向量。
- P0: located at start position
- P0：位于起始位置
- P1: located 25% of the way between start and end
- P1: 位于起点和终点之间的25%处
- P2: located 75% of the way between start and end
- P2：位于起点和终点之间的75%处
- P3: located at end position
- P3：位于终点位置
Arc height can be adjusted by moving control points P1 and P2 away from the surface.
可以通过将控制点 P1 和 P2 移离表面来调整弧度高度。
To render the arc, we create a mesh that is a strip of triangles moving along the curve. This gives us the ability to control thickness and have better flexibility for stylizing it with shaders.
为了渲染弧线，我们创建了一个沿曲线移动的三角形条带网格。这使我们能够控制厚度，并且在使用着色器进行样式化时具有更好的灵活性。
You'll notice however that as you move the mesh around, it disappears from certain angles. We needed a way to make it always face the viewer. The solution was surprisingly simple.
然而你会注意到，当你移动网格时，它会从某些角度消失。我们需要一种方法使其始终面向观众。解决方案出奇的简单。
The red lines along the curve represen...