[游戏开发]vue3.0 + Three.js实现3d动画效果

1.安装依赖

// 引入three.js相关插件

npm install three --save

// 安装轨道控件插件

// npm install three-orbit-controls

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

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

// 安装渲染器插件：

// npm i --save three-css2drender

2.引用

在页面直接引用

import * as Three from ‘three’

定义全局变量（scene, mesh这两个不能在Data中定义，要定义成全局，要不然会报错:
property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value

）

var scene, mesh
data () {
    return {
      camera: null, // 相机
      renderer: null // 加载器
    }
  },

 mounted () {
    this.init() // 初始化函数
    this.animate() // 动画
  },
  methods: {
    init () {
      // 获取实例
      const container = this.$refs.container
      // 创造一个场景
      scene = new Three.Scene()
      // 加载辅助坐标系 实际应用的时候需要注释此代码
      const axisHelper = new Three.AxesHelper(250)
      scene.add(axisHelper)
      // 创造一个几何体BoxGeometry  球体SphereGeometry
      var geometry = new Three.BoxGeometry(100, 100, 100)
      // 获取材质
      var material = new Three.MeshLambertMaterial({
        color: 0x3de4ff
      })
      // 几何体和材质结合
      mesh = new Three.Mesh(geometry, material)
      // 控制位置
      // mesh.position.set(0, 0, 0)
      // mesh.rotation.x = 0.3
      // mesh.rotation.y = 0.5
      // 把网格放到场景中
      scene.add(mesh)
      /**
       * 光源设置
       */
      // 点光源
      var point = new Three.PointLight(0xffffff)
      point.position.set(400, 200, 300) // 点光源位置
      scene.add(point) // 点光源添加到场景中
      // 环境光
      var ambient = new Three.AmbientLight(0x444444)
      scene.add(ambient)
      console.log(scene)
      // 新建相机 PerspectiveCamera是透视相机 OrthographicCamera正射投影相机
      // 第一个参数是视角，第二个参数是横纵比，第三个参数是近面距离，第四个参数是远面距离
      var width = container.clientWidth // 窗口宽度
      var height = container.clientHeight // 窗口高度
      var k = width / height // 窗口宽高比
      var s = 300 // 三维场景显示范围控制系数，系数越大，显示的范围越大
      this.camera = new Three.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
      // 相机位置
      this.camera.position.set(200, 300, 200) // 设置相机位置
      this.camera.lookAt(scene.position) // 设置相机方向(指向的场景对象)
      // // 创造一个渲染器
      this.renderer = new Three.WebGLRenderer({ antialias: true })// 去锯齿
      this.renderer.setSize(container.clientWidth, container.clientHeight)
      this.renderer.setClearColor(0x000000, 1) // 设置背景颜色
      // 把canvas挂载到container中
      container.appendChild(this.renderer.domElement)
},
 animate () {
      requestAnimationFrame(this.animate)
      // mesh.rotation.x += 0.01
      mesh.rotation.y += 0.02
      this.renderer.render(scene, this.camera)
    }
  }