threeJs+vue 加载gltf模型、获取模型尺寸、播放模型动画

        嗨，我是小路。今天主要和大家分享的主题是“threeJs+vue 加载gltf模型”。        

加载GLTF模型到基于Three.js和Vue的项目中是一个常见的需求，特别是在开发需要展示高质量3D内容的应用时。下面，我将提供一个详细的指南，帮助你了解如何在Vue项目中使用Three.js加载GLTF模型。

示例效果图

一、主要属性

1.gltf格式

定义：gltf格式就相当于图片的jpg格式一样。并且gltf格式文件中有三种文件.txt、.bin、.gltf。

txt：主要是对文件的一些说明。

.bin：是二进制文件，主要存放着模型的一些顶点书

.gltf:主要是存放的json格式数据，里面有各种模型信息。如控制器、动画、资产，缓冲数据，使用的扩展、贴图图片、模型材料信息、网格、取样器、场景、纹理等。

2.gltf模型加载器

注意：加载模型之后，一些纹理会有偏差，这个时候在渲染时，加入一下代码，解决这个问题。还有模型在加载时，会有三种不同的状态：加载成功、加载中、加载失败。

加载中：用来记录模型加载的进度。当加载大型的模型的时候，可以根据加载的进度，显示在显示条上。

加载完成：是加载成功后对模型进行处理。如模型的位置、模型的大小等等

加载失败：记录失败的原因，便于开发调试。

//解决加载gltf格式模型纹理贴图和原图不一样问题
renderer.outputEncoding = THREE.sRGBEncoding;

// 创建GLTF加载器对象
const loader = new GLTFLoader();

//加载gltf模型
const loadGltfData = () => {
  //加载模型
  modelObj.url && loader.load(modelObj.url, function (gltf) {
    console.log(gltf)
    //加载完成
    //设置模型的位置
    gltf.scene.position.set(10, 0, 0);

    // 播放模型动画 
    if (gltf.animations && gltf.animations.length) {
      mixer = new THREE.AnimationMixer(gltf.scene);
      action = mixer.clipAction(gltf.animations[0]); // 获取第一个动画剪辑
      action.play(); // 播放动画
    }
    //获取模型的长、宽、高
    let scale = getScale(gltf.scene)
    //同比例放大，模型不变形
    gltf.scene.scale.set(scale,scale,scale)
    scene.add(gltf.scene);
  }, function (xhr) {
    //加载时
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  }, function (error) {
    console.log('加载失败', error);
  })
}

3.播放动画

定义：three.js默认加载模型是不播放的，只有自己去设置才能播放。以下是播放的模型动画代码：

// 播放模型动画 
    if (gltf.animations && gltf.animations.length) {
      mixer = new THREE.AnimationMixer(gltf.scene);
      action = mixer.clipAction(gltf.animations[0]); // 获取第一个动画剪辑
      action.play(); // 播放动画
    }

二、实例代码

1、获取模型长宽高

//获取模型长宽高
const getScale = (model)=>{
  // 计算模型的边界框
  const box = new THREE.Box3().setFromObject(model);
  
  // 获取边界框的尺寸
  const size = new THREE.Vector3();
  box.getSize(size);
  console.log('height',height)
  console.log('width',width)
  console.log('x',size.x)
  console.log('y',size.y)
  console.log('z',size.z)
  //以屏幕的一般高度为放缩比例
  let scale = (height/2)/size.z;
  console.log('scale',scale)
  return scale;
}

2、示例代码

<template>
  <div class="pageBox">
    <div class="leftBox" ref="leftRef"></div>
    <div class="rightBox" ref="rightRef" :style="{ background: bgColor }"></div>
  </div>

</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import * as THREE from 'three';
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 设置相机控件轨道控制器OrbitControls

// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const bgColor = ref("")
//实例化一个gui对象
// const gui = new GUI();

const leftRef = ref();
const rightRef = ref()
// 定义相机输出画布的尺寸(单位:像素px)
let width = 800; //宽度
let height = window.innerHeight; //高度
// 创建3D场景对象Scene
const scene = new THREE.Scene();
//设置背景色
scene.background = new THREE.Color("#ffffff");

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(50, width / height, 2, 6000);

//=======================================================
const spotLight = new THREE.SpotLight(0xffffff, 1.0);

const clock = new THREE.Clock();

//===============================================
// 创建GLTF加载器对象
const loader = new GLTFLoader();

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();

const modelObj = reactive({ index:1,url: './models/gir2/scene.gltf' });

onMounted(() => {

  initData()
  render();

  //添加相机空间
  const controls = new OrbitControls(camera, renderer.domElement);
  // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
  controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
  });//监听鼠标、键盘事件

})
const initData = () => {
  //环境光:没有特定方向，整体改变场景的光照明暗
  const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient);

  scene.add(spotLight);//光源添加到场景中
  // 根据需要设置相机位置具体值
  camera.position.set(200, 200, 200);

  loadGltfData();

  renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
  //将innerHTML置空，避免append重复添加渲染
  leftRef.value.innerHTML = ''
  leftRef.value.append(renderer.domElement);
}


let mixer = "";
let action = "";

//加载gltf模型
const loadGltfData = () => {
  modelObj.url && loader.load(modelObj.url, function (gltf) {
    console.log(gltf)
    //加载完成
    //设置模型的位置
    gltf.scene.position.set(10, 0, 0);

    // 播放模型动画 
    if (gltf.animations && gltf.animations.length) {
      mixer = new THREE.AnimationMixer(gltf.scene);
      action = mixer.clipAction(gltf.animations[0]); // 获取第一个动画剪辑
      action.play(); // 播放动画
    }
    //获取模型的长、宽、高
    let scale = getScale(gltf.scene)
    //同比例放大，模型不变形
    gltf.scene.scale.set(scale,scale,scale)
    scene.add(gltf.scene);
  }, function (xhr) {
    //加载时
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  }, function (error) {
    console.log('加载失败', error);
  })
}
//获取模型长宽高
const getScale = (model)=>{
  // 计算模型的边界框
  const box = new THREE.Box3().setFromObject(model);
  
  // 获取边界框的尺寸
  const size = new THREE.Vector3();
  box.getSize(size);
  console.log('height',height)
  console.log('width',width)
  console.log('x',size.x)
  console.log('y',size.y)
  console.log('z',size.z)
  //以屏幕的一般高度为放缩比例
  let scale = (height/2)/size.z;
  console.log('scale',scale)
  return scale;
}

//渲染
const render = () => {
  //解决加载gltf格式模型纹理贴图和原图不一样问题
  renderer.outputEncoding = THREE.sRGBEncoding;
  mixer ? mixer.update(clock.getDelta()) : null;
  renderer.render(scene, camera); //执行渲染操作
  //重复渲染
  requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}

</script>
<style scoped lang="less">
.pageBox {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .rightBox {
    width: 100%;
    height: 100%;
    background: yellow;
  }
}
</style>

三、注意事项  

1.光源一定要添加

注意：大部分的材料都是和光相关的材料，所以在添加模型时，需要添加光源，这样模型才会显示正常的颜色，不然模型会呈现黑色。

2.设置模型的大小

注意：屏幕的宽度会随着屏幕的宽度进行变动，一般设置都是按照屏幕的高度，等比例缩放（x、y、z都要同比例缩放）。如果不清楚设置多少的比例，可以参考获取模型长宽高的代码。

都看到这里了，记得【点赞】+【关注】哟。