vue+three.js

创建旋转的小正方体

1.下载three，命令自己百度

2.在项目引用

import * as Three from "three";

3.使用（场景+相机+渲染器必不可少，如果不了解，可以去官网看一下，附上官网地址

Three.js中文文档），一下代码运行完，就可以得到一个正在旋转的正方体

  data() {
    return {
      scene: "",
      camera: "",
      renderer: null,
      mesh: null,
    };
  },
  mounted() {
    this.init();
    this.animate();
  },

  methods: {
    init() {
      let container = document.getElementById("scene_container");
      //设置相机（视野，显示口的宽高比，近裁剪面，远裁剪面）
      this.camera = new Three.PerspectiveCamera(
        70,
        container.clientWidth / container.clientHeight,
        0.1, 1000
      );
      //将相机沿z轴偏移0.6
      this.camera.position.z = 0.6;
      this.scene = new Three.Scene();
      // 设置场景 
     
    //盒子模型（BoxGeometry），这是一个包含立方体所有顶点和填充面的对象。
      let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2 );
       //使用网孔基础材料（MeshBasicMaterial({ color: 0x00ffff })）进行着色器，这里只绘制了一个绿色   MeshNormalMaterial随机色
      let material = new Three.MeshNormalMaterial( );

       //使用网孔(Mesh)来承载几何模型
      this.mesh = new Three.Mesh(geometry, material);
      this.scene.add(this.mesh);

       // 设置渲染器
      this.renderer = new Three.WebGLRenderer();
       //设置渲染器的高度和宽度，如果加上第三个值 false，则按场景大小显示，等比例缩放
      this.renderer.setSize(container.clientWidth, container.clientHeight,false);
      container.appendChild(this.renderer.domElement);
    },

    animate: function () {
      requestAnimationFrame(this.animate);
      this.mesh.rotation.x += 0.02;
      this.mesh.rotation.y += 0.02;
      this.renderer.render(this.scene, this.camera);
    },
  },