Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (kgengine) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

KGE3

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-документация написана так, чтобы вы даже не заметили сложности. Просто открываете и делаете.

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

Cameras - работа с камерой, вариации камер и прочее
Lighting - работа с освещением, вариации света, направления и прочее
Objects - готовые объекты, создание сложных одной строкой
- Geometry - создание геометрии для объекта
- Materials - создание материала для объекта
- Snippets - готовые сниппеты, упрощающие жизнь
OtherScripts - очень сильный раздел, на нём стоит вся самая сложная механика (уровня созданий моделей), но для вас это одна строка
PlayerActions - сниппеты для работы с взаимодействием пользователя и сцены
Shaders - ещё один очень сильный блок, на нём строится вся концепция работы Object3D + CSS3 (HTML + 3D)
- Snippets - сниппеты, в которые лучше не лезть. Они нужны для общей работы по меньшей мере трёх разных инструментов
- Tools - инструменты для удобства работы с шейдингом и прочим
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% того, что было бы сложнее изучать самостоятельно. Удачи!

Картинки

petp4

petp2

petp5

Все изображения, которые вы увидели на этой странице, - прямая иллюстрация работы движка: 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

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

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

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