前言

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模型內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！