Первый запуск: минимальное приложение на SDK

Для того чтобы начать работу с библиотекой PlayCanvas, необходимо выполнить несколько шагов для подготовки среды разработки. PlayCanvas представляет собой мощный фреймворк для создания 3D-игр и интерактивных приложений, работающих в браузере. Он использует JavaScript и WebGL для рендеринга 3D-графики и взаимодействия с пользователем.

Перед началом работы потребуется:

  1. Установить последние версии браузера, поддерживающего WebGL.
  2. Скачать и установить редактор PlayCanvas или создать аккаунт на официальной платформе PlayCanvas (https://playcanvas.com), что даст возможность работать через веб-интерфейс.
  3. Для локальной разработки понадобится сервер для запуска приложений, так как PlayCanvas использует WebGL, а браузеры требуют, чтобы ресурсы загружались через HTTP или HTTPS.

Структура проекта PlayCanvas

Проект в PlayCanvas обычно состоит из нескольких базовых элементов:

  • HTML-файл — это основа, в которой подключаются все необходимые скрипты, включая саму библиотеку PlayCanvas.
  • JavaScript-файлы — код приложения, включая создание объектов, их анимацию и взаимодействие.
  • Ресурсы — текстуры, модели, звуки и другие файлы, используемые для построения сцены.

Минимальная структура папок

/my-playcanvas-app
  /assets       # Все ресурсы (текстуры, модели и т.д.)
  /scripts      # Скрипты JavaScript
  index.html    # Главный HTML файл
  engine.js     # Библиотека PlayCanvas

Создание минимального приложения

Чтобы создать минимальное приложение на PlayCanvas, достаточно выполнить несколько шагов. Рассмотрим пример простого 3D-приложения, которое будет отображать вращающийся куб на веб-странице.

1. Создание HTML файла

Главный файл проекта — это index.html. В нем необходимо подключить саму библиотеку PlayCanvas и создать канвас, на котором будет отображаться сцена.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Минимальное приложение PlayCanvas</title>
</head>
<body>
    <canvas id="application"></canvas>
    <script src="engine.js"></script>
    <script src="app.js"></script>
</body>
</html>

Здесь <canvas id="application"></canvas> — это HTML-элемент, на котором будет отображаться сцена, а подключение файлов engine.js и app.js — это подключение библиотеки PlayCanvas и вашего кода.

2. Создание основного JavaScript файла

Теперь создадим основной JavaScript файл app.js, в котором будет описана логика сцены. В этом файле создадим сцену, камеру и свет, а также объект (куб), который будет вращаться.

// Инициализация приложения PlayCanvas
var canvas = document.getElementById('application');
var app = new pc.Application(canvas, {
    mouse: new pc.Mouse(canvas),
    touch: new pc.TouchDevice(canvas),
    graphicsDeviceOptions: {
        alpha: true
    }
});
app.start();

// Устанавливаем размеры канваса
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Создаем камеру
var camera = new pc.Entity();
camera.addComponent('camera', {
    clearColor: new pc.Color(0.1, 0.1, 0.1)
});
camera.setPosition(0, 0, 3);
app.root.addChild(camera);

// Создаем источник света
var light = new pc.Entity();
light.addComponent('light');
light.setPosition(2, 2, 2);
app.root.addChild(light);

// Создаем куб
var cube = new pc.Entity();
cube.addComponent('model', {
    type: 'box'
});
app.root.addChild(cube);

// Анимация куба
app.on('update', function (dt) {
    cube.rotate(10 * dt, 20 * dt, 30 * dt);
});

Подробное объяснение кода

  1. Инициализация приложения:

    var canvas = document.getElementById('application');
var app = new pc.Application(canvas, {
    mouse: new pc.Mouse(canvas),
    touch: new pc.TouchDevice(canvas),
    graphicsDeviceOptions: {
        alpha: true
    }
});
app.start();

    Здесь создается объект pc.Application, который инициализирует игровое приложение на канвасе. Важным моментом является указание опций для работы с мышью и сенсорным экраном (например, для мобильных устройств). Метод app.start() запускает приложение.

  2. Настройка размеров канваса:

    canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

    Мы устанавливаем размеры канваса равными ширине и высоте окна браузера.

  3. Добавление камеры:

    var camera = new pc.Entity();
camera.addComponent('camera', {
    clearColor: new pc.Color(0.1, 0.1, 0.1)
});
camera.setPosition(0, 0, 3);
app.root.addChild(camera);

    Камера отвечает за видимость объектов на сцене. Ее позиция установлена таким образом, чтобы она находилась перед кубом. Опция clearColor устанавливает цвет фона сцены (в данном случае темно-серый).

  4. Добавление источника света:

    var light = new pc.Entity();
light.addComponent('light');
light.setPosition(2, 2, 2);
app.root.addChild(light);

    Свет необходим для того, чтобы объекты на сцене были видимы. Мы создаем точечный источник света, который находится в правом верхнем углу сцены.

  5. Создание и анимация куба:

    var cube = new pc.Entity();
cube.addComponent('model', {
    type: 'box'
});
app.root.addChild(cube);

app.on('update', function (dt) {
    cube.rotate(10 * dt, 20 * dt, 30 * dt);
});

    Создается 3D-объект (куб), который добавляется в сцену. В методе update происходит его вращение по всем трем осям, что создаёт эффект анимации.

Итоговый результат

При открытии index.html в браузере на канвасе будет отображаться вращающийся куб, освещенный источником света. Камера будет наблюдать за сценой из позиции (0, 0, 3).

Заключение

Это минимальное приложение позволяет быстро познакомиться с основами работы с PlayCanvas, включая создание сцены, камеры, освещения и простых объектов. Несмотря на свою простоту, оно уже может быть расширено и адаптировано под более сложные задачи, такие как создание игр, виртуальных туров или интерактивных приложений.

Оглавление