新手如何快速用vue导入GLTFLoader模型
admin
2024-02-29 19:33:56
0

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

一、安装引入Three.js

cnpm install three --save // 很好装的最新版本,可正常引入使用

在需要使用3D模型的页面导入包:

import * as Three from "three"

在Vue中导入glTF模型需要使用 Three.js 中的 GLTFLoader:

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
// GLTF加载器(GLTFLoader),用于载入glTF 2.0资源的加载器。
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// OrbitControls是THREEJS中最常用的一个控制器,可以帮助我们实现以目标为焦点的旋转缩放。

二、页面DOM元素渲染

在Vue中,我们需要使用一个 div 元素来作为3D模型的容器:

原理:页面打开之后,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)// 将模型加入到场景中 ! importantthat.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);})})}}

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

五、免费下载3D模型的素材网站

网址一

网址二

相关内容

热门资讯

怎么解除订阅安卓系统,安卓系统... 你是不是也和我一样,手机里订阅了好多服务,结果现在想解除订阅,却一头雾水?别急,今天就来手把手教你如...
安卓系统停用怎么开启,轻松恢复... 亲爱的手机控们,你是否曾经遇到过安卓系统突然停用的情况,让你手忙脚乱,不知所措?别担心,今天就来教你...
安卓系统电池健康度,电池健康度... 你有没有发现,你的安卓手机最近是不是有点儿不给力了?电池续航能力大不如前,充电速度也慢了不少?别急,...
安卓系统按键怎么截图,安卓系统... 你是不是也和我一样,有时候想截个图分享给朋友,却发现安卓手机的截图功能有点神秘呢?别急,今天就来手把...
购票系统安卓源代码,架构设计与... 你有没有想过,那些我们每天离不开的购票系统,它们背后的秘密是什么呢?今天,就让我带你一探究竟,揭开购...
安卓手机系统后台测试,深度解析... 你有没有发现,你的安卓手机后台总是悄悄地忙碌着?别小看了这些后台程序,它们可是手机系统稳定运行的关键...
安卓系统重启的图标,解锁设备新... 手机突然重启,是不是心里有点慌?别急,今天就来和你聊聊安卓系统重启的图标,让你一眼就能认出它,再也不...
车载智慧屏安卓系统,智能出行新... 你有没有发现,现在的车载智慧屏越来越智能了?尤其是那些搭载了安卓系统的,简直就像是个移动的小电脑,不...
安卓系统连上网权限,解锁设备无... 你有没有发现,你的安卓手机里有些应用总是偷偷连上网?别小看这个小小的网络权限,它可是能影响你隐私、消...
安卓谷歌操作系统,探索安卓谷歌... 你知道吗?在智能手机的世界里,有一个操作系统可是无人不知、无人不晓,那就是安卓谷歌操作系统。它就像一...
安卓系统手写%怎样调出,具体实... 你有没有遇到过这种情况:在使用安卓手机的时候,突然想用手写输入法来记录一些灵感或者重要信息,可是怎么...
安卓手机重置 系统设置,轻松恢... 手机用久了是不是感觉卡顿得厉害?别急,今天就来教你怎么给安卓手机来个大变身——重置系统设置!想象你的...
win如何安装安卓系统,Win... 哇,你有没有想过,让你的Win系统也能玩转安卓应用?没错,就是那种在手机上轻松自如的安卓系统,现在也...
苹果qq和安卓系统,跨平台体验... 你有没有发现,现在手机市场上,苹果和安卓的较量可是越来越激烈了呢!咱们就来聊聊这个话题,看看苹果QQ...
显示最好的安卓系统,探索最新旗... 你有没有想过,为什么安卓系统那么受欢迎呢?它就像一个魔法盒子,里面装满了各种神奇的魔法。今天,就让我...
安卓app怎么降级系统,系统版... 你有没有发现,有时候安卓手机的系统更新后,新功能虽然炫酷,但老系统用起来更顺手呢?别急,今天就来教你...
雷军脱离安卓系统,引领科技变革... 你知道吗?最近科技圈可是炸开了锅,因为我们的雷军大大竟然宣布要脱离安卓系统,这可真是让人大跌眼镜啊!...
安卓系统自动开网络,安卓系统自... 你有没有发现,手机里的安卓系统有时候会自动开启网络连接,这可真是让人又爱又恨啊!有时候,你正专心致志...
安卓系统怎样控制后台,因为服务... 手机里的安卓系统是不是感觉越来越卡了?后台程序太多,不仅耗电还影响性能。别急,今天就来教你怎么巧妙地...
安卓系统打游戏推荐,一触即达! 你有没有发现,现在手机游戏越来越好玩了?不管是休闲小游戏还是大型MMORPG,都能在手机上畅玩。但是...