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


Posted in Javascript onJune 14, 2020

前言

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模型的容器:

<div id="container"></div>

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

三、初始化

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 项目中的 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);

        }

      )

    })

  }

}

启动项目,模型导入成功,可以根据自己的需求为模型渲染材质。

总结

到此这篇关于Vue使用Three.js加载glTF模型的文章就介绍到这了,更多相关Vue用Three.js加载glTF模型内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
JSON格式化输出
Nov 10 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
js如何打印object对象
Oct 16 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 #Javascript
JS定时器如何实现提交成功提示功能
Jun 12 #Javascript
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
ng-alain的sf如何自定义部件的流程
Jun 12 #Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 #Javascript
基于Web Audio API实现音频可视化效果
Jun 12 #Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 #Javascript
You might like
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
javascript动画浅析
2012/08/30 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
开学寄语大全
2014/04/08 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
农村老人去世追悼词
2015/06/23 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS