Когда я начал изучать программирование виртуальной реальности, одной из первых идей было найти интересный способ перенести этот сайт в виртуальную реальность. Как бы выглядел этот сайт, если бы он был физическим пространством, а не серией 2D-страниц?
Я получил приличное количество этого, поэтому я хотел поделиться им с вами. К сожалению, я не могу продвинуться дальше этого прямо сейчас из-за текущих ограничений WebVR, но это хорошее начало!
Перейдите сюда, чтобы посетить Nateliason.com в виртуальной реальности.
Вы также найдете во многих статьях опцию «просмотреть это в VR» в правом верхнем углу. Однако я должен предупредить вас, что некоторые статьи работают намного лучше, чем другие. Кажется, что у длинных есть проблемы. Я работаю над этим. Кроме того, как правило, текст пока не очень хорошо смотрится в виртуальной реальности (в основном проблемы с разрешением), так что… вот что.
Есть еще одно предостережение: обход ссылок пока не работает в WebVR. Это означает, что если вы используете гарнитуру, вы не можете переходить с одной ссылки на другую, оставаясь в виртуальной реальности. Ребята, работающие над A-Frame, говорят, что он скоро появится, но до тех пор вам придется повторно включать просмотр VR на каждой странице.
Хорошо, ЕЩЕ ОДНО предостережение: между браузерами также много различий. И если вы используете iPhone, он будет очень глючным.
По сути, я хочу сказать, что это не отточенный опыт, и до публикации этого блога в виртуальной реальности еще далеко, так что не возлагайте слишком большие надежды и не высмеивайте меня в Твиттере. НО! Все это в стороне, это в основном работает! Через несколько месяцев, когда технология будет развиваться (особенно браузеры), я улучшу ее работу, но для начала это неплохо! Работать над этим было чертовски весело, я многое узнал об A-Frame, Javascript и попутно улучшил свой Rails.
В оставшейся части этого поста я собираюсь немного покопаться в том, как я его создал, чтобы, надеюсь, заинтересовать вас потенциалом WebVR и показать, насколько легко начать создавать свои собственные впечатления от WebVR.
Один вопрос: если вы особенно хорошо разбираетесь в Ruby on Rails или A-Frame и у вас есть какие-либо отзывы о том, как я это сделал, пожалуйста, дайте мне знать на Github. Часть того, почему я делюсь этим, состоит в том, чтобы, надеюсь, получить отзывы о том, как я могу улучшить свое программирование, поскольку я очень новичок в этом. Я использую Rails всего 3 месяца, а A-Frame — 3 недели, так что тут много ковбойского кода.
Начало работы с A-Frame
Очевидно, что если вы уже знакомы с A-Frame, можете пропустить это. Этого должно быть достаточно, чтобы вы быстро освоились и поняли остальную часть статьи.
A-Frame — это волшебная библиотека Javascript, которая создает виртуальные миры с помощью кода. Если вы уже знакомы с HTML и CSS, это будет выглядеть очень знакомо. (Если вы не знакомы с HTML и CSS, вам следует пройти курс Codecademy. Это обязательные знания в наше время).
В HTML вы знаете, что можете создать блок текста с помощью:
<p>Text here!</p>
А в A-Frame вы можете создать коробку с помощью:
<a-box></a-box>
Есть ~20 встроенных объектов, таких как сферы, плоскости и кольца, а также камеры, небо и курсор.
Каждый из этих объектов также имеет атрибуты по умолчанию. Например, если мы хотим сделать большую коробку и поставить ее перед собой, мы просто добавим атрибуты положения и масштаба:
<a-box position=”0 0 5” scale=”3 3 3”></a-box>
Это поместит коробку на 5 единиц перед вами (0 по оси X (слева направо), 0 по оси Y (сверху вниз), плюс 5 по оси Z (вперед назад)) и даст ему размеры 3 х 3 х 3.
Вы можете получить все виды очень простых сцен, работающих только с этими формами и компонентами. Не стесняйтесь играть с этим Codepen самостоятельно:
Поскольку все это по существу HTML-элементы, вы также можете анимировать их и добавлять к ним функции с помощью Javascript. Если вы хотите, чтобы что-то появлялось, двигалось, менялось по клику, все это реагирует на JS так же, как на обычный HTML.
Для более продвинутых вещей, таких как просмотр объекта в камеру, вы используете компоненты A-Frame. Это дополнительные функции, которые вы можете применить к частям сцены, чтобы добавить новые способности. Вы уже видели компоненты «положение» и «масштаб», но есть также компоненты для «анимации», «света», «материала (как это выглядит)» и «звука».
А поскольку компоненты соответствуют базовому формату JS, любой может создавать дополнительные компоненты для взаимодействия с объектами A-Frame. Если вы зайдете на GitHub Awesome A-Frame, вы найдете компоненты для текста, физики, систем частиц, телепортации и многого другого. Все, что вам нужно сделать, чтобы использовать их, это включить их Javascript в свой проект.
Все это может показаться сложным, но это довольно просто, как только вы войдете в это. Попробуйте несколько этих вводных руководств, чтобы намочить ноги.
Серверная часть просмотра блога VR
Я хочу сосредоточить большую часть этого поста на A-Frame, но я кратко коснусь серверной стороны.
Я создал все приложение, используя Rails, в котором я смог получить достаточно четкое представление в основном из отличного месячного курса Rails. Этого было достаточно, чтобы потом я мог разобраться во всем самостоятельно, до такой степени, что смог:
- Создайте блог
- Очистите мой собственный блог
- Показать все из Heroku
Весь этот вид блога VR — это, по сути, ваше обычное приложение MVC, только с 3D-представлением вместо обычного 2D-вида. Вы увидите это в коде. Если вы знаете, как сделать базовое приложение MVC, такое как клон Pinterest, в One Month Rails, значит, вы достаточно знаете Rails, чтобы сделать это.
Все, что я сделал на бэкэнде, — это создал базу данных для своих статей с их заголовками, категориями, исходными URL-адресами и содержимым, а затем импортировал ее напрямую из моего обычного блога. Вы можете увидеть этот код на GitHub здесь. Я также использовал Devise для аутентификации пользователей и убедился, что он принимает новые статьи только от меня на случай, если кто-то попытается быть умным.
Теперь давайте углубимся в создание VR-представлений для отдельных частей сайта.
Вид на дом на острове
Первое, что я хотел создать, — это новую «домашнюю страницу» в виртуальной реальности. Я начал с комнаты, но потом понял, что это немного скучно, и вместо этого выбрал остров.
Это просто приветствие и отправная точка для сайта. В нем есть ссылки на список статей и уроков, а также ссылка на эту статью и небольшой вступительный текст. Вот немного о построении отдельных частей.
Окружающая среда (небо, океан, песок)
Песок — это просто очень плоская сфера с нанесенным на нее бесплатным материалом «Песок», который я нашел в Интернете. Я выбрал сферу, потому что по какой-то причине она выглядела лучше, чем цилиндр:
<a-sphere position="0 0 0" scale="1 15 15" name="Floor" material="shader:standard;metalness:0;repeat:5 5;src:#Sand" geometry="primitive:sphere" rotation="0 0 90"></a-sphere>
Океан использует компонент океана Дона Маккарди. Это очень просто, так как все, что вы делаете, это устанавливаете размер и положение.
<a-ocean width="200" depth="200" density="40" opacity="1" position="0 -0.4 0"></a-ocean>
Небо было последней частью, и это было немного сложно, так как я хотел, чтобы это выглядело так, будто океан продолжается вечно, не взорвав ваш браузер. Поэтому я понизил положение неба на 200, чтобы по отношению к камере выглядело так, будто океан длится вечно, несмотря на то, что он конечен:
<a-sky src="#sky" position="0 -200 0"></a-sky>
Вот насколько он велик на самом деле:
Создание вступления
Затем мне нужно было сделать небольшое вступительное сообщение, чтобы помочь людям сориентироваться. Текст в виртуальной реальности — нетривиальная задача, поскольку стандартный HTML не предназначен для 3D-рендеринга, но этот фантастический компонент HTMLTexture, по сути, позволяет вам сделать именно это. Вы можете взять любой HTML-код в качестве входных данных, а затем применить его как текстуру к объекту, точно так же, как я применил текстуру песка к земле.
Затем все, что мне нужно было сделать, это добавить HTML к активам A-Frame вверху, а затем спроецировать его на объект в форме коробки:
<a-entity geometry="primitive:box" position="0 3.35 -4" draw="width: 850; height: 1100" scale="3.375 4.5 .1" htmltexture="asset:#hello"></a-entity>
Создание порталов
Пока Valve не пришлет мне приказ о прекращении действий, я подумал, что было бы забавно стилизовать навигацию между частями моего сайта, как порталы из Portal. Для этого просто нужно было сделать скриншот страницы, на которую я хотел перейти, обрезать его по форме портала, сохранить все в формате PNG, а затем добавить его в виде прозрачной текстуры в цилиндр:
<a-cylinder position="0 0 0" scale="0.01 5 1.7" rotation="0 0 0" material="shader:standard; metalness:0; roughness:1; repeat:2 1; src:#BlogPortal; flatShading:false; opacity:1; transparent:true; side:front; visible:true; fog:true;" href="https://www.nateliason.com"></a-cylinder>
Для текста поверх него я использовал компонент BMFont, который создает красивый 3D-текст без необходимости создавать холст HTML:
<a-entity bmfont-text="text:Site Home; color:FFF" position="0 2.3 -0.7" scale="1.5 1.5 0.1" rotation="0 -90 0"></a-entity>
Изображения и текстуры
Обычно для сцены A-Frame у вас будет папка в том же каталоге, что и ваш HTML, со всеми вашими активами и изображениями. Поскольку я использовал Rails, я просто поместил их все в папку «images» и использовал ERB «image_tag», чтобы связать их в разделе ресурсов, и все заработало нормально:
<%= image_tag("sky1.jpg", :id => "sky") %> <%= image_tag("Sand001.jpg", :id => "Sand") %> <%= image_tag("BlogPortal.png", :id => "BlogPortal") %> <%= image_tag("ArticlesPortal.png", :id => "ArticlesPortal") %> <%= image_tag("LessonsPortal.png", :id => "LessonsPortal") %>
Камера
Последний кусок. Для камеры я использовал этот шаблон из компонента Checkpoint Controls по причинам, которые будут очевидны в следующем разделе:
<a-entity camera universal-controls="movementControls: checkpoint" checkpoint-controls="mode: animate" position="0 4 0"> <a-ring radius-outer="0.03" radius-inner="0.02" position="0 0 -1" material="color: cyan; shader: flat" cursor="fuse: true; fuseTimeout: 1000"> </a-ring> </a-entity>
Блог и коридоры для уроков
Вы можете думать, что этот сайт имеет три уровня детализации:
- Дом
- Страницы индексации (все статьи, все уроки)
- Конкретные страницы
Когда домашний вид был готов, пришло время перейти к # 2. Как вывести список всех статей и книг? У меня было несколько идей, как распределить их в трехмерном пространстве, но в итоге я остановился на коридоре, так как это было проще и понятнее для зрителей.
Создание базового шаблона прихожей
Первым шагом было создание своего рода «шаблона», который я мог использовать для создания коридора на основе того, сколько у меня было статей.
Поскольку я буду продолжать добавлять статьи в будущем, я не мог использовать конечный коридор, так как в конечном итоге в нем закончилось место. Вместо этого мне нужно было разработать что-то, что можно было бы повторять бесконечно, но при этом хорошо выглядеть и автоматически масштабировать себя в соответствии с количеством отображаемых статей.
В конце концов я остановился на довольно простой форме: пол, две стены и арочная крыша. Я нашел бесплатные текстуры дерева, белого мрамора и синего мрамора, чтобы он выглядел красиво. Затем я добавил место на обеих стенах для фотографии статьи, заголовка статьи и выдержки. Так что теперь у каждой «единицы» прихожей может быть по одной статье с обеих сторон с некоторым буфером.
Масштабирование шаблона по количеству постов
Следующим трюком было заставить комнату масштабироваться в зависимости от количества статей. Я сделал это, объявив переменные длины и ширины для коридора, при этом ширина была фиксированной в зависимости от того, что выглядело хорошо, а длина была функцией количества предметов:
<% count = @posts.count %> <% length = (((count+1)/2+1) * 5).to_f %> <% width = 16.0 %>
Что он делает, так это выясняет, сколько постов (статей) есть, а затем определяет, какой должна быть длина. Функция выглядит немного странно, так как, когда есть только 1 или 2 поста, вы хотите, чтобы длина была 10, но когда их 3 или 4, вы хотите, чтобы она была 15, и так далее. Тогда это должен быть плавающий по причинам, которые вы скоро увидите.
Теперь, используя эти переменные длины и ширины, мы можем установить длину пола, стен и потолка.
Вот пол:
<a-box position="0 0 0" scale="<%= length %> 1 <%= width %>" material="shader:standard; metalness:0; repeat: <%= length/10 %> 4; src:#Wood-floor"></a-box>
Стены:
<a-box position="0 4 <%= (width)/-2 %>" scale="<%= length %> 8 1" material="shader:standard; metalness:0; repeat:<%= length/5 %> 2; src:#Blue-Marble" geometry="primitive:box"></a-box> <a-box position="0 4 <%= (width)/2 %>" scale="<%= length %> 8 1" material="shader:standard;metalness:0;repeat:<%= length/5 %> 2;src:#Blue-Marble" geometry="primitive:box"></a-box>
И крыша:
<a-curvedimage height="<%= length %>" radius="<%= width/2 %>" theta-length="180" rotation="0 0 90" scale="1 1 1" material="shader:standard; metalness:0; repeat:<%= width/2 %> <%= length/2 %>; src:#White-Marble" geometry="height:<%= width/2 %>; primitive:cylinder; radius:<%= width/2 %>; segmentsRadial:48; thetaLength:180; openEnded:true; thetaStart:0" position="0 8 -0.1"></a-curvedimage>
Добавление статей
Когда комната была на месте, теперь мне нужно было разместить в ней статьи.
Вот где все стало немного сложнее. Вы не можете просто поместить HTML непосредственно в объект в A-Frame, так как сначала вам нужно сделать его активом. Итак, в разделе «Активы» я запустил функцию для создания группы элементов Div для всех статей:
<% @posts.each do |post| %> <% target = "article-" + post.id.to_s %> <% pic = "picture-" + post.id.to_s %> <div id="<%= target %>"> <h2><%= post.title %></h2> <%= raw post.excerpt %> </div> <img src="<%= post.image %>" id = "<%= pic %>"> <% end %>
Это просматривает каждую статью и создает Div с «id» «статьи-1» (если это была первая статья), а затем берет изображение этой статьи и создает для него ресурс с «id» « картинка-1».
Затем, чтобы поместить его в сцену, мне пришлось снова получить доступ к статьям, найти их соответствующие активы, а затем выяснить, куда в комнате они должны пойти:
<% post_count = 0 %> <% @posts.each do |post| %> <% target_asset = "asset:#article-" + post.id.to_s %> <% target_picture = "#picture-" + post.id.to_s %> <% x_value = (((post_count)/2).ceil * 5) + 5 %> <% z_value = (width/-2.2) * (-1 + ((post_count % 2) * 2)) %> <!-- The Picture --> <a-image position="<%= x_value %> 6 <%= z_value %>" scale="4 3 .1" rotation="0 <%= ((post_count + 1) % 2) * 180 %> 0" src="<%= post.image %>" href="/posts/<%= post.id %>"></a-image> <!-- The Article --> <a-entity name="article <%=post.id%>" geometry="primitive:box" position="<%= x_value %> 3 <%= z_value %>" draw="width: 800; height: 400" scale="4 2 .1" htmltexture="<%= target_asset %>"></a-entity> <% post_count += 1 %> <% end %>
Что это делает:
- Найти следующую статью в моем списке статей
- Найдите статьи Текстовые и графические активы из предыдущих
- Выясните, где эта статья должна идти по оси X (как далеко по коридору)
- Выясните, куда он должен идти по оси Z (слева или справа)
- Поместите изображение на основе этих значений X и Z, а также выясните, нужно ли поворачивать изображение на 180 градусов или нет.
- Разместите заголовок статьи и описание на основе этих значений X и Z.
- Тогда переходите к следующей статье!
Навигация
Последней частью было выяснить, как кто-то может увидеть все статьи. Если у них есть Vive или Oculus, то у них будут контроллеры для перемещения, но большинство людей будут просматривать сайт на своих телефонах и не будут иметь никаких средств управления движением, поэтому мне нужно было делать все на основе взгляда. .
Я нашел отличный компонент Aframe Extras, который позволял размещать диски, на которые можно было смотреть, чтобы их можно было медленно перемещать по комнате. Затем все, что мне нужно было сделать, это разместить один из этих дисков каждые 10 единиц (каждые 2 статьи) вместе с некоторыми инструкциями, чтобы посмотреть на фотографии статьи, чтобы перейти к статье.
<% cylinderPos = 10 %> <% while cylinderPos < length do %> <a-cylinder checkpoint radius="1" height="0.1" position="<%= cylinderPos %> 0.6 0" color="#00b6fe"></a-cylinder> <a-entity bmfont-text="text:Look at Pictures to Read Articles;color:#000" position="<%= cylinderPos - 2.36 %> 8.3 -6.8" scale="1.5 1.5 0.1" rotation="28 0 0"></a-entity> <a-entity bmfont-text="text:Look at Pictures to Read Articles;color:#000" position="<%= cylinderPos + 2.36 %> 8.3 6.8" scale="1.5 1.5 0.1" rotation="28 180 0"></a-entity> <% cylinderPos += 10 %> <% end %>
Адаптация страницы уроков
Индексная страница Lessons была почти такой же, но с двумя книгами вместо одной статьи, без текста и с книжными полками. Книжные полки были простой дополнительной парой элементов в зависимости от длины комнаты:
<!-- Bottom Shelves --> <a-box position= "0 1.6 <%= (width)/-2 %>" scale="<%= length %> .5 2" material="shader:standard; metalness:0; repeat:<%= length/5 %> 2; src:#Dark-Wood" geometry="primitive:box"></a-box> <a-box position= "0 1.6 <%= (width)/2 %>" scale="<%= length %> .5 2" material="shader:standard; metalness:0; repeat:<%= length/5 %> 2; src:#Dark-Wood" geometry="primitive:box"></a-box> <!-- Top Shelves --> <a-box position= "0 4.6 <%= (width)/-2 %>" scale="<%= length %> .5 2" material="shader:standard; metalness:0; repeat:<%= length/5 %> 2; src:#Dark-Wood" geometry="primitive:box"></a-box> <a-box position= "0 4.6 <%= (width)/2 %>" scale="<%= length %> .5 2" material="shader:standard; metalness:0; repeat:<%= length/5 %> 2; src:#Dark-Wood" geometry="primitive:box"></a-box>
А затем мне нужно было придумать новые функции для определения позиции X, Y и Z каждой книги в списке:
<% x_value = (((lesson_count)/4).ceil * 2) + 2 %> <% y_value = ((lesson_count % 2) + 1 ) * 3 %> <% z_value = (width/-2.2) * ((((lesson_count % 4) / 2) * 2) + -1) %>
Хорошо! Коридоры на месте, теперь мне просто нужно, чтобы вы прочитали содержимое.
Чтение содержимого
Последней частью был дизайн шаблона комнаты для показа вам статьи или книжного урока. Это оказалось самой разочаровывающей частью, с которой я все еще борюсь (как вы можете видеть на некоторых просмотрах статей).
Во-первых, самой легкой частью было сделать комнату. Я нашел хорошее изображение нашей галактики и установил его как небо, а затем построил маленькую платформу из белого мрамора, используя тот же ресурс, что и наша крыша в представлении Index.
Затем наступила трудная часть.
Отображение содержимого
Для показа фактической статьи у меня было несколько вариантов. Я мог бы сделать непрерывную прокрутку, как вы читаете эту статью, я мог бы сделать постраничную навигацию, как чтение книги, или я мог бы сделать что-то совершенно другое, например, выложить всю статью, как комнату в музее.
В итоге я остановился на непрерывной прокрутке, так как она показалась мне наиболее знакомой, хотя позже я, вероятно, попробую и другие формы. Я полагаю, что чтение в виртуальной реальности будет непрерывным экспериментом, чтобы выяснить, что кажется наиболее естественным.
Тогда следующей проблемой было то, как мне поместить туда всю статью для вас? Помните, как работает отображаемый HTML:
- Создайте ресурс HTML
- Нарисуйте холст на объекте
- Поместите ресурс HTML на этот холст
Но поскольку некоторые из моих статей имеют длину более 4000 слов, а другие — всего 300, все эти факторы должны быть функцией длины, чтобы статья выглядела красиво. Так что я просто опираюсь на количество символов, верно?
Ну нет.
Видите последнюю строчку («Ну, нет»)? Это было всего 9 символов.
Но с точки зрения вертикального пространства, она занимала столько же, сколько и последняя строка, в которой было 47 символов, верно? Итак, нам нужно идти в зависимости от количества строк.
Но это не то, как работает HTML. Количество строк зависит от экрана, на котором вы что-то просматриваете. Самое близкое, что мы можем получить, — это количество тегов абзаца, но даже это несовершенно, поскольку этот абзац состоит из 4 строк, последний — из 2 строк, а два предыдущих — из 1 строки.
Так что на данный момент получение физической длины статьи должно было быть крайне ненаучным. Я добавил функцию для подсчета всех тегов ‹/p› в статье и сохранил ее как переменную:
<% fullText = @lesson.body %> <% pCount = fullText.scan("</p>").count %>
Затем мне нужно было создать объект, на котором просматривалась статья, и холст, на который был добавлен HTML, на основе этой переменной «pCount»:
<a-entity id="articleDisplay" geometry="primitive:box" position="0 <%= ((pCount/2) - 6) * -1 %> -2.5" draw="width: 850; height: <%= pCount * 244 %>" scale="3.375 <%= pCount %> .1" htmltexture="asset:#article"></a-entity>
То, что вы можете увидеть, это то, что:
- Позиция основана на общем размере, так как я просто хочу, чтобы верхняя часть статьи была видна
- Draw имеет фиксированную ширину 850, но тогда высота в 244 раза превышает количество тегов абзаца.
- И масштаб в конечном итоге оказался именно количеством тегов абзаца (каким-то образом)
Теперь я хотел бы сказать, что у меня был какой-то научный процесс для выяснения всего этого, но это было на 100% предположение и проверка. И, к сожалению, с увеличением длины качество текста ухудшается, поэтому мне приходится обрезать его как можно ближе к концам статей, а это значит, что некоторые из них обрезаются в конце. Фу. Со временем придумаю что-нибудь получше.
Прокрутка
В любом случае, теперь у нас есть этот массивный кусок текста, но вам нужно иметь возможность прокручивать его. Поскольку элементов управления прокруткой нет, я подумал, что наиболее естественным было бы добавить функцию для перемещения вверх и вниз, основываясь на просмотре сверху и снизу.
Поэтому я добавил функцию Javascript в файл приложения:
function moveText(amount){ target = document.querySelector("#articleDisplay"); targetPosition = target.getAttribute("position"); stepCount = 0 var id = setInterval(frame, 5); function frame(){ if (stepCount == 100) { clearInterval(id); } else { stepCount++; target.setAttribute('position',{ x: targetPosition.x, y: targetPosition.y + (amount/100 * stepCount), z: targetPosition.z }); }; }; }
А затем добавили два невидимых прямоугольника на сцену поверх статьи:
<!-- Move down box --> <a-box id="downButton" scale="3.75 2 .1" position="0 2 -2.45" material="opacity:0;" geometry="primitive:box"></a-box> <!-- Move up box --> <a-box id="upButton" scale="3.75 2 0.1" position="0 6 -2.45" material="opacity:0;" geometry="primitive:box"></a-box>
А затем мне просто нужно было добавить функцию «moveText» к этим объектам, когда страница была загружена:
window.onload = function() { document.getElementById("downButton").addEventListener("mouseenter", function() { moveText(2); }); document.getElementById("upButton").addEventListener("mouseenter", function() { moveText(-2); }); };
Скрытие статьи
Наконец, я не хотел, чтобы вы видели всю статью, которую вы уже прочитали, и все, что должно было произойти… поэтому я добавил крышу и пол. Я был бы рад, если бы вы могли просто парить в космосе, читая это, но пока я не придумаю хороший способ скрыть то, что сделано, мне нужно спрятать это в крыше и полу.
Если вы не понимаете, что я имею в виду, вот вид сбоку сцены, когда вы просматриваете статью:
Следующие шаги
Как я сказал в начале, это еще не сделано и еще нужно сделать некоторые уточнения, но это близко! И большая часть этой доработки будет связана с улучшением структуры A-Frame, так что мне придется немного подождать.
Тем не менее, меня очень воодушевляют другие возможности для виртуальной реальности. Я думаю, что сейчас это очень рано и рассматривается как что-то для игр, видео, (*кашель* порно) и новинок, но определенно есть потенциал переосмыслить, как мы взаимодействуем с информацией с помощью этого трехмерного визуального сначала (вместо текста). -первое) пространство.
Я надеюсь, что если вы пришли к этому без какого-либо опыта работы с A-Frame или WebVR, это побудило вас заняться этим самостоятельно. Я смог сделать это за первые две недели изучения, так что это не похоже на безумно интенсивную кривую обучения. Чем больше людей работает над подобными проектами, тем быстрее может развиваться вся среда.
Несколько последних вещей:
- Если у вас есть идеи по улучшению кода, сообщите мне об этом на GitHub (запросы на вытягивание очень эгоистично приветствуются!)
- Если у вас есть идеи или вопросы о том, как я сделал что-то, чего я здесь не описал, дайте мне знать в Твиттере. Всегда рад обновить эту статью в будущем.
Первоначально опубликовано на www.nateliason.com 28 ноября 2016 г.
