在vue中使用three.js实现基本的动画效果_vue2 tree.js动画

安装依赖

npm i three -D（注意一定不要下成three.js，我就踩了这个坑）
控制移动的效果（放大，360度旋转，平移）依赖安装
npm i three-orbit-controls -D

导入three

import * as THREE from “three”;
const OrbitControls = require(“three-orbit-controls”)(THREE);

初始化场景

      // 创建一个相机 参数：fov、aspect、near、far
      this.camera = new THREE.PerspectiveCamera(30, 1, 0.01, 1000);
      // 相机离屏幕的距离
      this.camera.position.z = 1;
      // 创建场景
      this.scene = new THREE.Scene();
      // 渲染器 参数为obj antialias：true 开启抗锯齿（默认为false）
      this.renderer = new THREE.WebGLRenderer({
    antialias: true });
      this.renderer.setClearColor(0xb9d3ff, 1);
      // 设置渲染大小
      this.renderer.setSize(500, 500);
      this.renderer.render(this.scene, this.camera);
1
2
3
4
5
6
7
8
9
10
11
12
13

添加几何体

      // 创建一个立方体 参数 width、height、depth
      let geometry 
1