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

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

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

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

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

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

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

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

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

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

Предположим, вы создали свое приложение с помощью App Manager (с параметрами по умолчанию), и назвали его 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 (Option-Cmd-J) в «Хроме» или меню Develop → Show Error Console (Option-Cmd-C) в «Сафари».

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


    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Д», чтобы вдохновиться. Нажмите кнопку View source, чтобы открыть код.

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

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

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

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

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

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

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

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