Vue中使用Three.js加載glTF模型

Three.js是一個跨瀏覽器的腳本暇韧，使用JavaScript函數(shù)庫或API來在網(wǎng)頁瀏覽器中創(chuàng)建和展示動畫的三維計算機圖形舷蒲，基于WebGL實現(xiàn)煤裙，對WebGL進行了進一步的封裝楼镐，簡化了多數(shù)復雜的接口扼劈。

Three.js支持包括 .obj、.gltf等類型的模型結(jié)構(gòu)蝌矛。

glTF（GL傳輸格式）是Khronos的一個開放項目道批，它為3D資產(chǎn)提供了一種通用的、可擴展的格式入撒，這種格式既高效又與現(xiàn)代web技術(shù)高度互操作隆豹。

obj格式的模型只支持頂點、法線茅逮、紋理坐標和基本材質(zhì)璃赡，而glTF模型除上述所有內(nèi)容外判哥，glTF還提供了如下功能：

? ? 層級對象

????場景信息（光源，相機）

????骨骼結(jié)構(gòu)與動畫

????更可靠的材質(zhì)和著色器

一碉考、安裝引入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;

??????//?動態(tài)阻尼系數(shù)

??????this.orbitControls.dampingFactor?=?0.25;

??????//?縮放

??????this.orbitControls.enableZoom?=?true;

??????//?右鍵拖拽

??????this.orbitControls.enablePan?=?true;

??????//?水平旋轉(zhuǎn)范圍

? ? ? this.orbitControls.maxAzimuthAngle?=?Math.PI?/?6;

? ? ? this.orbitControls.minAzimuthAngle?=?-Math.PI?/?6;

??????// 垂直旋轉(zhuǎn)范圍

? ? ? this.orbitControls.maxPolarAngle?=?Math.PI?/?6;

? ? ? this.orbitControls.minPolarAngle?=?-Math.PI?/?6;

????},

}

四墙贱、導入glTF模型

將你的 gltf 模型放在 Vue 項目中的 public 文件夾下热芹，注意，只有將 gltf 模型放在靜態(tài)資源文件夾下才能被訪問到惨撇。

在鉤子函數(shù) 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 => {

? ? ? ? ? ? ? ? ? ? ? ? // 修改模型材質(zhì)

? ? ? ? ? ? ? ? ? ? ? ? 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)

? ? ? ? ? ? ? ? ? ? // 根據(jù)自己模型的大小設(shè)置位置

? ? ? ? ? ? ? ? ? ? wrapper.position.set(100, -300, 120)

? ? ? ? ? ? ? ? ? ? // 將模型加入到場景中? ! important

? ? ? ? ? ? ? ? ? ? that.scene.add(wrapper)

????????????????},

? ? ? ? ? ? ? ? xhr => {

? ? ? ? ? ? ? ? ? ? // 模型加載期間的回調(diào)函數(shù)

? ??????????????????console.log(`${(xhr.loaded?/?xhr.total)?*?100%?building?model?loaded`

????????????);

????????????????},

? ? ? ? ? ? ? ? error => {

? ??????????????????// 模型加載出錯的回調(diào)函數(shù)

? ??????????????????console.log("error?while?loading",?error);

????????????????????reject("load?model?error",?error);

????????????????}

? ? ? ? ? ? )

????????})

? ? }

}

啟動項目伊脓，模型導入成功，可以根據(jù)自己的需求為模型渲染材質(zhì)魁衙。