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

Three.js是一個跨瀏覽器的腳本，使用JavaScript函數庫或API來在網頁瀏覽器中建立和展現動畫的三維計算機圖形，基於WebGL實現，對WebGL進行了進一步的封裝，簡化了多數複雜的接口。

Three.js支持包括 .obj、.gltf等類型的模型結構。glTF（GL傳輸格式）是Khronos的一個開放項目，它爲3D資產提供了一種通用的、可擴展的格式，這種格式既高效又與現代web技術高度互操做。

obj格式的模型只支持頂點、法線、紋理座標和基本材質，而glTF模型除上述全部內容外，glTF還提供了以下功能：

層級對象
場景信息（光源，相機）
骨骼結構與動畫
更可靠的材質和着色器
複製代碼

---

1、安裝引入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 複製代碼

2、頁面DOM元素渲染

在Vue中，咱們須要使用一個 div 元素來做爲3D模型的容器：

<div id="container"></div>
複製代碼

頁面打開以後，Three.js會給 div 元素添加一個 canvas 子元素用來做爲3D模型的畫布。

3、初始化

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;

    },

}
複製代碼

4、導入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);

                }

            )

        })

    }

}
複製代碼

啓動項目，模型導入成功，能夠根據本身的需求爲模型渲染材質。