快捷導(dǎo)航

Vue使用Three.js加載glTF模型的方法詳解

更新時(shí)間：2020年06月14日 10:34:05 作者：__Giovanni

這篇文章主要給大家介紹了關(guān)于Vue使用Three.js加載glTF模型的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

Three.js是一個(gè)跨瀏覽器的腳本，使用JavaScript函數(shù)庫(kù)或API來(lái)在網(wǎng)頁(yè)瀏覽器中創(chuàng)建和展示動(dòng)畫(huà)的三維計(jì)算機(jī)圖形，基于WebGL實(shí)現(xiàn)，對(duì)WebGL進(jìn)行了進(jìn)一步的封裝，簡(jiǎn)化了多數(shù)復(fù)雜的接口。

Three.js支持包括 .obj、.gltf等類型的模型結(jié)構(gòu)。glTF（GL傳輸格式）是Khronos的一個(gè)開(kāi)放項(xiàng)目，它為3D資產(chǎn)提供了一種通用的、可擴(kuò)展的格式，這種格式既高效又與現(xiàn)代web技術(shù)高度互操作。

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

層級(jí)對(duì)象
場(chǎng)景信息（光源，相機(jī)）
骨骼結(jié)構(gòu)與動(dòng)畫(huà)
更可靠的材質(zhì)和著色器

一、安裝引入Three.js

npm install three

在需要使用3D模型的頁(yè)面導(dǎo)入包：

import * as Three from "three"

在Vue中導(dǎo)入glTF模型需要使用 Three.js 中的 GLTFLoader：

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
// 導(dǎo)入軌道模型控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls

二、頁(yè)面DOM元素渲染

在Vue中，我們需要使用一個(gè) div 元素來(lái)作為3D模型的容器：

<div id="container"></div>

頁(yè)面打開(kāi)之后，Three.js會(huì)給 div 元素添加一個(gè) canvas 子元素用來(lái)作為3D模型的畫(huà)布。

三、初始化

Three.js中最重要的三大組件:

場(chǎng)景——Scene

相機(jī)——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() {

    // 照相機(jī)

   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;

   // 動(dòng)態(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;

  },

}

四、導(dǎo)入glTF模型

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

在鉤子函數(shù) mounted 中進(jìn)行模型加載：

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)

          // 將模型加入到場(chǎng)景中 ! important

          that.scene.add(wrapper)

        },

        xhr => {

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

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

      );

        },

        error => {

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

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

          reject("load model error", error);

        }

      )

    })

  }

}

啟動(dòng)項(xiàng)目，模型導(dǎo)入成功，可以根據(jù)自己的需求為模型渲染材質(zhì)。

總結(jié)

到此這篇關(guān)于Vue使用Three.js加載glTF模型的文章就介紹到這了,更多相關(guān)Vue用Three.js加載glTF模型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: