Draco解析加载压缩过的模型

DracoLoader 一个用于加载经过Draco压缩的图形库。

主要用于压缩和解压缩三维模型及点云。 以客户端上解压缩为代价，显著减少压缩的图形。

这里我们准备了一个经过压缩的 glb 格式的模型，如果直接通过 GLTFLoader 加载的话会报错！

const gltfLoader = new GLTFLoader()
gltfLoader.load('/city.glb', glb => {
	scene.add(glb.scene)
})

那么这就意味着，我们加载的是一个经过Draco压缩过的模型，我们必须通过Draco来解压！

import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; // 引入 loader

// 实例化 loader
const dracoLoader = new DRACOLoader();

内置的解压涉及到了 WASM 来解压，还要指定包含 WASM/JS 解码库的文件夹的路径。

包路径/node_modules/three/examples/jsm/libs/draco 最好复制到项目静态资源目录下去引用！

dracoLoader.setDecoderPath( '/draco/' ); // 设置解码器路径

然后如果你加载的仍是一个glb 格式的那么就设置GLTFLoader 的解码器为dracoLoader

gltfLoader.setDRACOLoader(dracoLoader)
gltfLoader.load('/city.glb', glb => {
	scene.add(glb.scene)
})

然后就发现不会报错了，压缩后的模型，也经过解压正常显示在页面中了！

完整代码：

import { useEffect } from 'react'
import { PerspectiveCamera } from 'three'
import * as THREE from 'three'
import { AxesHelper } from 'three'
import {
	OrbitControls,
	RGBELoader,
} from 'three/examples/jsm/Addons.js'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

const GLTFLoaderDemoPage = () => {
	useEffect(() => {
		const w = window.innerWidth
		const h = window.innerHeight
		// 场景
		const scene = new THREE.Scene()

		// 相机
		const camera = new PerspectiveCamera(45, w / h, 1, 1000)
		camera.position.set(5, 5, 5)
		camera.lookAt(0, 0, 0)

		// 渲染器
		const renderer = new THREE.WebGLRenderer()
		renderer.setSize(w, h)
		document.body.appendChild(renderer.domElement)

		// 辅助器
		const axesHelper = new AxesHelper(10)
		scene.add(axesHelper)
		
		// loader
		const rbgeLoader = new RGBELoader()
		const gltfLoader = new GLTFLoader()
		const dracoLoader = new DRACOLoader();
		dracoLoader.setDecoderPath( '/draco/' );
		gltfLoader.setDRACOLoader(dracoLoader)
		gltfLoader.load('/city.glb', glb => {
			scene.add(glb.scene)
		})
		rbgeLoader.load('/distribution_board_2k.hdr', res => {
			scene.environment = res
			scene.background = res
			res.mapping = THREE.EquirectangularReflectionMapping
		})

		//  控制器 
		const controls = new OrbitControls(camera, renderer.domElement)
		controls.enableDamping = true
		controls.dampingFactor = 0.1

		// 动画帧渲染函数		
		const runRender = () => {
			renderer.render(scene, camera)
			camera.matrixWorldAutoUpdate = true
			controls.update()
			requestAnimationFrame(runRender)
		}

		
		runRender()
		return () => {
			document.body.removeChild(renderer.domElement)
		}
	}, [])
	return <></>
}

export default GLTFLoaderDemoPage