Low Poly 3D 低多边形 3D(Low Poly 3D)

Scope: Covers the faceted-mesh look in UI, illustration, and game-flavored graphics — visible triangles, per-face flat shading, economy of geometry. Not Isometric 3D (regular blocks on a 30° axonometric grid), not Pixel Art (2D raster grid), and not smooth-shaded or photorealistic 3D rendering.

范围:涵盖 UI、插画和游戏感图形里的刻面网格外观 —— 可见的三角形、逐面平涂着色、几何上的节省。不包括等距 3D(30° 轴测网格上的规则方块)、像素艺术(2D 栅格),也不包括平滑着色或照片级写实 3D 渲染。

Midnight Drive
Neon Coast
1:123:48

标本可交互 —— 点点看。Specimen is live — try it.

If you called it…如果你管它叫……

“3d art that looks like it's made of triangles”「那种看起来全是由三角形拼成的 3D 画」“those faceted geometric animal illustrations”「那种几何切面感的动物插画」“the mountain wallpaper made of colored triangles”「用彩色三角形拼出来的山壁纸」“ps1-looking graphics but on purpose”「故意做成 PS1 那种多边形感的画面」“gem-like polygon art with no textures”「没有贴图、像宝石一样的多边形艺术」“flat shaded 3d where you can see every triangle”「能看到每个三角形的平涂 3D」

Full style DNA完整风格 DNA

  1. Visible triangle mesh可见的三角形网格 geometry defining定义特征

    Surfaces are openly built from irregular triangles of varied size; the mesh is the ornament, not something to hide behind textures.

    表面大大方方地由大小不一的不规则三角形拼成;网格本身就是装饰,不是要藏进贴图后面的东西。

  2. Per-face flat shading逐面平涂着色 surface defining定义特征

    Each triangle is filled with ONE solid color derived from its angle to the light; a gradient across a single face is a tell that it isn't low-poly.

    每个三角形只填一种纯色,色值取自它与光源的夹角;一个面上出现渐变,就说明它不是低多边形。

  3. Deliberately few polygons刻意稀少的多边形 geometry defining定义特征

    A mountain reads in 20–100 triangles — you can count the faces. The economy is visible and is the whole point; denser meshes stop reading as low-poly.

    一座山用 20–100 个三角形就能读出来 —— 面数少得能数清。这份节省看得见,也正是重点;网格一密就不像低多边形了。

  4. Jewel-tone shifted palette宝石色阶配色 color defining定义特征

    Hue steps across the scene (teal → violet → coral), each facet a slightly shifted shade of its neighbor, quantizing what would be a gradient into facets.

    色相在场景中阶梯式推移(青 → 紫 → 珊瑚橙),每个刻面都是邻近面稍微偏移一点的色号,把本该是渐变的东西量化成刻面。

  5. Faceted nature scenes刻面自然场景 imagery supporting辅助特征

    Mountains, foxes, deer, trees, planets — the genre's stock subjects are origami-like takes on nature, often floating on a plain ground.

    山、狐狸、鹿、树、星球 —— 这个流派的经典题材是折纸感的自然物,常常浮在纯色底上。

  6. Crisp facet edges锐利的刻面边缘 surface supporting辅助特征

    Facet boundaries are razor-sharp, sometimes hairline-stroked (0.5–1px) in a shade slightly darker than the faces; never soft or glowing.

    刻面边界锋利如刀,有时用比面深一号的色号勾 0.5–1px 的发丝线;绝不发软或发光。

  7. Slow rigid drift缓慢的刚性漂移 motion variable可变特征

    In motion, low-poly scenes rotate slowly, bob, or drift past the camera; the mesh itself stays rigid and never deforms.

    动起来时,低多边形场景通常缓慢旋转、上下浮动或从镜头前漂过;网格本身保持刚性,永不变形。

  8. Smooth shading or textures平滑着色或贴图 surface avoid避免

    Gouraud gradients, photorealistic textures, and smooth high-poly surfaces destroy the effect — if you can't see the triangles, it isn't low-poly.

    Gouraud 渐变、照片级贴图和光滑的高模表面会立刻毁掉这个效果 —— 看不见三角形,就不是低多边形。

Often confused with: Isometric 3D最容易混淆:等距 3D(Isometric 3D)

Midnight Drive
Neon Coast
1:123:48

Low Poly 3D低多边形 3D(Low Poly 3D)

Midnight Drive
Neon Coast
1:123:48

Isometric 3D等距 3D(Isometric 3D)

This is Low Poly 3D because the surface is an irregular triangle mesh where every facet gets its own flat shade, creating faceted, jewel-like lighting — not clean rectangular blocks arranged on 30° axonometric axes.

这是低多边形 3D,因为它的表面是一张不规则三角形网格,每个刻面各自分到一种平涂色号,形成宝石般的刻面光照 —— 而不是排列在 30° 轴测轴上的干净矩形方块。

It would become Isometric 3D if the irregular triangles were replaced by regular cubes and extruded rectangles drawn on a 120° axis grid with soft cast shadows — a diagram-like block model instead of a faceted mesh.

如果把不规则三角形换成画在 120° 轴网格上、带柔和投影的规则立方体和拉伸矩形 —— 从刻面网格变成示意图式的方块模型 —— 就变成等距 3D 了。

Compare: Low Poly 3D vs Isometric 3D →对比页 →

In code — optional starting points代码写法 —— 可选起点

One flat-shaded facet

clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #7c3aed;

Faceted gem button — hexagon with three flat faces

.gem { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #6d28d9; }
.gem::before { clip-path: polygon(0 50%, 25% 0, 75% 0, 52% 48%); background: #a78bfa; }
.gem::after { clip-path: polygon(52% 48%, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #4c1d95; }

Same facet as utilities

bg-[#7c3aed] [clip-path:polygon(50%_0,100%_100%,0_100%)]

Style brief — paste into your agent风格 Brief —— 粘贴给你的代理

Create the surface using Low Poly 3D. Defining signals: every surface is an irregular triangle mesh with per-face flat shading — each facet ONE solid color, never a gradient across a face; visibly low facet counts (a mountain in 20–100 triangles); crisp facet edges, optionally hairline-stroked 0.5–1px darker. Palette: deep indigo ground #14102b/#1b1538; violet mountain facets #4c1d95/#5b21b6/#6d28d9/#7c3aed/#8b5cf6; teal foreground facets #115e59/#0f766e/#0d9488/#14b8a6/#2dd4bf; coral accents #ea580c/#f97316/#fb923c/#fdba74. Pick each facet's shade from its angle to an imagined light — hue IS the lighting. Controls are faceted gems: clip-path hexagons with pseudo-element triangles in lighter/darker flat shades; border-radius 0. Type: geometric sans (system-ui works) 12–14px in #f5f3ff. Depth comes from shade steps between facets — no drop shadows on facets, no textures, no smooth gradients, no rounded blobs. Motion: only a slow rigid drift, off under prefers-reduced-motion. Not Isometric 3D: irregular triangle mesh with per-facet lighting, not rectangular blocks on a 30° grid.

用低多边形 3D 创建界面。定义性信号:每个表面都是不规则三角形网格,逐面平涂着色 —— 每个刻面只填一种纯色,面上绝不出现渐变;面数肉眼可见地少(一座山 20–100 个三角形);刻面边缘锐利,可用深一号的色号勾 0.5–1px 发丝线。配色:深靛底 #14102b/#1b1538;紫色山体刻面 #4c1d95/#5b21b6/#6d28d9/#7c3aed/#8b5cf6;青色前景刻面 #115e59/#0f766e/#0d9488/#14b8a6/#2dd4bf;珊瑚橙点缀 #ea580c/#f97316/#fb923c/#fdba74。按刻面与假想光源的夹角挑选每个面的色号 —— 色相就是光照。控件做成刻面宝石:clip-path 六边形,加伪元素三角形做亮部/暗部平涂面;border-radius 为 0。字体:几何无衬线(system-ui 即可)12–14px,颜色 #f5f3ff。纵深来自刻面之间的色阶差,而不是阴影 —— 刻面上不要投影、不要贴图、不要平滑渐变、不要圆润团块。动效:至多缓慢的刚性漂移,prefers-reduced-motion 下关闭。不要做成等距 3D:区别在于带逐面光照的不规则三角形网格,而不是 30° 网格上的矩形方块。

Accessibility & misuse可访问性与误用

Faceted multicolor backgrounds make text contrast unpredictable — one word can span teal, violet, and coral in a single line. Keep functional text off the mesh on a solid panel, or verify 4.5:1 against the darkest facet it can touch.

刻面多色背景让文字对比度不可预测 —— 一行词可能同时跨过青、紫、珊瑚橙。功能文字要放在网格之外的纯色面板上,或对着它可能碰到的最深刻面验证 4.5:1。

The busy facet pattern raises visual noise and can strain readers with attention or vision difficulties; lower the triangle density behind content, enlarge facets near text, and never animate the mesh behind reading areas.

繁忙的刻面图案抬高视觉噪音,对注意力或视力有困难的读者是种负担;内容后方降低三角形密度,文字附近的刻面放大,阅读区域后面永远不要动。

Slow rotations and parallax drifts are decorative but still vestibular triggers — honor prefers-reduced-motion, and never encode state (loading, playing, progress) in motion alone.

缓慢旋转和视差漂移虽是装饰,仍是前庭触发源 —— 响应 prefers-reduced-motion,且永远别只用动效来编码状态(加载中、播放中、进度)。

Origin起源

The constraint came first: 1990s real-time 3D hardware could only push so many polygons, so early 3D games wore their facets openly — Sega's Virtua Fighter (1993) and Nintendo and Argonaut's Star Fox (1993) ran on flat-shaded polygon models, and the original PlayStation (1994) made the look a generation's default. Once GPUs made smooth shading cheap, low-poly flipped from limitation to choice: 2010s indie games such as Kentucky Route Zero (2013) and Superhot (2016) used it as deliberate art direction, while a parallel 'poly art' illustration wave — faceted animals, mountain wallpapers, album covers — spread through design communities in the same years.

约束在先:1990 年代的实时 3D 硬件只能推那么多多边形,所以早期 3D 游戏把刻面露在外面 —— 世嘉的《Virtua Fighter》(1993)和任天堂与 Argonaut 的《Star Fox》(1993)都跑在平涂着色的多边形模型上,初代 PlayStation(1994)更让这种样子成为一代人的默认。等 GPU 让平滑着色变得便宜,低多边形就从限制翻转成了选择:2010 年代的独立游戏如《Kentucky Route Zero》(2013)和《Superhot》(2016)把它当作主动的美术方向,与此同时一股并行的「poly art」插画浪潮 —— 刻面动物、山峦壁纸、专辑封面 —— 也在同几年传遍设计社区。

See also相关词条