The glTF model is loaded with three.js in Vue

Three.js is a cross-browser script that uses JavaScript function libraries or APIS to create and display animated 3D computer graphics in web browsers. Based on WebGL implementation, it further encapsulates WebGL and simplifies most complex interfaces.

Three. Js supports.obj,.gltf and other types of model structures. GlTF (GL Transport Format) is an open project of Khronos that provides a common, extensible format for 3D assets that is both efficient and highly interoperable with modern Web technologies.

Obj format models only support vertices, normals, texture coordinates and basic materials, while glTF models provide the following features in addition to all of the above:

Hierarchical object scene information (light source, camera) skeleton structure with animation more reliable materials and shadersCopy the code

---

Install and introduce three.js

npm install three
Copy the code

Import packages on pages where you want to use 3D models:

import * as Three from "three"
Copy the code

To import the glTF model in Vue, use the GLTFLoader in three.js:

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"// Import {OrbitControls} from"three/examples/jsm/controls/OrbitControls
Copy the code

Page DOM element rendering

In Vue, we need to use a div element as a container for the 3D model:

<div id="container"></div>
Copy the code

When the page opens, three. js will add a Canvas child to the div element to be used as the canvas for the 3D model.

Initialization

The Three most important components in three.js are:

Scene Camera Camera Renderer RendererCopy the code

Initialization:

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

    },

    

    initCameraPerspectiveCamera(50, this.width/this.height, 0.01, 500); PerspectiveCamera(50, this.width/this.height, 0.01, 500); this.camera.position.set(-100, 60, 0); },initRenderer() {

      this.renderer = new Three.WebGLRenderer({ antialias: true, alpha: true}); this.renderer.setSize(this.width, this.height); / / compatible high-definition screens enclosing the renderer. SetPixelRatio (window. DevicePixelRatio); / / remove the outer border of the canvas this. The renderer. DomElement accordingly. Style. The outline ="none";

      this.model_container.appendChild(this.renderer.domElement);

    },

    initControls() { this.orbitControls = new OrbitControls( this.camera, this.renderer.domElement ); / / this inertia. OrbitControls. EnableDamping =true; / / this dynamic damping coefficient. OrbitControls. DampingFactor = 0.25; / / scaling of enclosing orbitControls enableZoom =true; / / right drag this. OrbitControls. EnablePan =true; / / the rotation this range. OrbitControls. MaxAzimuthAngle = math.h PI / 6; this.orbitControls.minAzimuthAngle = -Math.PI / 6; / / this vertical rotation range. OrbitControls. MaxPolarAngle = math.h PI / 6; this.orbitControls.minPolarAngle = -Math.PI / 6; }},Copy the code

4. Import glTF model

Place your GLTF model in the public folder of your Vue project. Note that the GLTF model can only be accessed by placing it in the static resources folder.

Mounted hook () :

mounted(){

    this.loadModel()

},

methods:{

    loadModel() {letThat = this // GLTF model loaderlet loader = new GLTFLoader()

        return new Promise(function(resolve, reject){loader.load(// model in /public/static/building/ folder"static/building/scene.gltf", GLTF => {console.log(GLTF) gltf.scene.traverse(object => {// Modify the model texturelet material = ...

                        object.material = material

                    })

                    let group = new Three.Group()

                    group.add(gltf.scene)

                    let box = new Three.Box3()

                    box.setFromObject(group)

                    letWrapper = new three.object3d () wrapper.add(group) // Set the wrapper.position.set(100, -300, 120) // add the model to the scene! important that.scene.add(wrapper) }, XHR => {console.log(' ${(xhr.loaded/xhr.total) * 100% building model loaded '); }, error => {// Model loading error callback function console.log("error while loading", error);

                    reject("load model error", error); })})}}Copy the code

Start the project, the model is imported successfully, and you can render materials for the model according to your own needs.