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)
})
然后就发现不会报错了,压缩后的模型,也经过解压正常显示在页面中了!
![image-20240220101033158](http://qiniuyun.quancundexiwang.wang/202402201010279.png?imageView2/0/q/50)
完整代码:
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
评论区