Использование HTML/JS для создания моего идеального убежища для друзей

18 мая 2019 года я женился на женщине своей мечты. Конечно, у всех было много романтики и хороших моментов (я являюсь отличным хозяином, вы знаете #humblebrag). Но среди шума и суеты моего запланированного события десятилетия (снова #humblebrag) я не мог не остановиться, чтобы также оценить само место.

Великое событие может произойти где угодно… конечно. Компания на самом деле является самой важной частью планирования мероприятия. Но расположение это атмосфера. Место, которое мы выбрали, было очень эклектичным, с тематическими комнатами, где многие гости могли провести ночь. Это создавало ощущение пижамной вечеринки (но ты уже взрослая и поэтому… …пьянка!).

Мы узнали, что это место существует, потому что группа друзей моей свекрови проводит здесь ежегодный ретрит. Это группа занятых родителей, которые просто пытаются найти время, чтобы наверстать упущенное и провести время вместе раз в год. Это явно то, чего они часто ждут с нетерпением. Я могу с радостью представить группу моих друзей, делающую что-то подобное.

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

  • «Чем это место может быть лучше?»
  • «Что я мог бы сделать по-другому, если бы я был тем, кто разработал планировку этого здания?»
  • «Веб-сайт у них ужасный. Как веб-мастер, я определенно мог бы найти больше способов использовать технологии для нужд своего бизнеса».

Отвечать на эти вопросы было весело, но, в конечном счете, бессмысленно. Не похоже, чтобы у меня были финансовые средства, чтобы построить особняк, который я и мои друзья могли бы навещать раз в год. Конечно, это может быть жизнеспособной бизнес-моделью, чтобы управлять местом и, возможно, выделить выходные для своих друзей. Но у меня просто нет капитала. Все, что я могу сделать, это притвориться.

Но знаете ли вы отличное место, чтобы поверить? Интернет. То, чему я посвятил свою карьеру развитию. Я подумал о своем наборе навыков и задался вопросом, есть ли способ спроектировать место проведения на HTML, CSS, JavaScript, Python или чем-то еще. Я вспомнил a-frame, библиотеку для создания сайтов виртуальной реальности. Так что я потрескался…

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



В последнее время я узнал о невероятной силе быстрого прототипирования, а затем вернулся, чтобы заполнить пробелы. Одна из вещей, которую я посчитал мелкой деталью (т.е. к которой стоит вернуться для тонкой настройки), заключалась в добавлении мебели и внешнего дизайна. Чтобы решить проблему, я посетил Google Poly и загрузил несколько низкополигональных моделей, чтобы взять их на время разработки (диван-заполнитель, если хотите). Но теперь, когда у меня есть базовый макет, я готов детализировать детали. Я хочу добавить экстерьер к зданию.

Я читал, что площадки должны иметь что-то уникальное, чтобы отличать их от конкурентов. Я подумал, что было бы здорово иметь место для свадьбы, оформленное в стиле Запретного города, с его королевскими пагодами.

Проблема с моей текущей стратегией заключалась в том, что в Google Poly не было моделей для точного плана помещения. Мне нужно было составить план. Может быть, я мог бы поручить художнику Блендера вырезать для меня ремиксируемую модель? Таким образом, я мог собрать края и стороны вместе, как лего в виртуальной реальности.

Я нашел вполне жизнеспособную модель для моего базового макета.

Но я не мог не чувствовать, что было бы пустой тратой денег нанимать кого-то, кто просто разрежет модель на куски в Blender для меня. Так что… вот так я прокачал свой собственный набор навыков.

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

Всю последнюю неделю я знакомился с Blender и делал вещи, которые никогда не думал, что смогу сделать за неделю. Я создал пончик, следуя невероятной серии руководств для начинающих от Blender Guru, которые научили меня перемещаться в Blender, редактировать модели и накладывать на них материалы.

Я даже сделал первый поперечный разрез своего VR Lego. Но это было действительно неэффективно. Мой план состоял в том, чтобы импортировать около дюжины разных моделей gltf? Казалось, что это очень ресурсоемкий способ работы с графикой.

Итак, теперь я планирую сделать всю структуру здания в Blender и экспортировать ее как единую модель gltf. Мне нужно многому научиться… например, групповые экземпляры и чем gltf-рендерер в a-frame отличается от Blender'а, и как заставить материалы работать между ними.

Кто-то может сказать, что это пустая трата времени, но на самом деле мне нравится больше узнавать об индустрии компьютерной графики, и этот проект — то, что я могу добавить в свое портфолио!

Это был сегодня я узнал (TIL) блог. Если вы нашли это родственным, интересным или, возможно, оно познакомило вас с какой-то новой интересующей вас технологией, подумайте о том, чтобы оставить для него 👏. Если нет, то тоже нормально. Я просто документирую свой карьерный рост!

Подпишитесь на меня, чтобы получать больше контента!