点击效果.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来当容器的大小
<div>
<div id="container"></div>
</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()
}
}
