Настройка проекта с TypeScript

Для того чтобы использовать Babylon.js с TypeScript, необходимо выполнить несколько шагов по настройке проекта. Это включает в себя создание самого проекта, настройку TypeScript и интеграцию с Babylon.js. В данном разделе подробно описан процесс подготовки среды для работы с этой библиотекой.

1. Инициализация проекта

Для начала создаётся новый проект. Это можно сделать с помощью команды npm:

mkdir my-babylon-project
cd my-babylon-project
npm init -y

Это создаст начальную структуру проекта с файлом package.json, в котором будет указана информация о проекте и его зависимостях.

2. Установка необходимых пакетов

Для работы с Babylon.js и TypeScript необходимо установить несколько пакетов, включая сам Babylon.js, TypeScript и другие утилиты для разработки.

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

npm install babylonjs
npm install --save-dev typescript @types/node
  • babylonjs — это основная библиотека для работы с 3D-графикой.
  • typescript — компилятор TypeScript, который преобразует код в JavaScript.
  • @types/node — типы для Node.js, которые могут понадобиться в процессе работы.

3. Конфигурация TypeScript

После установки TypeScript необходимо настроить файл конфигурации tsconfig.json, который определяет параметры компиляции. Для этого создайте файл tsconfig.json в корне проекта:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Основные настройки:

  • "target": "ES6" — указывает, что компиляция будет производиться в JavaScript стандарта ECMAScript 6.
  • "module": "ESNext" — использует систему модулей ECMAScript.
  • "strict": true — включает строгий режим компиляции, который помогает избежать большинства ошибок.
  • "outDir": "./dist" — все скомпилированные файлы будут сохраняться в директорию dist.
  • "sourceMap": true — создаёт карты исходного кода для удобства отладки.

4. Структура проекта

Рекомендуемая структура проекта выглядит следующим образом:

my-babylon-project/
│
├── src/                # Исходные файлы TypeScript
│   └── index.ts        # Основной файл проекта
│
├── dist/               # Скомпилированные файлы JavaScript
│
├── node_modules/       # Зависимости проекта
│
├── package.json        # Конфигурация npm
└── tsconfig.json       # Конфигурация TypeScript

Исходные файлы TypeScript должны располагаться в папке src. Все скомпилированные JavaScript файлы и файлы карты исходного кода будут сохраняться в папке dist.

5. Создание первого TypeScript файла

После настройки всех инструментов, можно приступать к созданию первого файла с кодом. Создайте файл src/index.ts и добавьте в него следующий код:

import { Engine, Scene, ArcRotateCamera, HemisphericLight, MeshBuilder } from 'babylonjs';

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const engine = new Engine(canvas, true);
const scene = new Scene(engine);

const camera = new ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 4, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

const light = new HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
light.intensity = 0.7;

const sphere = MeshBuilder.CreateSphere("sphere1", { diameter: 2 }, scene);

engine.runRenderLoop(() => {
  scene.render();
});

window.addEventListener('resize', () => {
  engine.resize();
});

Этот код создаёт сцену, добавляет камеру и освещение, а также отображает простую сферу. Engine управляет рендерингом, а Scene — объектами, которые будут отображаться.

6. Сборка и запуск проекта

Чтобы собрать проект, нужно выполнить команду:

npx tsc

Эта команда компилирует TypeScript код в JavaScript. После компиляции все сгенерированные файлы будут находиться в папке dist.

Для того чтобы запустить проект в браузере, можно использовать простой сервер, например, через http-server:

npm install --save-dev http-server
npx http-server ./dist

Это создаст локальный сервер, и проект будет доступен по адресу http://localhost:8080.

7. Использование типов для Babylon.js

Важным аспектом работы с TypeScript является поддержка типов. Babylon.js включает в себя собственные типы для всех своих объектов, таких как сцены, камеры, свет, и прочее. Когда TypeScript компилирует код, он проверяет типы объектов и сообщает о возможных ошибках.

Для использования типов Babylon.js достаточно импортировать их из библиотеки, как это было показано в примере с импортом Engine, Scene, ArcRotateCamera и т.д.

8. Автоматическая сборка

Для удобства разработки можно настроить автоматическую сборку проекта при изменении исходных файлов. Для этого добавьте в package.json следующий скрипт:

"scripts": {
  "build": "tsc",
  "start": "http-server ./dist",
  "dev": "tsc --watch"
}

Теперь можно запускать команду npm run dev, и TypeScript будет автоматически пересобирать проект при каждом изменении в файлах.

9. Дополнительные инструменты

Для более удобной работы с Babylon.js и TypeScript можно использовать различные инструменты и плагины, такие как:

  • Babylon.js Editor — визуальный редактор для создания сцен и объектов.
  • ESLint — для проверки качества кода.
  • Prettier — для автоформатирования кода.

Эти инструменты помогут ускорить процесс разработки и улучшат качество кода.

10. Поддержка и обновления

Babylon.js активно развивается, и для того чтобы использовать новейшие возможности библиотеки, следует регулярно обновлять зависимости. Для этого используйте команду:

npm update babylonjs

Это позволит вам оставаться в курсе последних изменений и оптимизаций в библиотеке.

Оглавление