给一个vue下的three.js基础案例

A：下面是一个使用Vue和Three.js创建基本场景的示例：

<template>
  <div ref="canvasWrapper"></div>
</template>

<script>
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({ antialias: true });

    // 设置渲染器大小并添加到DOM中
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.canvasWrapper.appendChild(renderer.domElement);

    // 添加一个立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 设置相机位置
    camera.position.z = 5;

    // 渲染循环
    const animate = () => {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };

    animate();
  },
};
</script>

<style>
canvas {
  width: 100%;
  height: 100%;
}
</style>

该示例创建一个简单的场景，其中包含一个旋转的绿色立方体。要使用该示例，请在Vue组件的`mounted`方法中添加上述代码。该代码生成一个WebGL渲染器并将其添加到Vue组件的DOM元素中。然后，该代码定义了一个立方体网格和渲染循环以使立方体旋转。