Low-poly 3D-моделі для three.js

3D-моделі в стилі Low-poly для three.js

Усі 42 моделі постачаються у GLB з готовими рівнями LOD0–LOD3: завантажуєте їх через GLTFLoader із three/addons і передаєте рівні в THREE.LOD методом lod.addLevel(mesh, distance) — деталізація перемикається щокадру за відстанню до камери. Листя тут суцільна геометрія, а не альфа-карти, тож немає ні alpha test, ні прозорого overdraw: дуб, сосна, береза й бамбук лишаються дешевими навіть на мобільних GPU.

Колір зберігається у вершинних кольорах (COLOR_0), тому один спільний матеріал покриває всі дерева, кактуси й каміння у сцені, а InstancedMesh малює тисячі копій за один виклик. Інстанси групуйте за чанками, бо THREE.LOD не працює на рівні інстансу. Бюджет — від кількох сотень до пари тисяч трикутників на LOD0. Невидима колізійна сітка під'єднується до Rapier або cannon-es; усе працює і з WebGLRenderer, і з WebGPURenderer.

Про стиль Low-poly

Low-poly — найдешевший стиль і в рендері, і за розміром білда.

Пласке затінення: одна нормаль на грань дає чіткі грані, карти нормалей не потрібні.
Колір зберігається у вершинах (glTF COLOR_0): немає текстур, немає роботи з UV, майже не витрачається відеопам’ять.
Листя — суцільна геометрія, а не картки з альфою: немає alpha-test і прозорого overdraw, що важливо для мобільних GPU.
Один матеріал можна використати для всіх моделей сцени, тож дерева легко батчаться та інстансяться.
Типовий бюджет LOD0 — від кількох сотень до кількох тисяч трикутників.

Підходить для мобільних ігор, WebGL/WebGPU, VR, стратегій, містобудівних і стилізованих інді-ігор. У рушії використовуйте матеріал, що враховує колір вершин.

Використання в three.js

У three.js завантажуйте GLB через GLTFLoader з three/addons; DRACOLoader або KTX2Loader потрібні, лише якщо файл використовує ці розширення.

LOD за відстанню: THREE.LOD і lod.addLevel(mesh, distance) для LOD0–LOD3; рівні перемикаються за відстанню до камери щокадру.
Ліси: InstancedMesh малює тисячі копій за один draw call, а BatchedMesh дає змогу змішувати кілька варіацій дерев. THREE.LOD не працює на рівні окремих інстансів, тож групуйте інстанси за LOD для кожного чанка самі.
Листя: alphaMode MASK з glTF перетворюється на material.alphaTest, а двобічні матеріали автоматично отримують side: THREE.DoubleSide.
Меш колізії: зробіть невидимим і передайте у фізичну бібліотеку, наприклад Rapier або cannon-es.