Подключение библиотеки через CDN и npm

Для начала работы с PlayCanvas можно использовать CDN (Content Delivery Network). Этот способ подходит, если требуется быстро настроить проект без необходимости скачивать библиотеку и устанавливать её локально.

  1. Подключение через ссылку на CDN Для подключения PlayCanvas через CDN достаточно вставить одну строку в раздел <head> HTML-документа. На данный момент последняя версия PlayCanvas доступна через CDN:

    <script src="https://code.playcanvas.com/playcanvas-stable.min.js"></script>

    Этот скрипт загрузит библиотеку PlayCanvas, после чего можно начать использование её возможностей для создания 3D-приложений.

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

    <html>
<head>
  <script src="https://code.playcanvas.com/playcanvas-stable.min.js"></script>
</head>
<body>
  <canvas id="application"></canvas>
  <script>
    var app = new pc.Application('application', {
      mouse: new pc.Mouse(document.body),
      touch: new pc.TouchDevice(document.body),
    });
    app.start();
  </script>
</body>
</html>

    В этом примере создается новый экземпляр приложения, которое будет отрисовывать на холсте (<canvas>). Здесь важно, чтобы скрипт загрузился до вызова кода на JavaScript.

  3. Преимущества использования CDN

    • Простота: подключение всего одной строки.
    • Обновления: библиотека всегда будет актуальной, так как загружается с сервера PlayCanvas.
    • Производительность: CDN может значительно ускорить загрузку, особенно если файл уже был загружен в браузере с другого сайта, использующего тот же CDN.

  4. Недостатки использования CDN

    • Зависимость от внешнего ресурса: если сервер CDN по какой-либо причине становится недоступным, библиотека не будет загружена.
    • Контроль над версией: при использовании CDN всегда загружается последняя версия библиотеки, что может привести к несовместимости с вашим проектом в случае изменений в API.

Подключение библиотеки PlayCanvas через npm

Если проект требует более гибкого подхода, например, для использования PlayCanvas в составе более сложного веб-приложения с системой сборки, можно подключить библиотеку через npm.

  1. Установка PlayCanvas через npm Для начала нужно установить PlayCanvas в проект. Для этого необходимо инициализировать проект с помощью npm, если он ещё не инициализирован:

    npm init -y

    Затем установить PlayCanvas:

    npm install playcanvas

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

  2. Использование PlayCanvas в проекте После установки библиотеки можно использовать её в проекте. Например, если проект настроен с помощью сборщика модулей, такого как Webpack или Browserify, подключение будет следующим образом:

    import * as pc from 'playcanvas';

const app = new pc.Application(document.getElementById('application'), {
  mouse: new pc.Mouse(document.body),
  touch: new pc.TouchDevice(document.body),
});
app.start();

    В данном примере используется стандартный импорт для работы с PlayCanvas. Он позволяет использовать только необходимые части библиотеки, что может помочь уменьшить размер финального бандла при сборке.

  3. Настройка сборщика Чтобы проект корректно собирался, необходимо настроить соответствующий сборщик. Например, для Webpack потребуется добавить следующий конфиг:

    module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

    Этот конфиг обеспечит корректную работу с ES-модулями и компиляцию с использованием Babel.

  4. Преимущества использования npm

    • Контроль над версией: позволяет использовать любую нужную версию библиотеки, что даёт больше контроля над зависимостями.
    • Модульность: можно подключать только необходимые части библиотеки, что оптимизирует размер проекта.
    • Совместимость с инструментами сборки: при использовании сборщиков, таких как Webpack или Rollup, возможно более гибкое управление зависимостями и кодом.

  5. Недостатки использования npm

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

Выводы

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

Оглавление