введение в файл glTF

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

Файл glTF содержит геометрию, материалы, текстуры, анимацию и другую информацию о сцене или модели проектирования и имеет хорошую совместимость и масштабируемость. Файлы glTF основаны на формате JSON, который легко читать и изменять, а также легко анализировать и использовать с помощью языков программирования.

glTF поддерживает два формата файлов: *.glTF и *.glb.

.glTF — это текстовый файл на основе формата JSON. Он может содержать элементы 3D-модели, такие как сцены, узлы, информацию о сетке, материалы, анимацию, камеры и т. д., а также может включать внешние ресурсы, такие как текстуры, изображения и двоичные данные. Файлы .glTF легко читаются, изменяются и редактируются, а для уменьшения размера файла их можно сжимать с помощью gzip. Однако формат файла .glTF может стать более многословным и медленным при обработке сложных сцен.

.glb — это двоичный формат файла, который содержит все данные glTF, включая все внешние ресурсы. Поскольку файлы .glb являются двоичными, размер файла и время загрузки значительно сокращаются, сохраняя при этом гибкость и возможность редактирования файлов .glTF. Файлы .glb также можно сжать с помощью gzip для дальнейшего уменьшения размера файла. Однако формат файла .glb, как двоичный файл, трудно редактировать и изменять напрямую.

Система координат модели в цезии

В Cesium, чтобы обеспечить правильное отображение и взаимодействие различных данных в трехмерной сцене, определяется конкретная система координат модели, система координат ENU, где ENU означает Northeast Up.

• Восток: ось X обращена к востоку от земной поверхности в метрах.
• Север: ось Y обращена к северу от земной поверхности в метрах.
• Вверх: ось Z обращена к центру Земли. В системе координат ЕНУ она обычно относится к направлению вверх, перпендикулярному земной поверхности. Единица измерения — метры.

По умолчанию начало системы координат сцены «Цезий» расположено в центре Земли, за пределами атмосферы над земной поверхностью, а ось координат касается земной поверхности. Предположим, мы хотим добавить 3D-модель в сцену «Цезий». Нам необходимо убедиться, что модель использует систему координат ЕНУ и расположена по касательной к земной поверхности. Модель можно преобразовать из внешней системы координат (например, декартовой системы координат) в систему координат ENU, выполнив следующие действия.

1. Преобразуйте Модель из внешней системы координат в декартову систему координат.
2. Преобразуйте точки координат в декартовой системе координат в точки координат в системе координат ENU.
3. Начало системы координат ЕНУ сделайте касательным к поверхности Земли.

Чтобы преобразовать модель из внешней системы координат в систему координат ENU, нам нужно использовать функцию преобразования координат Cesium. Cesium предоставляет ряд функций и объектов для преобразования 3D-моделей из внешних систем координат в системы координат ЕНУ.

Знакомство со связанными классами

Класс Cesium.Cartesian3(x, y, z)

Cesium.Cartesian3даCesiumБиблиотека для представления декартовых координат в трехмерном мировом пространстве.добрый。каждыйCartesian3Экземпляры представляют точку в пространстве,Его можно описать компонентами координат X, Y и Z.

• x Координаты представляют собой перемещения в направлении восток-запад в метрах.
• y Координаты представляют собой смещения в направлении север-юг в метрах.
• z Координаты представляют собой перемещения в метрах перпендикулярно поверхности Земли.

Общие методы декартовой3

• Cartesian3.add(left, right, result): Добавьте два вектора,результатхранилищесуществоватьresultобъектсередина。
• Cartesian3.subtract(left, right, result): Вычтите два вектора,результатхранилищесуществоватьresultобъектсередина。
• Cartesian3.magnitude(cartesian): Возвращает длину вектора.
• Cartesian3.normalize(cartesian, result): Возвращает единичный вектор вектора,результатхранилищесуществоватьresultобъектсередина。
• Cartesian3.dot(left, right): Возвращает скалярное произведение двух векторов.
• Cartesian3.cross(left, right, result): Возвращает векторное произведение двух векторов,результатхранилищесуществоватьresultобъектсередина。
• Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, результат): Функция, используемая для преобразования заданных координат высоты широты и долготы в векторы в декартовой системе координат. Функция принимает пять параметров: долготу, широту, высоту, эллипсоид и результат. Долгота и широта — это числа с плавающей запятой в градусах, которые представляют долготу и широту, соответствующие геометрической точке на поверхности Земли. высота — это значение высоты этой геометрической точки (с использованием уровня моря в качестве ориентира). эллипсоид — необязательный параметр, указывающий используемый эллипсоид. Если он не указан, используется эллипсоид WGS84. результатом является необязательный Cartesian3объект, представляющий вектор в преобразованной декартовой системе координат. Если параметр результата не указан, создается новый Cartesian3объект, в котором сохраняется вычисленный вектор, а затем возвращается объект. Функция сначала преобразует долготу и широту в радианы.,И вычислить геоцентрический радиус геометрической точки, исходя из параметров эллипсоида. Используя эту информацию, можно рассчитать декартовы координаты.,Высоту также можно добавить к компоненту Z.

Декартовский3 пример: Следующий код добавляет два объекта Cartesian3 и печатает результат:

var a = new Cesium.Cartesian3(1, 2, 3);
var b = new Cesium.Cartesian3(4, 5, 6);
var result = new Cesium.Cartesian3();
Cesium.Cartesian3.add(a, b, result);
console.log(result); // Cartesian3{x: 5, y: 7, z: 9}

В сценах с цезием объекты Cartesian3 часто используются для представления положения и ориентации в сцене. Например, когда мы выбираем объект в 3D-сцене, возвращаемым результатом является объект Cartesian3, содержащий координаты положения. Их также можно использовать для выполнения векторных операций и преобразований 3D-графики.

Cesium.HeadingPitchRoll(заголовок, шаг, крен) добрый

Cesium.HeadingPitchRollда一个定义позиция、Углы тангажа и кренадобрый,Должендобрыйиспользуется для описания3DСостояние вращения объекта。Должендобрыйструктурафункция Используйте три параметраheading,pitchиrollсоответственно определить целевой объект вокругYугол поворота оси（позиция）、вокругXугол поворота оси（Подача）ивокругZугол поворота оси（рулон）,И поместите их хранилище в экземпляр добрый для использования.

Все параметры представляют собой числа с плавающей запятой в радианах.,且值существовать-πприезжатьπмежду。heading参数定义了вокругYУгол поворота оси,Принимая направление истинного севера как0степень。pitch参数定义了物体вокругXУгол поворота оси,Примите горизонтальное положение за 0 градусов.,Поверните вверх, чтобы быть позитивным,Вращение вниз отрицательное。roll参数定义了物体вокругZУгол поворота оси,Примите вертикальное направление входного направления вращения за 0 градусов.

Например, следующий код создает состояние вращения, которое поворачивается на 45 градусов вокруг осей Y, X и Z:

var heading = Cesium.Math.toRadians(45);
var pitch = Cesium.Math.toRadians(45);
var roll = Cesium.Math.toRadians(45);

var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

Для прохожденияCesium.HeadingPitchRollструктурафункция Создано состояние вращения,Мы можем получить и установить определенные компоненты объекта состояния вращения, используя методы экземпляра в следующем примере кода:

var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

// Получите заголовок и шаг текущего объекта HPR. значение рулона
var currentHeading = hpr.heading;
var currentPitch = hpr.pitch;
var currentRoll = hpr.roll;

// Установите заголовок и шаг объекта HPR. значение рулона
hpr.heading = Cesium.Math.toRadians(90);
hpr.pitch = Cesium.Math.toRadians(-45);
hpr.roll = Cesium.Math.toRadians(0);

Вы также можете использовать следующий пример кода для создания（Все0степень）изCesium.HeadingPitchRollобъект：

var hpr = new Cesium.HeadingPitchRoll();

Общие функции преобразования

Cesium.Transforms.eastNorthUpToFixedFrame(происхождение, эллипсоид, результат)

Cesium.Transforms.eastNorthUpToFixedFrame(origin, ellipsoid, result)даCesiumсерединаиспользуется для计算以给定点为источникиз地心坐标系из转换矩阵из方法。Должен方法接受三个参数：

• origin: Точка, выраженная в декартовых координатах, то есть точка, служащая началом геоцентрической системы координат.
• ellipsoid（Необязательный）: Earth Ellipsoidobject (по умолчанию — эллипсоид WGS84), используемый для расчета координат относительно геоцентрической системы координат.
• result（Необязательный）：используется дляхранилищерезультат转换矩阵изMatrix4объект。

Этот метод возвращает объект Matrix4, который представляет матрицу преобразования, необходимую для преобразования системы координат ENU (северо-восток вверх) в геоцентрическую систему координат с центром в указанном начале координат. Матрица результатов, рассчитанная этим методом, связана с вращением единичного вектора и перемещением системы координат ЕНУ. Эту матрицу можно использовать для преобразования 3D-объектов из системы координат ЕНУ в геоцентрическую систему координат.

Например, следующий код принимает географические координаты Нью-Йорка (-74,00, 40,71) в качестве начала координат и вычисляет матрицу преобразования геоцентрической системы координат с этой точкой в ​​качестве начала координат:

var origin = Cesium.Cartesian3.fromDegrees(-74.00, 40.71, 0);
var enuToFixedFrameTransform = Cesium.Transforms.eastNorthUpToFixedFrame(origin);

Если вам нужно преобразовать 3D-объект из системы координат ENU, направленной на северо-восток, в геоцентрическую систему координат указанного начала координат, вы можете использовать эту матрицу, чтобы преобразовать его в нужную систему отсчета. Например:

var enuPoint = new Cesium.Cartesian3(10, 10, 0);
var fixedFramePoint = new Cesium.Cartesian3();
Cesium.Matrix4.multiplyByPoint(enuToFixedFrameTransform, enuPoint, fixedFramePoint);

В приведенном выше коде,enuPoint表示существоватьENU坐标系серединаиз一个点（假设Должен点可以表示为（10,10,0））。通过使用变换矩阵将Должен点转换为地心坐标系。результатхранилищесуществоватьfixedFramePoint变量середина , то есть положение этой точки в геоцентрической системе координат.

Cesium.Transforms.headingPitchRollQuaternion(origin, headingPitchRoll, эллипсоид, фиксированныйFrameTransform, результат)

Cesium.Transforms.headingPitchRollQuaternion(origin, headingPitchRoll, ellipsoid, fixedFrameTransform, result)функциядаCesium Функции в API, используемые для преобразования заданного начала координат, азимута, тангажа и крена в кватернионы. Остальные параметры функции можно использовать для указания эллипсоида, системы отсчета и результирующего исходящего кватерниона.

origin参数да一个Cartesian3объект,它定义了旋转изсередина心点。输入изheadingPitchRoll参数да一个带有позиция、Углы тангажа и кренаHeadingPitchRollобъект。需要注意изда,Три введенных угла должны быть в радианах.

Необязательный参数ellipsoid定义了参与旋转изэллипсоид,если не указано,则使用标准изWGS84эллипсоид。fixedFrameTransform参数可以被用来существоватьрезультат Кватернионы应используется для一个不同из设备坐标系из情况下调整результатиз方向。result参数да一个输出результатиз空объект,Если этот параметр опущен,Для хранения результата будет создан новый объект кватерниона. Если этот параметр указан,Тогда функция модифицирует объект, а не создает новый объект.

Вот несколько примеров использования этой функции:

var origin = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
var heading = Cesium.Math.toRadians(90);
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

// Эллипсоид по умолчанию (WGS84), вращение в системе координат по умолчанию (инерциальная система координат)
var quat1 = Cesium.Transforms.headingPitchRollQuaternion(origin, hpr);

// Вращение в другой системе координат
var fixedFrameTransform = Cesium.Transforms.northEastDownToFixedFrame(origin);
var quat2 = Cesium.Transforms.headingPitchRollQuaternion(origin, hpr, undefined, fixedFrameTransform);

// Используйте другой эллипсоид и используйте предоставленный результат хранилища кватернионов.
var ellipsoid = Cesium.Ellipsoid.UNIT_SPHERE;
var quat3 = new Cesium.Quaternion();
Cesium.Transforms.headingPitchRollQuaternion(origin, hpr, ellipsoid, undefined, quat3);

上述代码基于给定изoriginисточник、heading, шаг и roll角степень计算了一个Кватернионы旋转。第一个示例创建了一个默认из旋转,ихранилищесуществоватьquat1середина。第二个示例середина,Матрица преобразования используется для поворота фиксированной системы координат.,результат被хранилищесуществоватьquat2середина。第三个示例使用给定изэллипсоиди将результатхранилищесуществовать提供изquat3Кватернионыобъектсередина。

Как загрузить файлы gltf в Cesium

Чтобы загрузить файл gltf в Cesium, вы можете использовать метод view.entities.add. Здесь необходимо отметить одну деталь. При загрузке модели в методе add настраивается параметр uri, а не url. , иначе он не будет работать.

Подробный код выглядит следующим образом

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium' 
import { onMounted } from 'vue'; 
// import modelFile from '/feiji.glb'
let viewer, imageLayers
onMounted(async () => { 
  // Инициализировать цезий
  initViewer()
  // Загрузить данные изображения
  addImageLayers()
  // Загрузить данные gltf
  addGLTFModel('/feiji.glb', 4000)
})

function initViewer() {
  viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, // Виджет анимации
    baseLayerPicker: false, //Компонент слоя карты
    fullscreenButton: false, // Полноэкранный компонент
    geocoder: false, // Компонент поиска геокодирования
    homeButton: false, //Компонент домашней страницы
    infoBox: false, //Информационный блок
    sceneModePicker: false, // Режим сцены
    selectionIndicator: false, //Выбираем компонент индикатора
    timeline: ложь, // Временная шкала
    navigationHelpButton: false,//кнопка «Помощь»
    navigationInstructionsInitiallyVisible: false,
  })
  // console.log(viewer);
  // Скрыть информацию о логотипе
  viewer._cesiumWidget._creditContainer.style.display = 'none'
  // скрытая земля
  // viewer.scene.globe.show = false
  imageLayers = viewer.imageryLayers
  viewer.scene.globe.depthTestAgainstTerrain = true;// По мере увеличения глубины масштабирования карты данные невозможно получить, поэтому необходимо включить мониторинг глубины.
  // console.log(imageLayers);
}
async function addImageLayers() {
  imageLayers.remove(imageLayers.get(0)) //Очистка данных карты изображений, загруженных Cesium по умолчанию (по умолчанию загружена карта Bing) 
  // Карта Бинга
  const bing = await Cesium.BingMapsImageryProvider.fromUrl(
    "https://dev.virtualearth.net", {
    key: "AodxPjHCueIzbuOPovDaDba7D6qpNMPdJ8nt96KsDjKIs0yz5j4jTuNMdMdO6tJZ",
    mapStyle: Cesium.BingMapsStyle.AERIAL//Необязательный параметр, укажите стиль карты
  })
  imageLayers.addImageryProvider(bing) 
}
async function addGLTFModel(url, height) {   
  // Метод сущности загружает gltf
  viewer.entities.removeAll() //Очистить все объекты перед загрузкой
  const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height)
  const heading = Cesium.Math.toRadians(135) //дуга 135 градусов
  const pitch = Cesium.Math.toRadians(0);
  const roll = 0
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  )  
  const entity = await viewer.entities.add({
    name: 'feiji',
    position: position,
    orientation: orientation,
    model: { 
      uri: url, //Обратите внимание, что при загрузке файлов gltf с использованием метода entitits.add здесь указывается uri, а не URL-адрес, и этот метод может загружать файлы только в формате .glb.
      scale: 1.0,//Коэффициент масштабирования
      minimumPixelSize: 128, //Минимальный размер пикселей, чтобы не быть слишком маленьким и невидимым
      maximumScale: 20000, //Максимальный размер модели. Верхний предел минимального размера пикселей.  
      incrementallyLoadTextures: true, //Может ли текстура продолжать течь после загрузки модели
      runAnimations: true, // стоит ли запускать gltf-анимацию, указанную в Модели
      clampAnimations: true, //Укажите, сохраняет ли анимация gltf последнюю позу в течение всего времени без ключевых кадров
      shadows: Cesium.ShadowMode.ENABLED,
      heightReference: Cesium.HeightReference.NONE
    }
  }) 
  viewer.trackedEntity = entity; // Сосредоточьтесь на модели
  viewer.zoomTo(entity)
}
</script>
<style  scoped></style>

Запустите код и обновите браузер. Вы увидите, что модель gltf загружена на страницу.

Хорошо, на сегодня это все. Оставьте сообщение в области комментариев, если у вас есть вопросы. Если оно вам понравилось, подпишитесь на него, поставьте лайк и добавьте в избранное.