Как создавать интерактивные 3D-графики в javascript
Я создаю веб-сайт с интерактивной спортивной графикой, и недавно я наткнулся на этот отличный 3D-инструмент для бейсбола, и мне очень любопытно, как сделать что-то подобное. В частности, я хотел бы построить похожий инструмент для баскетбола (который показывает траектории бросков).
Я не думаю, что stackoverflow - лучшее место для публикации этого сообщения, но я не уверен, где еще спросить. Не стесняйтесь указывать мне правильное направление, или, если сообщение приемлемо, я рад слышать мысли людей о том, как создать такой инструмент.
Заранее спасибо!!
Обновлено: для тех, кто интересуется этими типами графиков, вот еще один инструмент на том же сайте Это показывает, что хоумранс ударил
математика для меня не проблема
похоже, что большинство людей, использующих webGL API, делают это с помощью какой-то другой библиотеки (three.js, как вы предложили), а не напрямую через webGL API ... это звучит правильно?
Верно! На самом деле библиотек очень много.
Скорее всего, я начну с three.js. Спасибо большое!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если у вас много спрайтов / полигонов, используйте webgl-canvas. Если вы не хотите использовать его напрямую, существует множество библиотек, которые облегчат вам жизнь, например pixie.js (2D) или three.js.
Если у вас не слишком много полигонов (<~ 2000), вы все равно можете использовать svg. Если вы пойдете по этому пути, лучшим вариантом будет облако точек (диаграмма рассеяния с круги) или полигоны, где вы сохраняете точки, прикрепленные к элементу, чтобы вы могли вращать их по запросу и устанавливать атрибут / свойство точек (если вы будете использовать d3, он уже добавит его в элемент в свойстве __data__):
polygon.__points = [[x1,y1]..];
Вы можете выбрать углы euclidian с 3*3 matrix или использовать quaternions (немного быстрее и позволяет избежать блокировки кардана). Скорее всего, вашим узким местом будут не они, а DOM операции. Вот пример из одного из моих проектов, он немного устарел (около 6-7 лет), но все еще может продемонстрировать идею (щелкните значок в нижнем левом углу, когда ссылка откроется):
http://www.i-pv.org/1_45/NFKB1
Короче говоря, если вы собираетесь использовать fps и шейдинг, то выбирайте webgl.
Ссылка, которой вы поделились, использует холст HTML 5 и веб-интерфейс. Чтобы закодировать что-то подобное, вам понадобится небольшое понимание матричной математики и векторов. Также существует платформа разработки игр под названием Unity, которая дает вам возможность компилировать 3D в холст HTML 5. Если вы знаете JavaScript, вот 3D-библиотека под названием Three.js threejs.org/examples/#webgl_animation_skinning_morph