Three.js 入门(导入glft模型和压缩过的模型)

本篇主要学习内容 :

1. 导入glft模型
2. 导入压缩过的gltf模型

点赞 + 关注 + 收藏 = 学会了

gltf格式的重要性

GLTF格式是新2015发布的三维模型格式，随着物联网、WebGL、5G的进一步发展，会有越来越多的互联网项目Web端引入3D元素，你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样，现在的网站，图片基本是标配，对于以后的网站来说如果需要展示一个场景，使用3D来替换图片表达也是很正常的事情。图片有很多格式，对于三维模型自然也是如此，Web开发的时候图片会有常用格式，对于Web3D开发也一样，肯定会根据需要选择一个常见的大家都熟悉的格式，随时时间的发展，GLTF必然称为一个极为重要的标准格式。

不仅three.js，其它的WebGL三维引擎cesium、babylonjs都对gltf格式有良好的的支持。

PS:如需模型可私信我免费提供

1.导入glft模型

1.1) 引入GLTFLoader.js

你在three.js官方文件的 /examples/jsm/loaders/ 目录下，可以找到一个文件GLTFLoader.js，这个文件就是three.js的一个扩展库，专门用来加载gltf格式模型加载器。

// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

1.2) gltf加载器new GLTFLoader()

执行new GLTFLoader()就可以实例化一个gltf的加载器对象。

// 实例化GLTF加载器
let gltfLoader = new GLTFLoader()

1.3) gltf加载器方法.load()

通过gltf加载器方法.load()就可以加载外部的gltf模型。
执行方法.load()会返回一个gltf对象，作为参数2函数的参数，改gltf对象可以包含模型、动画等信息，本节课你只需要先了解gltf的场景属性gltf.scene,该属性包含的是模型信息，比如几何体BufferGometry、材质Material、网格模型Mesh。

gltfLoader.load(
    // 模型路径
    './model/Duck.glb',
    // 加载完成回调
    (gltf) => {
        console.log(gltf)
        //场景添加模型
        scene.add(gltf.scene)
    }
)

2.导入压缩过的gltf模型

2.1) 压缩模型和非压缩模型有什么区别？怎么解压？

· 压缩模型未解压会报错:THREE.GLTFLoader: No DRACOLoader instance provided

· 使用解压器DRACOLoader

2.2) 引入DRACOLoader()

// 导入解压器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

2.3) 解压器`new DRACOLoader()

// 实例化解析器
const dracoLoader = new DRACOLoader()

2.4) 解压后渲染

// 设置Draco路径
dracoLoader.setDecoderPath('./draco/')
//设置gltf加载器draco解码器
gltfLoader.setDRACOLoader(dracoLoader)

gltfLoader.load(
    // 模型路径
    './model/city.glb',
    // 加载完成回调
    (gltf) => {
        console.log(gltf)
        //场景添加模型
        scene.add(gltf.scene)
    }
)

完整代码

import { onMounted } from 'vue'
// 导入threejs
import * as THREE from 'three'

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入GLFT
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// 导入解压器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

// 创建场景
const scene = new THREE.Scene()
// 创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角
    window.innerWidth / window.innerHeight, //宽高比
    0.1, //近平面
    1000 //远平面
)
// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 设置相机位置
camera.position.x = 5
camera.position.y = 2
camera.position.z = 5
camera.lookAt(3, 0, 0) //原点
// 坐标辅助器 （xyz轴绘制）
const axesHelper = new THREE.AxesHelper(5)

scene.add(axesHelper)
// 轨道控制器  (旋转缩放)
const controls = new OrbitControls(camera, renderer.domElement)
// const controls = new OrbitControls(camera, document.body)
// 设置带阻尼（惯性缓动效果）
controls.enableDamping = true
// 阻尼系数
controls.dampingFactor = 0.05
// 旋转速度
// controls.autoRotate = true
// 渲染函数
;(function animate() {
    controls.update()
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
})()
// 渲染
// 监听窗口变化
window.addEventListener('resize', () => {
    // 重置渲染器宽高比
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 重置相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    // 更新相机投影矩阵
    camera.updateProjectionMatrix()
})

const gui = new GUI()

// 实例化GLTF加载器
let gltfLoader = new GLTFLoader()
gltfLoader.load(
    // 模型路径
    './model/Duck.glb',
    // 加载完成回调
    (gltf) => {
        console.log(gltf)
        //场景添加模型
        scene.add(gltf.scene)
    }
)
// App.vue:83 Error: THREE.GLTFLoader: No DRACOLoader instance provided
// 压缩模型未解压报错

// 实例化解析器
const dracoLoader = new DRACOLoader()
// 设置Draco路径
dracoLoader.setDecoderPath('./draco/')
//设置gltf加载器draco解码器
gltfLoader.setDRACOLoader(dracoLoader)

gltfLoader.load(
    // 模型路径
    './model/city.glb',
    // 加载完成回调
    (gltf) => {
        console.log(gltf)
        //场景添加模型
        scene.add(gltf.scene)
    }
)

// 加载环境贴图
let rgbeLoader = new RGBELoader()

rgbeLoader.load('./texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (envMap) => {
    // 球形
    envMap.mapping = THREE.EquirectangularReflectionMapping
    // 设置环境贴图
    scene.environment = envMap
})

到此基础入门（七）学习告一段落，道阻且长，行则将至。与诸君共勉。 ⭐️