Использование Three.js для загрузки модели glTF в Vue

Vue.js

Three.js — это кроссбраузерный скрипт, который использует библиотеки JavaScript или API для создания и отображения анимированной трехмерной компьютерной графики в веб-браузерах.Он реализован на основе WebGL и дополнительно инкапсулирует WebGL, упрощая большинство сложных интерфейсов.

Three.js поддерживает структуры моделей, включая .obj, .gltf и т. д. glTF (GL Transport Format) — это открытый проект Khronos, предоставляющий общий масштабируемый формат для 3D-ресурсов, который одновременно эффективен и хорошо совместим с современными веб-технологиями.

Модели в формате obj поддерживают только вершины, нормали, текстурные координаты и базовые материалы, тогда как модели glTF помимо всего вышеперечисленного glTF также предоставляет следующие функции:

层级对象
场景信息（光源，相机）
骨骼结构与动画
更可靠的材质和着色器

1. Установите и запустите Three.js

npm install three

Импортируйте пакет на страницу, которая должна использовать 3D-модель:

import * as Three from "three"

Импорт моделей glTF в Vue требует использования GLTFLoader из Three.js:

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, чтобы использовать его в качестве холста для 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;

    },

}

В-четвертых, импортируйте модель glTF

Поместите свою модель gltf в общую папку вашего проекта Vue. Обратите внимание, что только модель gltf будет доступна, если вы поместите ее в папку статических ресурсов.

Загрузка модели в установленную функцию крюка:


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

                }

            )

        })

    }

}

Запустите проект, импорт модели прошел успешно, он может отображать модель материала в соответствии с их потребностями.

Категории