DRACO 加载器

推荐：使用NSDT场景编辑器快速搭建3D应用场景

glTF文件也可以使用DRACO库进行压缩，也可以使用glTF加载器加载。在这种情况下，我们可以将 glTF 加载器配置为使用 DRACOLoader 解压缩文件。

需要注意的是，压缩文件并不一定意味着文件将在场景中更快地呈现。虽然压缩的几何图形可以导致文件大小明显减小，但客户端浏览器的CPU将使用更多的时间来解码文件，并且还需要将其他库下载到Web Worker 中以运行解压缩过程。

请参阅下面的示例，显示压缩文件在场景中的出现时间晚于未压缩版本。

所有文件和应用程序都是不同的，如果您想知道压缩是否有利于您的应用程序，则需要测试是否使用压缩。

资源

本课程中使用的3D模型可以使用Blender轻松创建。如果您不想使用Blender来创建模型，则可以从名为的zip文件下载它们。将内容解压缩到文件夹中。

models4.zipmodels4.zip./dist/client/models/

型号4.zip

注意

从 Three 版本 148 开始，您将在文件夹中找到 Draco 库。

.\node_modules\three\examples\jsm\libs\draco\

提示

与其自己托管 Draco 解码器库，您可能会发现从 CDN 下载它们更容易。

例如:

const draco = new DRACOLoader();draco.setDecoderConfig({ type: 'js' });draco.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');

课程脚本

./src/client/client.ts

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import Stats from 'three/examples/jsm/libs/stats.module'

const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
camera.position.z = 2

const renderer = new THREE.WebGLRenderer()
//renderer.physicallyCorrectLights = true //deprecated
renderer.useLegacyLights = false //use this instead of setting physicallyCorrectLights=true property
renderer.shadowMap.enabled = true
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

// Note that since Three release 148, you will find the Draco libraries in the `.\node_modules\three\examples\jsm\libs\draco\` folder.
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/js/libs/draco/')

const loader = new GLTFLoader()
loader.setDRACOLoader(dracoLoader)
loader.load(
    'models/monkey_compressed.glb',
    function (gltf) {
        gltf.scene.traverse(function (child) {
            if ((child as THREE.Mesh).isMesh) {
                const m = child as THREE.Mesh
                m.receiveShadow = true
                m.castShadow = true
            }
            if ((child as THREE.Light).isLight) {
                const l = child as THREE.SpotLight
                l.castShadow = true
                l.shadow.bias = -0.003
                l.shadow.mapSize.width = 2048
                l.shadow.mapSize.height = 2048
            }
        })
        scene.add(gltf.scene)
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
    },
    (error) => {
        console.log(error)
    }
)

window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}

const stats = new Stats()
document.body.appendChild(stats.dom)

function animate() {
    requestAnimationFrame(animate)

    controls.update()

    render()

    stats.update()
}

function render() {
    renderer.render(scene, camera)
}

animate()

由3D建模学习工作室 整理翻译，转载请注明出处！