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

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

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

Метод №1 (простой)

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

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

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

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

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

Метод №2 (типовой)

Если вы хотите иметь больший контроль, чем тот, который может предложить пазл "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('Hello, World!');

}

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


function runCode(app) {
        // add your code here, e.g. console.log('Hello, World!');
        console.log('Just added some JavaScript!');
}

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

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


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

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


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

Посмотрите примеры кода «Вердж3Д», чтобы вдохновиться. Нажмите кнопку View source, чтобы открыть код.

Метод №3 (компактный)

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

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


'use strict';

window.addEventListener('load', function() {

var app = new v3d.App('container', null,
        new v3d.SimplePreloader({ container: 'container' }));

var url = 'my_awesome_app.gltf';

app.load(url, function() {
        app.enableControls();
        runCode();
});

function runCode() {
        // add your code here, e.g. console.log('Hello, World!');

}

});

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

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

Метод №4 (продвинутый)

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

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

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

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

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

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

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