【Three.js】在Vue中创建三维模型

Three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

项目初始化

【详情】使用可视化面板创建项目vue_threejs_demo
【预设】选择手动配置
【功能】选择Babel、Router、VueX、CSS Pre-processors
【配置】版本选择vue2.x；选择history router；Css预处理语言选择Less
创建项目，不保存为预设，等待npm包安装完成。
安装依赖，选择运行依赖，搜索three，点击安装
运行并启动项目

第一个Three.js案例

在App.vue中实现下方Demo

<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,  //网格模型对象Mesh
    };
  },
  methods: {
    init() {
      // 获取Dom元素节点
      let container = document.getElementById("container");

      // 创建相机
      this.camera = new Three.PerspectiveCamera(
        70, // 视角
        container.clientWidth / container.clientHeight, // 当前屏幕的宽高比
        0.01, // 最近能看到的距离
        1000  // 最远能看到的距离
      );
      this.camera.position.z = 0.6; // 相机位置

      // 创建场景
      this.scene = new Three.Scene();

      // 创建网格模型
      let geometry = new Three.CylinderBufferGeometry(0.2, 0.2, 0.2);
      let material = new Three.MeshNormalMaterial();  // 材质对象Material
      this.mesh = new Three.Mesh(geometry, material); // 网格模型对象Mesh
      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.01;
      this.mesh.rotation.y += 0.02;
      this.renderer.render(this.scene, this.camera); // 绘制界面（场景、相机）
    },
  },
  mounted() {
    this.init();
    this.animate();
  },
};
</script>

<style lang="less" scoped>
#container {
  height: 400px;
}
</style>