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)
	  }
	)

	// 实例化解码器draco
	const 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