three.js 第八节 - gltf加载器、解码器

// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入hdr加载器（专门加载hdr的）
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// 导入解码器（在node_modules/three/examples/jsm/libs/draco这里，但是，我们需要把draco文件夹复制到pbulic文件夹种）
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'//#region
const scence = new THREE.Scene()const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设置相机位置
camera.position.set(5, 2, 2)
// camera.lookAt(0, 0, 0)const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
document.body.appendChild(renderer.domElement)
//#endregion// -----------------------------------------------------------------
// -----------------------------------------------------------------// 实例化gltf加载器const gltfLoader = new GLTFLoader()gltfLoader.load(// 模型路径'../public/assets/model/Duck.glb', // （这个模型是没有经过压缩的，所以不需要使用解码器）// 加载完成的回调gltf => {console.log('gltf-Duck=', gltf)scence.add(gltf.scene)})// 实例化解码器dracoconst dracoLoader = new DRACOLoader()// 设置draco路径dracoLoader.setDecoderPath('../public/draco/') // 这里的路径必须进入draco文件夹中【../public/draco/】，否则报错// 设置gltf加载器的解码器gltfLoader.setDRACOLoader(dracoLoader)gltfLoader.load(// 模型路径/*因为`city.glb`是压缩过的，不使用解码器的话就会报错：Error: THREE.GLTFLoader: No DRACOLoader instance provided.所以，就需要解压缩咯*/'../public/assets/model/city.glb',// 加载完成的回调gltf => {console.log('gltf-city=', gltf)scence.add(gltf.scene)})// 加载环境贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('../public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (envMap) => {// 设置球形贴图，否则环境贴图就像一个背景图片似的envMap.mapping = THREE.EquirectangularReflectionMapping// 设置环境贴图scence.environment = envMap
})// 场景fog
scence.fog = new THREE.Fog(0x999999, 0.1, 50) // 参数一：雾的颜色灰色；从0.1米到50米处雾会越来越浓// 指数fog
// scence.fog = new THREE.FogExp2(0x999999, 0.1) // 参数一：雾的颜色灰色；参数二：雾变浓的速度// 给场景scence一个背景颜色（场景的背景色最好是雾的颜色一致），查看雾的效果会更好
scence.background = new THREE.Color(0x999999)// -----------------------------------------------------------------
// -----------------------------------------------------------------//#region
// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05// 每一帧根据控制器更新画面
function render() {// 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`controls.update()// `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染requestAnimationFrame(render)renderer.render(scence, camera)
}
render()
//#endregion