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

原文地址：https://blog.csdn.net/a2739294436/article/details/142862602

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！