【Threejs】从零开始（十）--加载gltf模型和压缩后的模型

一.加载普通的gltf模型

glTF（gl传输格式）是一种开放格式的规范 （open format specification）， 用于更高效地传输、加载3D内容。该类文件以JSON（.gltf）格式或二进制（.glb）格式提供， 外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件可传输一个或多个场景， 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。

1.导入

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

2.创建实例

//实例化加载器
const loader = new GLTFLoader()

3.导入模型文件

loader.load('./models/car.glb', function (gltf) {scene.add(gltf.scene)console.log(gltf)
}, undefined, function (error) {console.error(error)
})

这样就可以导入我们的模型文件

如果画面是一片漆黑的话，调整一下场景的颜色，因为没有光源，模型是纯黑色的，在黑色背景下看不到。

scene.background = new THREE.Color(0x999999)

想让我们的模型有颜色可以加入光源，也可以加入背景贴图，用环境光照亮模型。

// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'// 全景贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('./assets/night.hdr', (texture) => {//设置球型映射texture.mapping = THREE.EquirectangularReflectionMapping // scene.background = texture // 设置背景scene.environment = texture  // 设置环境//反射贴图// material.envMap = texture
})

二、加载压缩的模型

对于一些占比比较大模型，往往会进行压缩。对于这种压缩的模型，我们直接导入会报错THREE.GLTFLoader: No DRACOLoader instance provided.

这时我们需要使用DRACOLoader（一个用于加载经过Draco压缩的图形库）来处理。

1.导入DRACOLoader

// 解压模型
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

2.创建实例

// 解压模型
const dracoLoader = new DRACOLoader()

3.设置解压路径

//设置解压库的路径
dracoLoader.setDecoderPath('./draco/')

在这里我们需要在node_modules\three\examples\jsm\libs文件下找到draco文件，将改文件复制到public文件下。

4.加载模型

//实例化加载器
const loader = new GLTFLoader()
// 设置解压库
loader.setDRACOLoader(dracoLoader)loader.load('./models/car.glb', function (gltf) {scene.add(gltf.scene)console.log(gltf)
}, undefined, function (error) {console.error(error)
})

5.全部代码

<template>
</template><script setup>
// 导入three
import * as THREE from 'three'  // 导入threejs
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入模型
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
// 解压模型
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'// 创建场景
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x999999)// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 10// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)//辅助坐标系
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement)//自适应窗口
window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)
})// 全景贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('./assets/night.hdr', (texture) => {//设置球型映射texture.mapping = THREE.EquirectangularReflectionMapping // scene.background = texture // 设置背景scene.environment = texture  // 设置环境//反射贴图// material.envMap = texture
})// 解压模型
const dracoLoader = new DRACOLoader()
//设置解压库的路径
dracoLoader.setDecoderPath('./draco/')//实例化加载器
const loader = new GLTFLoader()
// 设置解压库
loader.setDRACOLoader(dracoLoader)
// 加载模型
// loader.load('./models/mingzhu.glb', function (gltf) {
//     scene.add(gltf.scene)//     console.log(gltf)
// }, undefined, function (error) {
//     console.error(error)
// })
loader.load('./models/car.glb', function (gltf) {scene.add(gltf.scene)console.log(gltf)
}, undefined, function (error) {console.error(error)
})// 创建场景fog
scene.fog = new THREE.Fog(0x000000, 0.5, 50)
//创建场景指数雾
// scene.fog = new THREE.FogExp2(0x000000, 0.1)// 渲染循环
function animate() {requestAnimationFrame(animate)renderer.render(scene, camera)
}
animate()</script><style lang="scss" scoped>
</style>