vue页面引入three.js创造3d动画场景

vue中安装Three.js

近来无聊顺便研究一些关于3D图形化库。three.js是JavaScript编写的WebGL第三方库。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。

首先利用创建一个Vue工程

若对创建vue工程有疑惑，可以参考我前面的博文：手把手教你利用脚手架搭建一个Vue工程，搭建好以后，我们开始引入three.js相关插件。
1.首先利用npm安装three.js,具体操作代码如下：

npm install three

若安装了淘宝镜像，则操作命令为：

cnpm install three

2.接下来利用npm安装轨道控件插件：

npm install three-orbit-controls

3.接下来安装加载.obj和.mtl文件的插件：

npm i --save three-obj-mtl-loader

4.安装渲染器插件：

npm i --save three-css2drender

安装好以后，在页面中引入three.js并使用，在所调用页面引入的代码为：

import * as Three from 'three'

主要插件都已经安装完成了，接下来可以实现一个demo，测试three.js是否引入成功。页面测试代码如下：

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
  import * as Three from 'three'

  export default {
    name: 'ThreeTest',
    data () {
      return {
        camera: null,
        scene: null,
        renderer: null,
        mesh: null
      }
    },
    methods: {
      init: function () {
        let container = document.getElementById('container')
        this.camera = new Three.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10)
        this.camera.position.z = 0.6
        this.scene = new Three.Scene()
        let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2)
        let material = new Three.MeshNormalMaterial()
        this.mesh = new Three.Mesh(geometry, material)
        this.scene.add(this.mesh)

        this.renderer = new Three.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.01
        this.mesh.rotation.y += 0.02
        this.renderer.render(this.scene, this.camera)
      }
    },
    mounted () {
      this.init()
      this.animate()
    }
  }
</script>
<style scoped>
  #container {
    height: 400px;
  }
</style>

注意相关变量的定义容器大小的定义，接下来可以运行当前vue项目，并在浏览器中查看当前效果：

出来的效果是一个旋转的正方形，这就表明当前项目已经成功引入three.js并可以运行，剩下的就可以创建场景，打造酷炫的3D效果。