threejs-加载gltf模型

一、介绍

1.概念

glTF（gl传输格式）是一种开放格式的规范 （open format specification）， 用于更高效地传输、加载3D内容。该类文件以JSON（.gltf）格式或二进制（.glb）格式提供， 外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件可传输一个或多个场景， 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。

2.属性

// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'  
// 导入draco解析器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js' // 实例化gltf加载器
const gltfLoader = new GLTFLoader()// 实例化加载器draco
const dracoLoader = new DRACOLoader()// 设置drace路径
dracoLoader.setDecoderPath('./draco/')// 设置gltf加载器draco的解码器
gltfLoader.setDRACOLoader(dracoLoader)gltfLoader.load('地址', (gltf) => {// 加入场景scene.add(gltf.scene)
})

注意：在使用draco解析器之前需要将node_modules\three\examples\jsm\libs\draco下所有内容复制到public文件下

二、展示

1.效果

2.代码

// 导入threejs文件
import * as three from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 导入GUI
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// 导入draco解析器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
// hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBEloader.js'
// 创建场景
const scene = new three.Scene()
// 创建相机
const camera = new three.PerspectiveCamera(45, //视角 值越多视野越大window.innerWidth / window.innerHeight, //宽高比0.1, //近平面(相机最近能看到的物体)1000 //远平面(相机最远能看到的物体)
)
// 创建渲染器
const renderer = new three.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 设置背景颜色
scene.background = new three.Color(0x999999)
// 实例化gltf加载器
const gltfLoader = new GLTFLoader()
// 实例化加载器draco
const dracoLoader = new DRACOLoader()
// 设置drace路径
dracoLoader.setDecoderPath('./draco/')
// 设置gltf加载器draco的解码器
gltfLoader.setDRACOLoader(dracoLoader)
gltfLoader.load('./textureImage/Flower.glb', (gltf) => {console.log(gltf);// 加入场景scene.add(gltf.scene)
})
gltfLoader.load('./textureImage/BoomBox.glb', (gltf) => {console.log(gltf);// 加入场景gltf.scene.position.set(0.1, 0, 0)scene.add(gltf.scene)scene
})
// 加载hdr贴图
let hdrLoader = new RGBELoader()
let envMap = hdrLoader.load('./textureImage/pz.hdr', (envMap) => {// 设置球形映射envMap.mapping = three.EquirectangularReflectionMapping// 设置环境贴图scene.environment = envMap
})// 相机位置
camera.position.z = 1 //设置在z轴位置
// 看向位置
camera.lookAt(0, 0, 0) //看向原点
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 启用阻尼系数：值越大，阻尼越明显
controls.dampingFactor = 0.5 //设置阻尼值
controls.enableZoom = true // 启用缩放：值为false时禁止缩放
// controls.autoRotate = true // 启用自动旋转：值为true时禁止手动旋转
controls.autoRotateSpeed = 0.5 // 自动旋转速度
// 渲染函数
const animate = () => {controls.update()requestAnimationFrame(animate) //每一帧调用函数// 旋转// cube.rotation.x += 0.01 // X轴转// cube.rotation.y += 0.01 // Y轴转renderer.render(scene, camera) // 重新渲染
}
animate()