obj模型 vue_Vue使用Three.js加载glTF模型的方法详解

前言

Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形，基于WebGL实现，对WebGL进行了进一步的封装，简化了多数复杂的接口。

Three.js支持包括 .obj、.gltf等类型的模型结构。glTF(GL传输格式)是Khronos的一个开放项目，它为3D资产提供了一种通用的、可扩展的格式，这种格式既高效又与现代web技术高度互操作。

obj格式的模型只支持顶点、法线、纹理坐标和基本材质，而glTF模型除上述所有内容外，glTF还提供了如下功能：

层级对象

场景信息(光源，相机)

骨骼结构与动画

更可靠的材质和着色器

一、安装引入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模型的容器：

页面打开之后，Three.js会给 div 元素添加一个 canvas 子元素用来作为3D模型的画布。