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 相关文章推荐
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
解决Vue项目中tff报错的问题
Oct 21 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
浅谈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使用json_encode对变量json编码
2014/04/07 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python中的元组介绍
2019/01/28 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
德国网上超市:myTime.de
2019/08/26 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
大学毕业感言50字
2014/02/07 职场文书
公证书格式
2015/01/23 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
Python+Appium新手教程
2021/04/17 Python
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
MySQL三种方式实现递归查询
2022/04/18 MySQL
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android