Three.js实现小米 su7 压缩后的模型加载

预览： https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=basic&id=gltfOptLoader

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { MeshoptDecoder } from "three/examples/jsm/libs/meshopt_decoder.module.js"
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'const box = document.getElementById('box')const scene = new THREE.Scene()const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)camera.position.set(0, 2, 3)const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)const controls = new OrbitControls(camera, renderer.domElement)controls.enableDamping = trueanimate()function animate() {requestAnimationFrame(animate)controls.update()renderer.render(scene, camera)}window.onresize = () => {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect = box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}// HDR
const pmremGenerator = new THREE.PMREMGenerator(renderer);const texture = new RGBELoader().load(`https://file.threehub.cn/` + '/files/hdr/1k.hdr', (t) => {const map = pmremGenerator.fromEquirectangular(t).texturepmremGenerator.dispose()return map})texture.mapping = THREE.EquirectangularReflectionMapping// GLTF
const loader = new GLTFLoader()loader.setMeshoptDecoder(MeshoptDecoder)loader.load(`https://file.threehub.cn/` + 'models/su7/sm_car.gltf', gltf => {scene.add(gltf.scene)gltf.scene.traverse(obj => {if (obj.isMesh) {obj.material.envMap = texture}})})/*** 名称: Opt解压(su7 模型)* 作者: 优雅永不过时 https://github.com/z2586300277
*/