请使用 three.js 创建一个基本的3D立方体，并且让这个立方体在网页加载时围绕Y轴自转。请以markdown的代码块形式输出，代码必须包含必要的注释以便理解。
user
```markdown
// 导入 three.js 库
import * from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; // 导入 OrbitControls 控件，用于视角的自由操控

// 创建场景
const scene = new THREE.Scene();

// 创建一个透视相机并设置其位置
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建一个渲染器，指定渲染使用的浏览器 canvas
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.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);

// 添加 OrbitControls 控制
const controls = new OrbitControls(camera, renderer.domElement);

// 使用请求动画帧的方式实现立方体的自转
function animate() {
    requestAnimationFrame(animate);
    
    // 每次循环时，让立方体围绕 Y 轴旋转
    cube.rotation.y += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
}

// 开启动画帧
animate();
```

以上代码实例展示了一个使用 `three.js` 创建，围绕Y轴自转的立方体。包括了场景、相机、渲染器的初始化，以及几何体和材质的创建过程。同时通过 `animate()` 函数，利用 `requestAnimationFrame` 方法实现动画效果。
assistant