Как построить интерактивные, 3D-графики в JavaScript

Question

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

Я не думаю, что stackoverflow - лучшее место для публикации этого, но я не уверен, где еще спросить. Не стесняйтесь указывать мне правильное направление, или, если пост в порядке, я рад услышать мысли людей о том, как создать такой инструмент.

Спасибо заранее !!

Редактировать: для тех, кто интересуется / интересуется этими типами графиков, на этом же сайте есть еще один инструмент , который показывает, что homeruns ударил

Answer 1

Если у вас много спрайтов / полигонов, используйте webgl-canvas . Если вы не хотите использовать его напрямую, существует множество библиотек, облегчающих вашу жизнь, таких как pixie.js (2D) или three.js .

Если у вас не слишком много полигонов ( <~ 2000 </strong>), вы все равно можете использовать svg . Если вы идете по этому пути, ваша лучшая ставка будет идти на облако точек (точечный график с кружками ) или многоугольниками , где вы сохраняете точки, прикрепленные к элементу, чтобы вы могли вращать их по требованию и установите атрибут / свойство points (если вы будете использовать d3, он уже добавит его к элементу в свойстве __data__):

polygon.__points = [[x1,y1]..];

Вы можете пойти на euclidian углы с 3*3 matrix или использовать quaternions (немного быстрее и избегает блокировки карданного подвеса). Скорее всего, узким местом будут не эти операции, а операции DOM . Вот пример из одного из моих проектов, он немного стар (около 6-7 лет), но все еще может продемонстрировать идею (нажмите левую нижнюю иконку, когда откроется ссылка):

http://www.i -pv.org / 1_45 / nfkb1

как это выглядит

Короче говоря, если вы собираетесь использовать fps и shading, перейдите к webgl.