Создайте виртуальную реальность в виртуальной реальности с помощью Primrose и WebVR

Наша сцена изменится в режиме реального времени, и теперь в ней будут случайно перемещаться 100 блоков!

Если вы хотите лучше взглянуть на него с разных сторон, вы можете посмотреть на пол и щелкнуть туда, куда вы хотите перейти:

Вы также можете использовать клавиатуру для перемещения по сцене, используя клавиши со стрелками.

Как это устроено

В большинстве случаев вам не нужно будет перестраивать большую часть примера редактора живого кода Primrose — просто подключите пример кода, который они предоставляют на GitHub, и адаптируйте его к своей собственной сцене. Тем не менее, я подумал, что предоставлю упрощенную версию, чтобы исследовать некоторые из концепций того, что происходит за кулисами, показывая при этом некоторые возможности, которые Primrose способен выполнять в своих рамках.

Запуск нашего приложения Primrose выглядит так:

 var BRICK = "images/brick.png", GROUND = "images/deck.png", SKY = "images/bg2.jpg", app = new Primrose.BrowserEnvironment("Our Simplified 3D Editor", { skyTexture: SKY, groundTexture: GROUND }), 

Эти строки кода определяют наши три файла текстуры, а затем создают наше приложение Primrose внутри переменной app . Метод Primrose.BrowserEnvironment() устанавливает нашу сцену с текстурами неба и земли.

У нас также есть переменная editorFrame которая устанавливает область 2048 на 2048 для нашего редактора, который будет помещен внутри:

 editorFrame = new Primrose.Surface({ bounds: new Primrose.Text.Rectangle(0, 0, 2048, 2048) }); 

Другим общим аспектом всех приложений Primrose (и многих других JavaScript-фреймворков в этом отношении) является инициализация наших элементов в addEventListener("ready", function() {}); , Здесь мы добавляем:

• subScene — Что мы сможем добавить и изменить элементы внутри нашего редактора кода.
• editor — наш живой редактор кода на нашей сцене (мы рассмотрим это чуть более подробно ниже!) .
• Исходный код из getSourceCode() — в моей упрощенной версии он получает бит по умолчанию, который поставляется с редактором Primrose и отображается в нашем текстовом редакторе VR. В гораздо более сложном редакторе Primrose он может сделать немного больше с локальным хранилищем.

 app.addEventListener("ready", function() { app.scene.add(subScene); editor = new Primrose.Text.Controls.TextBox({ bounds: new Primrose.Text.Rectangle( 0, 0, editorFrame.surfaceWidth, Math.floor(editorFrame.surfaceHeight) ), tokenizer: Primrose.Text.Grammars.JavaScript, value: getSourceCode(isInIFrame), fontSize: 45 }); editorFrame.appendChild(editor); }); 

Primrose недавно выпустила новую версию, в которой редактор был обновлен с помощью ряда новых объектов инфраструктуры в Primrose.Text :

• Primrose.Text.Controls.TextBox — устанавливает текстовую область и по умолчанию предоставляет весь спектр функций.
• Primrose.Text.Rectangle — это позволяет нам определить прямоугольную границу для текстовой области, которая будет размещена внутри. Возможно, вы заметили это, когда мы определили наш editorFrame .
• Primrose.Text.Grammars.JavaScript — используется в ключе tokenizer для настройки подсветки кода JavaScript. Вы можете сделать подсветку открытого текста через Primrose.Text.Grammars.PlainText .

При работе с приложениями Primrose есть несколько событий за пределами "ready" которые вы можете обратить внимание, в том числе:

• "update" — это единственное другое событие, которое мы используем в примере кода редактора, оно запускается каждый кадр. Вы используете это в Primrose для запуска анимации и проверки обновлений в сцене.
• "keydown" , "keyup" и "keypress" — запускается, когда клавиша нажата, отпущена, нажата и отпущена соответственно.
• "mousedown" и "mouseup" — то же, что и выше, но с помощью мыши.
• "mousemove" — обнаруживает движения мыши.
• "wheel" — определяет, когда пользователь перемещает колесо прокрутки мыши.
• "touchstart" , "touchend" и "touchmove" — обнаруживает, когда палец касается элемента в сцене с помощью сенсорного экрана, отрывает палец от экрана и соответственно проводит пальцем по экрану.
• "unload" — запускается, когда приложение закрывается. Моя упрощенная версия редактора не использует это, однако полный редактор Primrose использует это для сохранения содержимого редактора в локальном хранилище.
• "load" — запускается, когда приложение загружается еще раз.
• "pointerstart" , "pointerend" и "pointermove" — реагирует на события нажатия и прикосновения к объектам, поэтому вам не нужно следить за обоими по отдельности.
• "gazestart" — реагирует на тот момент, когда пользователь смотрит на объект.
• "gazecomplete" — отвечает, когда пользователь смотрит на объект по умолчанию в течение одной секунды.
• "gazecancel" — отвечает, когда пользователь отводит взгляд до истечения одной секунды по умолчанию. Вы можете изменить gazeLength значение по умолчанию через gazeLength но это выходит за рамки этой статьи.

Я не буду вставлять весь упрощенный код в эту статью (он будет довольно длинным и громоздким!). Вы можете проверить это в репозитории GitHub, указанном выше. Тем не менее, мы рассмотрим, что содержат некоторые ответы и функции на события.

 app.setFullScreenButton("goVR", "click", true); app.setFullScreenButton("goRegular", "click", false); 

 put(axis(5,0.1)).on(start); 

 var verts = []; for (var i = 0; i < 5000; ++i) { verts.push( v3(Primrose.Random.number( -0.5 * WIDTH, 0.5 * WIDTH), Primrose.Random.number(-0.5 * HEIGHT, 0.5 * HEIGHT), Primrose.Random.number(-0.5 * DEPTH, 0.5 * DEPTH) ) ); } put(cloud( verts, this.options.backgroundColor, 0.05) ).on(start).at(MIDX, MIDY, MIDZ); 

 start = put(hub()) .on(scene) .at(-MIDX, 0, -DEPTH - 2); 

 put(light(0xffffff, 1, 500)) .on(start) .at(MIDX + 5, 8, MIDZ + 20); 

 put(textured(box(2, 2, 2), BRICK)) .on(start).at(MIDX, MIDY, MIDZ); 

 cylinder( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaEnd ) 

 put(textured(cylinder(1, 1, 4, 40, 40), BRICK)) .on(start).at(MIDX, MIDY, MIDZ);