Vue使用Three.js載入glTF模型的方法詳解
前言
Three.js是一個跨瀏覽器的指令碼，使用JavaScript函式庫或API來在網頁瀏覽器中建立和展示動畫的三維計算機圖形，基於WebGL實現，對WebGL進行了進一步的封裝，簡化了多數複雜的介面。
Three.js支援包括 .obj、.gltf等型別的模型結構。glTF（GL傳輸格式）是Khronos的一個開放專案，它為3D資產提供了一種通用的、可擴充套件的格式，這種格式既高效又與現代web技術高度互操作。
obj格式的模型只支援頂點、法線、紋理座標和基本材質，而glTF模型除上述所有內容外，glTF還提供瞭如下功能：
層級物件
場景資訊（光源，相機）
骨骼結構與動畫
更可靠的材質和著色器
一、安裝引入Three.js
npm install three
在需要使用3D模型的頁面匯入包：
import * as Three from "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模型的容器：
<div id="container"></div>
頁面開啟之後，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 = new Three.Scene();
},initCamera() {
// 照相機
this.camera = new Three.PerspectiveCamera(70,this.width / this.height,0.01,1000);
this.camera.position.set(-100,60,0);
},initRenderer() {
this.renderer = new Three.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 = new OrbitControls(
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(){
let that = this
// gltf模型載入器
let loader = new GLTFLoader()
return new Promise(function(resolve,reject){
loader.load(
// 模型在 /public/static/building/資料夾下
"static/building/scene.gltf",gltf => {
console.log(gltf)
gltf.scene.traverse(object => {
// 修改模型材質
let material = ...
object.material = material
})
let group = new Three.Group()
group.add(gltf.scene)
let box = new Three.Box3()
box.setFromObject(group)
let wrapper = new Three.Object3D()
wrapper.add(group)
// 根據自己模型的大小設定位置
wrapper.position.set(100,-300,120)
// 將模型加入到場景中 ! important
that.scene.add(wrapper)
},xhr => {
// 模型載入期間的回撥函式
console.log(`${(xhr.loaded / xhr.total) * 100% building model loaded`
);
},error => {
// 模型加載出錯的回撥函式
console.log("error while loading",error);
reject("load model error",error);
}
)
})
}
}
啟動專案，模型匯入成功，可以根據自己的需求為模型渲染材質。
總結
到此這篇關於Vue使用Three.js載入glTF模型的文章就介紹到這了,更多相關Vue用Three.js載入glTF模型內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！