Three.js 模型加载及加载简单动画

时间过的好快啊~再一次感叹，忙忙碌碌一年又过去了，新年第一帖，新的一年也要加油呀！

简单介绍下Three.js吧，Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。因为使用简单，入门比较容易。

Three.js的具体介绍和使用有很多教程，可以根据自己需要搜索。它重要的三个属性：场景（scene），相机（camera），渲染器（renderer），组合构成一个三维画面。

创建一个div容器，用于加载模型

 <div v-loading="loadModel"element-loading-text="模型渲染中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0)"ref="threeBox"class="three-box" />

初始化数据

 loadModel: true, // 模型加载状态scene: null, // 3D模型场景camera: null, // 摄像机renderer: null, // 渲染器mixer: null, // 动画帧clock: null, // 锁glbLoader: null,dracoLoader: null,

渲染模型

// 渲染模型init() {// eslint-disable-next-line @typescript-eslint/no-this-aliasconst self = this;self.scene = new THREE.Scene();self.camera = new THREE.PerspectiveCamera(45, self.$refs.threeBox.clientWidth / self.$refs.threeBox.clientHeight, 0.1, 10000);self.renderer = new THREE.WebGLRenderer();self.renderer.setClearColor('0xffffff', 0);self.renderer.setSize(self.$refs.threeBox.clientWidth * 1.07, self.$refs.threeBox.clientHeight);self.$refs.threeBox.appendChild(this.renderer.domElement);// self.scene.add(new THREE.AxesHelper(1000));self.controls = new OrbitControls(self.camera, self.renderer.domElement);self.controls.target.set(0, 0, 0);self.controls.update();const boxHelper = new THREE.BoxHelper();// 加载glb模型const fbxLoader = new FBXLoader();const actives = [];self.glbLoader = new GLTFLoader();self.dracoLoader = new DRACOLoader();self.dracoLoader.setDecoderPath('draco/');self.dracoLoader.setDecoderConfig({ type: 'js' });self.dracoLoader.preload();self.glbLoader.setDRACOLoader(self.dracoLoader);self.glbLoader.load(self.modelPath, (obj) => {const object = obj.scene;boxHelper.setFromObject(object);const { center } = boxHelper.geometry.boundingSphere;const { radius } = boxHelper.geometry.boundingSphere;const cameraPos = new THREE.Vector3(center.x + object.position.x, center.y + object.position.y, radius * 2.2 + center.z + object.position.z);const lookPos = new THREE.Vector3(center.x + object.position.x, center.y + object.position.y, center.z - object.position.z);object.rotation.y = (-90 * Math.PI) / 180;object.rotation.z = (-45 * Math.PI) / 180;self.camera.position.copy(cameraPos);self.controls.target = lookPos;self.camera.lookAt(lookPos);self.scene.add(object);self.loadModel = false;// 加载动画帧self.mixer = new THREE.AnimationMixer(object);obj.animations.forEach((item) => {actives.push(self.mixer.clipAction(item));});actives[0].play();});// 环境光const ambient = new THREE.AmbientLight(0xffffff);this.scene.add(ambient);// 点光源const point1 = new THREE.PointLight(0xD3D3D3);point1.position.set(200, 400, 300);self.scene.add(point1);const point2 = new THREE.PointLight(0xD3D3D3);point2.position.set(-200, -400, -300);self.scene.add(point2);self.camera.position.set(100, 200, 300);self.camera.lookAt(0, 0, 0);},

其中modelPath是放在public下面的模型路径，这里以glb模型为例，可以改为自己对应的glb模型地址。该模型中里面包含了动画，在加载完模型的时候，加载动画帧（mixer）

modelPath: '/model/model-processed.glb', // glb模型路径

加载动画

 // 加载动画animate() {if (this.mixer) {this.mixer.update(this.clock.getDelta());}requestAnimationFrame(this.animate);this.renderer.clear();this.renderer.render(this.scene, this.camera);this.renderer.clearDepth();},

初始化调用

mounted() {this.$nextTick(() => {this.clock = new THREE.Clock();this.init();this.animate();});},

最终效果图

Three.js 模型加载及加载简单动画相关推荐

Ext JS 4倒计时：动态加载和新的类系统
Today we're excited to release the first in a series of brand new features in Ext JS 4. Over the nex ...
three.js的demo例子-STL加载对象组件
three.js的demo例子-STL加载对象组件提示:demo示例中所涉及到的three.js安装插件方法这里就不单个说明了哈,有需要的网上有很多教程文章目录 three.js的demo例子-S ...
html文件显示不了box,Workbox.js registerNavigationRoute找不到/加载html文件
我几乎完全设置为具有应用程序shell体系结构的pwa,使用像前端(但使用mithril作为渲染引擎)的反应,并使用express node.js后端和ssr,但努力在最后一个问题上过去.Workbo ...
R语言广义加性模型（GAMs：Generalized Additive Model）建模：数据加载、划分数据、并分别构建线性回归模型和广义线性加性模型GAMs、并比较线性模型和GAMs模型的性能
R语言广义加性模型(GAMs:Generalized Additive Model)建模:数据加载.划分数据.并分别构建线性回归模型和广义线性加性模型GAMs.并比较线性模型和GAMs模型的性能目录
keras/tensorflow 模型保存后重新加载准确率为0 model.save and load giving different result
我在用别人的代码跑程序的时候遇到了这个问题: keras 模型保存后重新加载准确率为0 GitHub上有个issue:model.save and load giving different resu ...
如何使用echo.js实现图片的懒加载（整理）
如何使用echo.js实现图片的懒加载(整理) 一.总结一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
Windows下使用apache模块实现合并多个js、css提高网页加载速度
这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下现在的网站表现力越来越丰富,页 ...
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...
JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)
//平台.设备和操作系统var system ={win : false,mac : false,xll : false};//检测平台var p = navigator.platform;syste ...

Three.js 模型加载及加载简单动画

Three.js 模型加载及加载简单动画相关推荐

最新文章

热门文章