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来当容器的大小

<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()
  }
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、首先利用淘宝镜像,操作命令为: cnpm install three2.接下来利用npm安装轨道控件插件: n...
    泪滴在琴上阅读 11,141评论 2 4
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,842评论 1 45
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,160评论 1 32
  • 一句话总结:最值得投资的是自己。自己的成长才是人生最大的收获 本文讲了什么: 跨越10年的长度来看投资自己的价值...
    西河东阅读 340评论 2 1
  • 敬爱的李老师、智慧的马教授、大爱的王院长,亲爱的跃友们,大家晚上好,我是长兴南方医院的祁运腾,我是王院长的人今天是...
    祁运腾阅读 172评论 0 1