纹理 需要
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 文件可以