Vue结合Three.js测试demo

1.下载three.js各种插件

首先利用npm安装three.js,具体操作代码如下：

npm i three

利用npm安装轨道控件插件：

npm install three-orbit-controls

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

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

安装渲染器插件：

npm i --save three-css2drender

2.在页面中引入three.js并使用

在所调用页面引入的代码为：

import * as Three from 'three'

3.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,
    };
  },
  methods: {
    init() {
      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();
      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.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>

4.最终效果