Как сделать просмотр 3д моделей на сайте?

#javascript #3d

Как реализована функция просмотра 3d моделей на этом сайте http://armory.warmane.com/character/Apparent/Lordaeron/summary
, есть мб какие-то библиотеки js по 3д моделированию или готовые решения?
    

Ответы

Ответ 1

Для просмотра 3D моделей, сперва их надо загрузить (или импортировать) в приложение.
Импортирование подразумаевает банальное считывание данных из файла содержащего все
необходимые данные, а именно:

Аттрибуты вершины (vertex attributes) 


позиции вершин в локальной системе координат (x, y, z)   
нормалей к вершинам (x, y, z)
текстурные координаты (x, y), 0 <= x, y <= 1


Информацию о материалах модели (Ambient, Diffuse, Specular составляющие каждого материала)


Ambient Ka - степень материала воспринимать фоновый свет.
Diffuse Kd - (рассеивающая) составляющая материала, показывает степень материала
воспринимать рассеивающий свет - тот свет который в зависимости от ориентации (нормали)
поверхности и направления света рассеивается во все стороны равномерно.
Specular Ks - свойство материала воспринимать зеркальный свет 


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

кусок из .mtl файла

# Blender MTL File: 'modelname.blend'
# Material Count: 6
newmtl Arm
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.640000 0.640000 0.640000
Ks 0.500000 0.500000 0.500000
Ni 1.000000
d 1.000000
illum 2
map_Kd arm_dif.png
map_Bump arm_showroom_ddn.png
map_Ks arm_showroom_spec.png 

// ...


Текстуры - изображения (images) в каком либо формате для текстурирования с помощью
текстурных координат.

В случае с js импортированием будет разбор (или парсинг) файла экспортированного
из какого - либо 3D редактора содержащего данные (аттрибуты вершин, текстуры) о модели.
Этот файл сервер должен отдавать клиенту в виде plain/text или application/json или
application/javascript.

Есть решения которые делают всю рутинную работу связанную с считыванинем (или парсингом),
и как уже упомянули о three.js добавлю, что он включает в себя подобные решения (инструменты
или loaderы) некоторые из них: 

OBJLoader
MTLLoader
ColadaLoder
glTFloader
JSONLoader
MaterialLoader

Если вершины с аттрибутами в .obj файле то обычно инфа о материалах и текстуры идут
в отдельном .mtl файле, потому и столько различных лоадеров.