Использование Ява Скрипта в Вердж3Д-приложениях

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

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

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

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

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

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

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

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

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

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

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

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


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

    }

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


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

Теперь, если вы сохраните .js-файл и запустите свое приложение, вы заметите... ничего, пока не откроете консоль браузера. Она обычно открывается клавишей F12 («Хром», «Файрфокс» в ОС «Виндоус»/«Линукс»). На «Мак ОС» используйте меню View → Developer → JavaScript Console (⌥-⌘-J) в «Хроме» или меню Develop → Show Error Console (⌥-⌘-C) в «Сафари».

С помощью кода вы можете изменить что-то в сцене, например, переместить дефолтный куб «Вердж3Д» (имеет название "Cube" в «Блендере»", "Box001" в «3дс Максе» и "pCube1" в «Майе»)...


    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' });
    }

Для получения подробной информации об использовании «Ява Скрипта» в «Вердж3Д»-приложениях обратитесь к справочнику разработчика.

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

Этот метод подойдет опытным программистам, которые хотят иметь дело с минимальным набором кода. Подход идентичен предыдущему, за исключением того, что используется другой шаблон приложения под названием 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, загрузить сцену с помощью другого формата файла или настроить элементы управления каким-то особым образом.

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

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

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

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

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

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

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

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