请用threejs实现显示场景中一个正方体的本地坐标系并且通过鼠标拖动可以改变显示正方体的角度进而改变显示正方体的本地坐标系

以下是使用Three.js实现显示场景中一个正方体的本地坐标系，并且通过鼠标拖动可以改变显示正方体的角度，进而改变显示正方体的本地坐标系的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Three.js Local Coordinate System</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
        // 创建场景、相机和渲染器
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 创建一个正方体
        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 创建一个本地坐标系
        var axesHelper = new THREE.AxesHelper(2);
        cube.add(axesHelper);

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

        // 创建鼠标控制器
        var controls = new THREE.OrbitControls(camera, renderer.domElement);

        // 渲染场景
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

在这个示例中，我们使用Three.js创建了一个场景，添加了一个正方体和一个本地坐标系。我们还创建了一个相机，并将其放置在场景中适当的位置。使用OrbitControls来实现鼠标拖动控制正方体的角度和本地坐标系的改变。最后，我们使用渲染器将场景渲染到屏幕上

请用threejs实现显示场景中一个正方体的本地坐标系并且通过鼠标拖动可以改变显示正方体的角度进而改变显示正方体的本地坐标系