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模型的画布。
三、初始化</