Примечание редактора: Еще одно дополнение к нашему марафону вечеринок Three.js, посвященному первой конференции Three.js, которая пройдет в Париже в сентябре этого года. На этот раз Юрий приготовил очень веселую интерактивную демонстрацию, в которой вы можете буквально катапультироваться с Эйфелевой башни до Maison de la Chimie, культового места проведения конференции.
Мы также хотели бы поблагодарить Ион цезия за поддержку этого эксперимента и помощь в его распространении во время празднования конференции.
Концепция
Идея проста: согните Эйфелеву башню, прицельтесь и бросьтесь через весь Париж.
Катапульта построена как интерактивная сцена Three.js, а башня действует как пружинистая деформируемая пусковая установка. Перетаскивание меняет его форму и накапливает энергию для запуска; Release отправляет мяч в заданном направлении. Вы можете броситься куда угодно в Париже, но настоящая задача — правильно выбрать траекторию и приземлиться в месте проведения конференции. Далее демо-версия заботится о траектории, столкновениях и приземлении, и все это превращается в игривый физический эксперимент.
Но Эйфелева башня и Maison de la Chimie не просто парят в рукотворной сцене. Париж вокруг них происходит из Ион цезиякоторый обеспечивает доступ к потоковому 3D-геопространственному контенту и фотореалистичным 3D-плиткам Google. Это придает эксперименту реальный географический контекст, в то же время позволяя Three.js обрабатывать интерактивный интерфейс, анимацию и физику.
Итак, под этой немного нелепой предпосылкой скрывается приятная смесь интерактивная деформация, физика, реальные 3D-данные и веб-рендеринги все они собрались вместе, чтобы превратить поездку по Парижу в довольно нетрадиционный способ попасть на конференцию.
🇫🇷 Готовы отправиться в Париж? Самая первая конференция Three.js уже близко! Если вы все еще решаете, отправляться ли в путешествие, считайте это своим сигналом к началу пути. Использовать код CODROPS для скидка 15% твой билет и отправляйтесь на конференцию →
Как это работает
Физика
Если вы внимательно следите за новостями Three.js, вы, вероятно, слышали об удивительной библиотеке под названием покачиваться сделал Ксавье. Идея заключается в том, что мы можем добавлять кости к любому объекту. Но не просто для того, чтобы испечь скучные анимации. Затем мы можем применить физику пружины, чтобы заставить ее покачиваться, раскачиваться и подпрыгивать в интерактивном режиме. И о боже, как это весело! Просто посмотрите на это и попробуйте сами.
Теперь, конечно, мы можем использовать эту технику на любом объекте, поэтому я решил попробовать оснастить модель Эйфелевой башни. Моя первая попытка, на мой взгляд, превзошла все мои ожидания, и я до сих пор считаю, что именно эта должна была пойти в производство. Вы только посмотрите на эту милашку!
Шутки в сторону, здесь вы можете увидеть количество костей и то, как это работает.
Париж
С другой стороны, организатор предстоящей конференции Three.js Дэвид Ронай недавно опубликовал новый репозиторий с участием кинематографический зумна основе Гаррет Джонсон 3D-плитка и удивительное ЦезийJS. Так что я просто не мог пройти мимо этого совпадения. Теперь башня должна гнуться в реальном Париже!
На самом деле это так же просто, как добавить 3D-модель. Мне просто нужно было свернуть исходную отсканированную версию 3D-башни, и вуаля, у нас есть пружинная Эйфелева башня прямо в реальном городе. (Кстати, мы до сих пор можем видеть рухнувшую на землю оригинальную башню.)
Остальное легко. Я добавил на кончик шарик, добавил физический движок, и теперь вы можете буквально броситься в место конференции! Надеюсь, вам будет весело это делать 😀
И я надеюсь увидеть вас в Париже!