扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了vue页面引入three.js如何实现3d动画场景的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
vue中安装Three.js
近来无聊顺便研究一些关于3D图形化库。three.js是JavaScript编写的WebGL第三方库。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。
我们开始引入three.js相关插件。
1、首先利用淘宝镜像，操作命令为：
cnpm install three
2.接下来利用npm安装轨道控件插件：
关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。
npm install three-orbit-controls
3.接下来安装加载.obj和.mtl文件的插件：
npm i --save three-obj-mtl-loader
4.安装渲染器插件：
npm i --save three-css2drender
5、安装好以后，在页面中引入three.js并使用，在所调用页面引入的代码为：
import * as Three from ‘three'
主要插件都已经安装完成了，接下来可以实现一个demo，测试three.js是否引入成功。页面测试代码如下：
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网