Threejs入门之二十五：Threejs加载gltf文件

这一节我们来通过Threejs加载一个glft格式的三维模型文件，首先我们先简单了解下gltf文件

gltf文件

gltf文件全称Graphics Language Transmission Forma（图形语言传输格式），是一种三维模型格式，用于传输和加载3D场景和模型；其号称是图形界的JPEG，能够实现快速的模型数据交换。

gltf文件核心是JSON文件，一个gltf文件可传输一个或多个场景， 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机等信息。

加载gltf文件

下面通过代码实现加载一个gltf格式的文件到场景中，首先还是需要创建场景、相机、渲染器等初始化代码，具体步骤查看前面章节，代码如下

页面初始化

import * as THREE from 'three'
import {
    OrbitControls } from 'three/addons/controls/OrbitControls.js' 
// 定义变量
let scene,camera,renderer
let axesHelper
let hesLight,dirLight,sportLight 
let controls  

// 初始化场景
initScene()
// 初始化辅助轴
initAxesHelper()
// 初始化灯光
initLight()
// 初始化mesh
initMesh()
// 初始化相机
initCamera()
// 初始化渲染器
initRenderer()
// 循环动画
animate()
// 初始化轨道控制器
initControls()

window.addEventListener('resize',function() {
    
  camera.aspect = w