在vue使用three.js生成一个普通盒子

首先，需要在Vue项目中安装three.js库：

npm install three --save

然后，在Vue组件中引入three.js库和需要使用的对象：

import * as THREE from 'three';

export default {
  mounted() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$el.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    const animate = function () {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();
  },
};

在mounted生命周期函数中，创建了一个场景、相机和渲染器对象，并将渲染器的canvas元素添加到组件的DOM元素中。然后，创建了一个BoxGeometry和MeshBasicMaterial对象，并将它们传递给Mesh对象。最后，启动了一个动画循环，每帧更新盒子的旋转角度，并渲染场景。

最终，Vue组件中会生成一个普通盒子，可以通过旋转和变换等操作来调整盒子的外观。