Комментарий: Мы видели, как устало использовать нативный API WebGL для разработки, потому что было разработано большое количество фреймворков WebGL. Эти рамки инкапсулируют различные элементы создания трехмерных сцен в различной степени. Вы можете быстро создать необходимые 3D -сцены. Заинтересованные друзья могут узнать об этом. Возможно, эта статья будет полезна для вас.
Мы видели, как устали использовать Native WebGL API. Из -за этого было разработано большое количество фреймворков WebGL. С этими структурами вы можете быстро создать необходимые 3D -сцены. Эти рамки инкапсулируют различные элементы создания трехмерных сцен в различной степени, такие как сцены, камеры, модели, освещение, материалы и т. Д.; Используя эти инкапсулированные объекты, вы можете легко создать необходимые 3D -сцены, чтобы вам нужно было только сосредоточиться на логике.
В настоящее время никто не имеет преимущества подавляющих других рамок. Какой кадр выбрать зависит от ваших личных предпочтений. Однако при выборе рамки я лично думаю, что лучше взглянуть на последнее время обновления структуры. Выбор стабильной обновленной структуры всегда может использовать последние функции и сделать вашу программу более стабильной.
В следующем примере используется структура Three.js для разработки.
Три. Вы можете использовать его, чтобы легко создавать камеры, модели, освещение, материалы и многое другое. Вы также можете выбрать разные визуализации. Thre.js предоставляет множество методов рендеринга. Вы можете использовать Canvas для рендеринга или использовать WebGL или SVG для рендеринга.
Кроме того, Three.js может загружать 3D -файлы во многих форматах, а ваши модельные файлы могут поступать из Blender, Maya, Chinema4D, 3Dmax и т. Д., И у него есть относительно простые вещи, встроенные в: (сферы) сферы, (воздушные) плоскости, (кубики) кубики, (цилиндры). Thre.js создает эти объекты очень легко.
Хорошо, не говорите чушь, просто посмотрите на код:
<! Doctype html>
<html>
<голова>
<title> ThreeJsdemo </title>
<meta charset = "utf-8">
<style>
Тело
{
поля: 0px;
фоновый цвет:#b0b0b0;
перегрузка: скрыта;
}
</style>
</head>
<тело>
<script src = "three.js"> </script>
<Скрипт>
VAR Camera, сцена, рендерер;
var mesh;
init ();
animate ();
function init () {
Scene = new Three.Scene ();
Camera = новый.
Camera.position.z = 400;
Scene.add (камера);
Геометрия = Новая Три. Кабегеометрия (200 200 200);
Материал = новый тройка
mesh = new Three.mesh (геометрия, материал);
Scene.add (Mesh);
renderer = new Three.webglrenderer ();
renderer.setsize (window.innerwidth, window.innerheight);
document.body.appendchild (renderer.domelement);
}
функция animate () {
requestAnimationFrame (Animate);
Mesh.rotation.x += 0,05;
Mesh.rotation.y += 0,05;
renderer.render (сцена, камера);
}
</script>
</body>
</html>
Это весь код, по сравнению с предыдущим кодом с использованием WebGL API, это просто слишком просто.
Код очень интуитивно понятен, всего несколько шагов:
1. Создать сцену сцены.
2. Создайте камеру камеру.
3. Создать/загружать геометрию модели.
4. Загрузите материал материала.
5. рендеринг сетки объекта модели (состоит из геометрии и материала).
6. Включить анимацию.
Это функция, предоставляемая каждой структурой. Использование разных структур в основном одинаково, за исключением того, что имена функций могут быть разными. В следующих ссылках перечислено много структурных учебных документов, вы можете выбрать несколько способов обучения.
Что касается модельных данных, я хотел бы сказать одно, потому что JSON короткий и краткий, он более подходит для передачи сети. В будущем он может стать наиболее подходящим форматом данных модели для WebGL, поэтому многие фреймворки начали поддерживать данные модели в формате JSON.
Практическая ссылка:
Центр разработки: https://developer.mozilla.org/en/webgl
Инструменты разработки в Интернете премиум -класса:
Основные учебники для различных рамок:
Webgl Китайский учебник:? P = 42
Oak3d китайский учебник:? Cat = 57
Официальный веб -сайт CubicVr3d:
Три.
Сообщения коллекции для различных кадров: