https://github.com/user-attachments/assets/f4a5ce75-711e-42af-8383-1fe7f3b1fdd6

KGEngine

3D движок на базе THREE.js - пиши меньше, создавай больше.

О чём это

KGEngine - это удобная надстройка над Three.js. Он избавляет от необходимости писать десятки строк кода для простых действий, предоставляет готовые сниппеты и добавляет мощные возможности вроде встраивания HTML/CSS прямо в WebGL-сцену. Движок создавался для себя, чтобы ускорить разработку, но теперь доступен всем.

Возможности

• Упрощённый API - создавайте сцены, модели, источники света и камеры буквально в пару строк.
• Готовые компоненты - сниппеты для самых частых задач: куб, сфера, модель, текстура, шейдер.
• CSS3 в WebGL - размещайте настоящие HTML-элементы внутри 3D-пространства. Работает везде, даже там, где считалось невозможным (например, в Angular).
• Шейдеры и анимации - подключайте кастомные шейдеры без боли, управляйте анимациями.
• Гибкая система импортов - импортируйте только нужные модули, не тащите всё подряд.

Как всё устроено

ООП-подход делает работу интуитивной: берите объекты, вызывайте методы, не думайте о лишнем. Единственное, что может напугать - объём передаваемых данных. Но API-документация написана так, чтобы вы даже не заметили сложности. Просто открываете и делаете.

Движок / библиотека строится из следующих разделов:

1. Cameras - работа с камерой, вариации камер и прочее
2. Lighting - работа с освещением, вариации света, направления и прочее
3. Objects - готовые объекты, создание сложных одной строкой
   • Geometry - создание геометрии для объекта
   • Materials - создание материала для объекта
   • Snippets - готовые сниппеты, упрощающие жизнь
4. OtherScripts - очень сильный раздел, на нём стоит вся самая сложная механика (уровня созданий моделей), но для вас это одна строка
5. PlayerActions - сниппеты для работы с взаимодействием пользователя и сцены
6. Shaders - ещё один очень сильный блок, на нём строится вся концепция работы Object3D + CSS3 (HTML + 3D)
   • Snippets - сниппеты, в которые лучше не лезть. Они нужны для общей работы по меньшей мере трёх разных инструментов
   • Tools - инструменты для удобства работы с шейдингом и прочим
7. VisualEngineConfigs - важный раздел, в котором описаны визуальные движки с готовой настройкой

Установка

Чтобы установить и начать работу, вам потребуется определиться, на каком фреймворке вы будете работать. Все подсказки и туториалы актуальны для React / NextJS приложений, хотя на других языках всё почти один в один.

Установка всех зависимостей:

npm i
npm i kgengine
npm install --save-dev @types/three

Код для начала работы:

import Cameras from "kgengine/cameras";
import OtherScripts from "kgengine/otherScripts";
import Engine from "kgengine/engine";

const scene = new OtherScripts.CreateScene();
// Сцена нужна для отображения наших моделей, куда в дальнейшем мы будем их передавать после создания

const camera = Cameras.DefaultCameraSettings();
// Камера нужна для просмотра сцены, управления пользователем и всё в этом духе

const renderer = Engine.WebGLEngine();
// Визуальный движок, он нужен для настройки рендера сцены, WebGL нужен в 99.9% случаев с готовой настройкой

document.body.appendChild(renderer.domElement);
// Добавляем рендеринг на сайт

const animate = () => {
  // Функция, которая обновляется каждые 1/1000 секунды, по умолчанию просто обновляем сцену
  renderer.render(scene.scene, camera);
  requestAnimationFrame(animate);
};

animate();

Как вы уже заметили, всё описано в виде объектов, которые имеют ключи-вариации. Вся логика и код будет строиться именно так, функции и шейдеры - исключение.

Перед началом рекомендую изучить THREE.js, так как суть почти одна. Но работая с моим движком, вы освоите 80% того, что было бы сложнее изучать самостоятельно. Удачи!

Картинки

Все изображения, которые вы увидели на этой странице, - прямая иллюстрация работы движка: HTML-объекты в 3D среде, даже во время анимаций и движения камеры! HTML-элемент описан как экран монитора в моих старых проектах :)

Ссылки

• NPM - https://www.npmjs.com/package/kgengine
• GitHub - https://github.com/KANTNOLI/kgengine
• Документация (Wiki) - https://wiki.kantnoli.wtf/wiki?s=1&p=0
• Идеи и вопросы - Telegram @KANTNOLI

Права и использование

KGEngine
© 2026 KANTNOLI Production.

Все материалы являются интеллектуальной собственностью KANTNOLI Production. Код распространяется под лицензией GNU General Public License v3.0 (GPLv3). Это означает, что вы можете свободно использовать, изменять и распространять код, но обязаны сохранять авторство и открывать под той же лицензией любые производные работы.

Полный текст лицензии

© 2026 KANTNOLI Production. GNU General Public License v3.0