首页 >> js开发 >> JavaScriptVue使用Three.js加载glTF模型的方法详解
JavaScriptVue使用Three.js加载glTF模型的方法详解
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
前言前言前言Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形，基于WebGL实现，对WebGL进行了进一步的封装，简化了多数复杂的接口。Three.js支持包括 .obj、.gltf等类型的模型结构。glTF（GL传输格式）是Khronos的一个开放项目，它为3D资产提供了一种通用的、可扩展的格式，这种格式既高效又与现代web技术高度互操作。obj格式的模型只支持顶点、法线、纹理坐标和基本材质，而glTF模型除上述所有内容外，glTF还提供了如下功能：
层级对象
场景信息（光源，相机）
骨骼结构与动画
更可靠的材质和着色器
层级对象
场景信息（光源，相机）
骨骼结构与动画
更可靠的材质和着色器一、安装引入Three.js一、安装引入Three.js一、安装引入Three.js
npm install three
npm install three在需要使用3D模型的页面导入包：
import * as Three from "three"
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
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
// 导入轨道模型控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls二、页面DOM元素渲染二、页面DOM元素渲染二、页面DOM元素渲染在Vue中，我们需要使用一个 div 元素来作为3D模型的容器：
页面打开之后，Three.js会给 div 元素添加一个 canvas 子元素用来作为3D模型的画布。三、初始化三、初始化三、初始化Three.js中最重要的三大组件:
场景——Scene
相机——Camera
渲染器——Renderer
场景——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;
},
}
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模型四、导入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);
}
)
})
}
}
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);
}
)
})
}
}启动项目，模型导入成功，可以根据自己的需求为模型渲染材质。总结总结总结
层级对象
场景信息（光源，相机）
骨骼结构与动画
更可靠的材质和着色器
层级对象
场景信息（光源，相机）
骨骼结构与动画
更可靠的材质和着色器一、安装引入Three.js一、安装引入Three.js一、安装引入Three.js
npm install three
npm install three在需要使用3D模型的页面导入包：
import * as Three from "three"
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
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
// 导入轨道模型控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls二、页面DOM元素渲染二、页面DOM元素渲染二、页面DOM元素渲染在Vue中，我们需要使用一个 div 元素来作为3D模型的容器：
页面打开之后，Three.js会给 div 元素添加一个 canvas 子元素用来作为3D模型的画布。三、初始化三、初始化三、初始化Three.js中最重要的三大组件:
场景——Scene
相机——Camera
渲染器——Renderer
场景——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;
},
}
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模型四、导入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);
}
)
})
}
}
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);
}
)
})
}
}启动项目，模型导入成功，可以根据自己的需求为模型渲染材质。总结总结总结
相关文章:
- js关于angular浏览器兼容性问题的解决方案js大全
- jsvue中全局路由守卫中替代this操作(this.$store/this.$vux)js大全
- js谈一谈vue请求数据放在created好还是mounted里好js大全
- js解决vue的router组件component在import时不能使用变量问题js大全
- js在vue中使用防抖函数组件操作js大全
- jsVue中的this.$options.data()和this.$data用法说明js大全
- jsElement Breadcrumb 面包屑的使用方法js大全
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
- js解决vuex数据页面刷新后初始化操作js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
