近来无聊顺便研究一些关于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是否引入成功。页面测试代码如下：
<template><div><divid="container"></div></div></template><script>import*asThreefrom'three'exportdefault{name:'ThreeTest',data(){return{camera:null,scene:null,renderer:null,mesh:null}},methods:{init:function(){letcontainer=document.getElementById('container')this.camera=newThree.PerspectiveCamera(70,container.clientWidth/container.clientHeight,0.01,10)this.camera.position.z=0.6this.scene=newThree.Scene()letgeometry=newThree.BoxGeometry(0.2,0.2,0.2)letmaterial=newThree.MeshNormalMaterial()this.mesh=newThree.Mesh(geometry,material)this.scene.add(this.mesh)this.renderer=newThree.WebGLRenderer({antialias:true})this.renderer.setSize(container.clientWidth,container.clientHeight)container.appendChild(this.renderer.domElement)},animate:function(){requestAnimationFrame(this.animate)this.mesh.rotation.x+=0.01this.mesh.rotation.y+=0.02this.renderer.render(this.scene,this.camera)}},mounted(){this.init()this.animate()}}</script><stylescoped>#container{height:400px;}</style>
注意相关变量的定义容器大小的定义，接下来可以运行当前vue项目，并在浏览器中查看当前效果：出来的效果是一个旋转的正方形，这就表明当前项目已经成功引入three.js并可以运行，剩下的就可以创建场景，打造酷炫的3D效果。
