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

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

Вы можете использовать любой текстовый редактор для добавления кода JavaScript, но удобнее работать, если ваш редактор поддерживает подсветку синтаксиса и нумерацию строк, как Notepad++ или VS Code.

Метод #1 (Basic)

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

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

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

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

Метод #2 (Standard)

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

Предположим, вы создали свое приложение с помощью App Manager (с параметрами по умолчанию), и назвали его my_awesome_app. Переходите в папку verge3d/applications, затем в папку my_awesome_app , и откройте файл JavaScript 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 (Chrome, Firefox в Windows, Linux). На Mac используйте меню View > Developer > JavaScript Console (Option-Cmd-J) в Chrome или меню Develop > Show Error Console (Option-Cmd-C) в Safari.

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

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

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

Метод #3 (Compact)

Этот метод подойдет опытным программистам, которые хотели бы иметь минимальный рабочий фрагмент кода для начала. Это практически то же самое как и 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 (Hardcore)

Этот метод подойдет программистам, знакомым с библиотекой Three.js, поскольку в Verge3D вы можете использовать тот же API.

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

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

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

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

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

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