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

一.加载普通的gltf模型

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

1.导入

javascript 复制代码

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

2.创建实例

javascript 复制代码

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

3.导入模型文件

javascript 复制代码

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

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

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

javascript 复制代码

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

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

javascript 复制代码

// 导入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

javascript 复制代码

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

2.创建实例

javascript 复制代码

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

3.设置解压路径

javascript 复制代码

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

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

4.加载模型

javascript 复制代码

//实例化加载器
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.全部代码

javascript 复制代码

<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.innerHeight
    camera.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>