vue页面引入three.js实现3d动画场景操作
vue中安装Three.js
近来无聊顺便研究一些关于3D图形化库。three.js是JavaScript编写的WebGL第三方库。Three.js是一款运行在浏览器中的3D引擎,你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。
我们开始引入three.js相关插件。
1、首先利用淘宝镜像,操作命令为:
cnpminstallthree
2.接下来利用npm安装轨道控件插件:
关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。
npminstallthree-orbit-controls
3.接下来安装加载.obj和.mtl文件的插件:
npmi--savethree-obj-mtl-loader
4.安装渲染器插件:
npmi--savethree-css2drender
5、安装好以后,在页面中引入three.js并使用,在所调用页面引入的代码为:
import*asThreefrom‘three'
主要插件都已经安装完成了,接下来可以实现一个demo,测试three.js是否引入成功。页面测试代码如下:
注意相关变量的定义容器大小的定义,接下来可以运行当前vue项目,并在浏览器中查看当前效果:
出来的效果是一个旋转的正方形,这就表明当前项目已经成功引入three.js并可以运行,剩下的就可以创建场景,打造酷炫的3D效果。
补充知识:vue中three及其依赖引入和使用
官方文档和例子[https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene]
引入
单页面应用
//ES5,相关依赖相同
模块化应用
npm安装
npminstallthree--save
我自己的是适用于require
constTHREE=require('three')//或者
import*asTHREEfrom'three'
官方依赖
各种控制器,加载器,渲染相关先将文件放入相关文件夹都可以通过这种方法引入。也可以使用npm安装,但在依赖多的情况下没必要安装。使用时同官方
import{CSS2DObject,CSS2DRenderer}from'../utils/THREE/CSS2DRenderer.js';
==需要注意应该先在该文件引入varTHREE=require(‘three');因为文件中有对three的使用==
或者是
//官方依赖文档jsm/controls/DragControls.js //引入需要的依赖 import{ EventDispatcher, Matrix4, Plane, Raycaster, Vector2, Vector3 }from"@/build/three.module.js"; .... //最后一步始终是暴露出去 export{DragControls};
相关插件
同样通过npminstallXXX安装后,如精灵字体的three-spritetext,可以实现粗线条的three.meshline,以及常用的dat.gui插件
importSpriteTextfrom'three-spritetext'; varMeshLine=require('three.meshline');//包含了MeshLine,MeshLineMaterial //或者 var{MeshLine,MeshLineMaterial}=require('three.meshline');
其外性能检测插件Stats,不能通过npm安装,可以先下载stats.min.js。
使用:
1、修改为stats.js
2、该文件最后有一句"object"===typeofmodule&&(module.exports=Stats);将其注释
3、最后加上exportdefaultStats
4、importStatsfrom‘…/utils/THREE/stats.js';
经常与stats一起使用的dat需要先通过npm安装再使用
1、npminstalldat.gui
2、vardat=require(“dat.gui”);
以上这篇vue页面引入three.js实现3d动画场景操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。