vue-three.js使用解析知识点

three.js库

three.js是JavaScript实现webGl-3D的一个第三方库。
官网：https://threejs.org/
中文网：http://www.webgl3d.cn/

vue中使用three.js库

安装

npm install three --save

组件内引入

import * as Three from 'three';

完整代码示例

<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() {
   
        let container = document.getElementById('container');
 
        this.camera = new Three.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 0.01, 10);
        this.camera.position.z = 1;
 
        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(window.innerWidth, window.innerHeight);
        container.appendChild(this.renderer.domElement); 
    },
    animate() {
   
        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>

轨道控制器OrbitControls

轨道控制器可以使得相机围绕目标进行轨道运动。

this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.minDistance = 18; // 相机最近
this.controls.maxDistance = 500; // 相机最远
this.controls.autoRotate = true; // 自动旋转关闭
this.controls.autoRotateSpeed = 0.8; // 阻尼系数
this.controls.target =