深一互联网站建设怎样移动网站开发环境 主流

        嗨，我是小路。今天主要和大家分享的主题是“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都要同比例缩放）。如果不清楚设置多少的比例，可以参考获取模型长宽高的代码。

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