Применение физики на GLTF модель используя Cannon.js и Three.js

Для того что бы ваш персонаж мог передвигаться по поверхности(TerrainMap) с физикой, вам нужно создать твёрдое тело (Rigid Body) и коллайдер(Collider) для персонажа, а так же коллайдер для статической поверхности.

Rigid Body определяет физические свойства объекта, такие как масса, форма, положение, скорость и тд. Коллайдер определяет форму и размеры твердого тела и используется для обнаружения столкновений с другими объектами.

Начнём с поверхности:

var terrainMesh = gltf.scene.children[0];

// Создаём rigidbody
var terrainBody = new CANNON.Body({
   mass: 0 // масса 0 для статики
});

// Получаем массивы вершин и граней
var terrainVerts = terrainMesh.geometry.vertices.map(function(v) {
   return new CANNON.Vec3(v.x, v.y, v.z);
});
var terrainFaces = terrainMesh.geometry.faces.map(function(f) {
   return [f.a, f.b, f.c];
});

// Добавляем форму в тело
terrainBody.addShape(new CANNON.Trimesh(terrainVerts, terrainFaces));

//И пуляем в мир
world.addBody(terrainBody);

Для персонажа примерно тоже самое:

var characterMesh = gltf.scene.children[0];

// Создаём твердое тело
var characterBody = new CANNON.Body({
   mass: 1 // масса персонажа
});
    
// Создаём коллайдер
var characterBox = new THREE.Box3().setFromObject(characterMesh);
var characterSize = characterBox.getSize(new THREE.Vector3());
var characterShape = new CANNON.Box(new CANNON.Vec3(characterSize.x / 2, characterSize.y / 2, characterSize.z / 2));

// Добавляем форму в тело
characterBody.addShape(characterShape);

//И пуляем в мир
world.addBody(characterBody);

Теперь нам нужно сделать функцию обработки столкновений:

world.addEventListener('postStep', function() {
  var contacts = [];
  var normal = new CANNON.Vec3();
  var upAxis = new CANNON.Vec3(0, 1, 0);
  var threshold = 0.1;

  // Проверка столкновений между твердым телом TerrainMap и персонажем
  terrainBody.shapes.forEach(function(shape) {
    characterBody.shapes.forEach(function(otherShape) {
      if (shape.collisionResponse && otherShape.collisionResponse) {
        var contact = new CANNON.ContactMaterial(shape.material, otherShape.material, {
          friction: 0.1, // коэффициент трения
          restitution: 0.5, // коэффициент упругости
          contactEquationStiffness: 1e7, // жесткость уравнения контакта
          contactEquationRelaxation: 3, // время релаксации уравнения контакта
          contactEquationRegularizationTime: 3 // время регуляризации уравнения контакта
        });

        world.addContactMaterial(contact);

        var hit = false;
        var trimesh = shape;
        var box = otherShape;
        var boxPosition = characterBody.position;
        var boxQuat = characterBody.quaternion;

        // Проверка коллизии между коллайдерами персонажа и поверхности
        hit = trimesh.planeIntersect(box, boxPosition, boxQuat, normal);
        if (hit) {
          // Проверка, что столкновение произошло сверху
          if (normal.dot(upAxis) > threshold) {
            contacts.push({
              normal: normal,
              depth: -hit,
              contact: contact
            });
          }
        }
      }
    });
  });

  // Применение силы гравитации к персонажу
  characterBody.applyForce(new CANNON.Vec3(0, -9.8 * characterBody.mass, 0), characterBody.position);

  // Обработка столкновений между персонажем и поверхностью
  if (contacts.length > 0) {
    var c = contacts[0];
    var dir = c.normal.negate();

    characterBody.position.vadd(dir.mult(c.depth), characterBody.position);
  }
});

---

Обновление.

Если не находит геометрию она может быть в BufferGeometry. Вот код вытаскивающий вершины и грани от туда:

// Получаем массивы вершин и граней
var positionArray = terrainMesh.geometry.attributes.position.array;
var indexArray = terrainMesh.geometry.index.array;
var vertexCount = positionArray.length / 3;
var faceCount = indexArray.length / 3;

var terrainVerts = [];
for (var i = 0; i < vertexCount; i++) {
  var x = positionArray[i * 3];
  var y = positionArray[i * 3 + 1];
  var z = positionArray[i * 3 + 2];
  terrainVerts.push(new CANNON.Vec3(x, y, z));
}

var terrainFaces = [];
for (var i = 0; i < faceCount; i++) {
  var a = indexArray[i * 3];
  var b = indexArray[i * 3 + 1];
  var c = indexArray[i * 3 + 2];
  terrainFaces.push([a, b, c]);
}