Как реализована функция просмотра 3d моделей на этом сайте http://armory.warmane.com/character/Apparent/Lordaeron/summary , есть мб какие-то библиотеки js по 3д моделированию или готовые решения?
-
Там canvas используется, а сама функция доступна по этому адресу: cdn.warmane.com/modelviewer/viewer.js?v=1466252249 Так же интересен вопрос о библиотеках или документации. – pepel_xD 15 авг '16 в 4:59
-
Есть, например, threejs.org - фреймвок использующий WebGL. На armory.warmane.com похоже используется что-то свое с использованием WebGL – Alexandr 15 авг '16 в 5:58
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
файле, потому и столько различных лоадеров.