纹理 需要

const texture = textureLoader.load(url);
texture.flipY = false;
texture.encoding = THREE.sRGBEncoding;

加载

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('draco/')

// GLTF loader
const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)

gltfLoader.load(
    'map/0.glb',
    (gltf) => {
        console.log(gltf);
        //可以设置每个mash的纹理
        // gltf.scene.traverse(obj => {
        //     console.log(obj)
        // })
        scene.add(gltf.scene)
    }, (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded'), xhr;
    }
    , (e) => {
        console.error('啊出错了', e)
    }
)

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}
/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.shadowMap.enabled = true;
//!不加颜色变暗
renderer.outputEncoding = THREE.sRGBEncoding;

draco 文件可以​​下载​​ 或者 ​​下载​​

three.js加载glb模型_html5