Vue使用Three.js加载glTF模型的方法详解
前言
Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形，基于WebGL实现，对WebGL进行了进一步的封装，简化了多数复杂的接口。
Three.js支持包括.obj、.gltf等类型的模型结构。glTF（GL传输格式）是Khronos的一个开放项目，它为3D资产提供了一种通用的、可扩展的格式，这种格式既高效又与现代web技术高度互操作。
obj格式的模型只支持顶点、法线、纹理坐标和基本材质，而glTF模型除上述所有内容外，glTF还提供了如下功能：
层级对象
场景信息（光源，相机）
骨骼结构与动画
更可靠的材质和着色器
一、安装引入Three.js
npminstallthree
在需要使用3D模型的页面导入包：
import*asThreefrom"three"
在Vue中导入glTF模型需要使用Three.js中的GLTFLoader：
import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader"
//导入轨道模型控制器
import{OrbitControls}from"three/examples/jsm/controls/OrbitControls
二、页面DOM元素渲染
在Vue中，我们需要使用一个div元素来作为3D模型的容器：
页面打开之后，Three.js会给div元素添加一个canvas子元素用来作为3D模型的画布。
三、初始化
Three.js中最重要的三大组件:
场景——Scene
相机——Camera
渲染器——Renderer
初始化：
mounted(){
this.initScene()
this.initContainer()
this.initCamera()
this.initRenderer()
this.initControls()
},
methods:{
initModelContainer(){
this.model_container=document.getElementById("container");
this.model_container.style.height=window.innerHeight+"px";
this.model_container.style.width=window.innerWidth+"px";
this.height=this.model_container.clientHeight;
this.width=this.model_container.clientWidth;
},
initScene(){
this.scene=newThree.Scene();
},
initCamera(){
//照相机
this.camera=newThree.PerspectiveCamera(70,this.width/this.height,0.01,1000);
this.camera.position.set(-100,60,0);
},
initRenderer(){
this.renderer=newThree.WebGLRenderer({antialias:true,alpha:true});
this.renderer.setSize(this.width,this.height);
//兼容高清屏幕
this.renderer.setPixelRatio(window.devicePixelRatio);
//消除canvas的外边框
this.renderer.domElement.style.outline="none";
this.model_container.appendChild(this.renderer.domElement);
},
initControls(){
this.orbitControls=newOrbitControls(
this.camera,
this.renderer.domElement
);
//惯性
this.orbitControls.enableDamping=true;
//动态阻尼系数
this.orbitControls.dampingFactor=0.25;
//缩放
this.orbitControls.enableZoom=true;
//右键拖拽
this.orbitControls.enablePan=true;
//水平旋转范围
this.orbitControls.maxAzimuthAngle=Math.PI/6;
this.orbitControls.minAzimuthAngle=-Math.PI/6;
//垂直旋转范围
this.orbitControls.maxPolarAngle=Math.PI/6;
this.orbitControls.minPolarAngle=-Math.PI/6;
},
}
四、导入glTF模型
将你的gltf模型放在Vue项目中的public文件夹下，注意，只有将gltf模型放在静态资源文件夹下才能被访问到。
在钩子函数mounted中进行模型加载：
mounted(){
this.loadModel()
},
methods:{
loadModel(){
letthat=this
//gltf模型加载器
letloader=newGLTFLoader()
returnnewPromise(function(resolve,reject){
loader.load(
//模型在/public/static/building/文件夹下
"static/building/scene.gltf",
gltf=>{
console.log(gltf)
gltf.scene.traverse(object=>{
//修改模型材质
letmaterial=...
object.material=material
})
letgroup=newThree.Group()
group.add(gltf.scene)
letbox=newThree.Box3()
box.setFromObject(group)
letwrapper=newThree.Object3D()
wrapper.add(group)
//根据自己模型的大小设置位置
wrapper.position.set(100,-300,120)
//将模型加入到场景中!important
that.scene.add(wrapper)
},
xhr=>{
//模型加载期间的回调函数
console.log(`${(xhr.loaded/xhr.total)*100%buildingmodelloaded`
);
},
error=>{
//模型加载出错的回调函数
console.log("errorwhileloading",error);
reject("loadmodelerror",error);
}
)
})
}
}
启动项目，模型导入成功，可以根据自己的需求为模型渲染材质。
总结
到此这篇关于Vue使用Three.js加载glTF模型的文章就介绍到这了,更多相关Vue用Three.js加载glTF模型内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！