vue+three.js 3d动画效果

点击效果.gif

git地址：
https://github.com/yinglichen/3d-animation

1.安装three.js

npm install three 

2.安装轨道控件插件

npm install three-orbit-controls

3.安装加载.obj和.mtl文件的插件

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

4.安装渲染器插件

npm i --save three-css2drender

5.在需要使用到three的页面中引入

import * as Three from 'three'

6.在页面中定义一个div来当容器的大小

7.在script中代码如下：

import * as Three from 'three'   // 引入three
export default {
  data () {
    return {
     camera:null,
     scene:null,
     renderer:null,
     mesh:null
    }
  },
  methods:{
    init(){
      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(){
      requestAnimationFrame(this.animate)
      this.mesh.rotation.x+=0.09
      this.mesh.rotation.y+=0.1
      this.renderer.render(this.scene,this.camera)
    },
  },
  mounted(){
    this.init()
    this.animate()
  }
}