Использование JavaScript в Verge3D-приложениях

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

Первый способ (простой)

Самый простой способ включить JavaScript-код в ваши пазлы — использовать специальный пазл под названием exec script. Он имеет встроенный полнофункциональный текстовый редактор с возможностью синтаксической подсветки, проверки синтаксиса, сворачивания кода и множеством других функций.

Этот пазл выполняет фрагмент кода на языке JavaScript непосредственно. Преимущества использования "exec script" следующие:

это подход, основанный только на пазлах (нет необходимости редактировать исходный код проекта);
такие фрагменты кода можно сохранить в библиотеке пазлов и легко использовать повторно в других проектах.

Для того чтобы получить доступ к пазлам переменных и процедур изнутри "exec script" вы можете использовать встроенные модули VARS и PROC. Более подробную информацию можно найти в документации на пазл exec script.

Например, настройка следующего пазла с использованием "exec script" заставляет объекты сцены менять свой материал по щелчку мыши:

Второй способ (типовой)

Если вы хотите иметь больший контроль, чем тот, который может предложить пазл "exec script", тогда этот метод для вас. Он предполагает использование стандартного шаблона приложения Standard (Standard Light или Standard Dark):

Предположим, вы создали свое приложение с помощью диспетчера приложений (с параметрами по умолчанию), и назвали его my_awesome_app. Переходите в папку приложений, затем в папку my_awesome_app, и откройте JavaScript-файл my_awesome_app.js в текстовом редакторе.

Вы можете использовать любой текстовый редактор для добавления кода JavaScript, но удобнее работать, если ваш редактор поддерживает подсветку синтаксиса и нумерацию строк, как «Ноутпад++» или «Вижуал Студио Код».

Найдите "runCode" — это место в файле должно выглядеть примерно так:


    function runCode(app) {
        // добавьте сюда свой код, например console.log('Привет, мир!');

    }

Вы можете добавить некоторый код между фигурными скобками, и тогда получится:


    function runCode(app) {
        // добавьте сюда свой код, например console.log('Привет, мир!');
        console.log('Это мой новый код!');
    }

Теперь, если вы сохраните .js-файл и запустите свое приложение, вы заметите... ничего, пока не откроете консоль браузера. Она обычно открывается клавишей F12 (Chrome, Firefox в ОС Windows/Linux). На macOS используйте меню View → Developer → JavaScript Console (⌥-⌘-J) в Chrome или меню Develop → Show Error Console (⌥-⌘-C) в Safari.

С помощью кода вы можете изменить что-то в сцене, например, переместить дефолтный куб Verge3D (имеет название "Cube" в Blender", "Box001" в 3ds Max и "pCube1" в Maya)...


    function runCode(app) {
        const obj = app.scene.getObjectByName('Cube');
        obj.position.x = 2;
    }

...или создать новый материал:


    function runCode(app) {
        const obj = app.scene.getObjectByName('Cube');
        obj.material = new v3d.MeshPhongMaterial({ color: '#00BB00', emissive: '#550000' });
    }

Для получения подробной информации об использовании JavaScript в Verge3D-приложениях обратитесь к справочнику разработчика.

Третий способ (компактный)

Этот метод подойдет опытным программистам, которые хотят иметь дело с минимальным набором кода. Подход идентичен предыдущему, за исключением того, что используется другой шаблон приложения под названием Code-Based:

Это приведет к упрощению структуры проекта, при этом редактор пазлов не будет прикреплен к вашему приложению, а .js-файл приложения будет содержать всего несколько строк кода:


    'use strict';

    const CONTAINER_ID = 'v3d-container';
    const SCENE_URL = 'template.gltf';

    const preloader = new v3d.SimplePreloader({ container: CONTAINER_ID });
    const app = new v3d.App(CONTAINER_ID, null, preloader);

    app.loadScene(SCENE_URL, () => {
        app.enableControls();
        app.run();
        runCode();
    });

    function runCode() {
        // добавьте сюда свой код, например console.log('Привет, мир!');

    }

Приложения такого типа очень просты, но при этом они способны загружать сцену в формате .gltf (с прелоадером) и предоставлять пользователю стандартные средства управления камерой.

Вы можете продолжить, добавив свой код внутри функции "runCode", как описано в Методе №2. Конечно, вы можете полностью изменить этот шаблон приложения — например, отказаться от класса App, загрузить сцену с помощью другого формата файла или настроить элементы управления каким-то особым образом.

Четвёртый способ (самый продвинутый)

Этот метод подойдет программистам, знакомым с библиотекой «Три-Джей-Эс», поскольку в Verge3D вы можете использовать похожий API.

Скопируйте файл v3d.js из папки build дистрибутива, свяжите его с файлом .html и начинайте кодить!

Взаимодействие с пазлами

Кроме exec script, Verge3D предоставляет следующие возможности взаимодействия между пазлами и JavaScript:

Вызов JavaScript-процедур из пазлов: Специально объявленные JavaScript-процедуры могут быть вызваны пазлами с помощью блока call external function.
Вызов процедур, объявленных в пазлах из JavaScript: Любая процедура, объявленная в пазлах, может быть вызвана с помощью JavaScript с использованием пространства имён puzzles. Читайте тут для получения дополнительной информации.
Обмен сообщениями: Этот подход используется в случае, когда пазлы и JavaScript выполняются на разных хостах. Чтобы отправить сообщение из пазлов в JavaScript используйте пазл call method / postMessage. Чтобы получать сообщения, отправленные JavaScript, зарегистрируйте обработчик события "message" на объекте window с использованием пазла on event of.

Вдохновляйтесь пазлами

Это не метод, а скорее совет. Каждый раз, когда вы нажимаете кнопку сохранения в редакторе пазлов, он создаёт самодостаточный и читаемый модуль на «Ява Скрипте» в файле visual_logic.js в папке вашего приложения.

Таким образом, вы можете получить рабочий пример того, как работают определенные методы JavaScript API, и повторно использовать сгенерированный код для интересующего вас пазла в собственном проекте.

Остались вопросы?

Задайте их на нашем форуме!