three.js鼠标移动绘制圆行

你可以使用Three.js库来实现鼠标移动绘制圆的效果。下面是一个简单的示例代码，你可以参考：

// 创建场景、相机和渲染器
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 material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
var geometry = new THREE.CircleGeometry(1, 32);

// 创建圆的网格对象
var circle = new THREE.LineLoop(geometry, material);
scene.add(circle);

// 监听鼠标移动事件
document.addEventListener('mousemove', onMouseMove, false);

// 鼠标移动事件处理函数
function onMouseMove(event) {
    // 获取鼠标位置的归一化设备坐标(NDC)
    var mouse = {
        x: (event.clientX / window.innerWidth) * 2 - 1,
        y: -(event.clientY / window.innerHeight) * 2 + 1
    };

    // 将鼠标位置转换为3D空间中的坐标
    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
    vector.unproject(camera);
    var dir = vector.sub(camera.position).normalize();
    var distance = -camera.position.z / dir.z;
    var pos = camera.position.clone().add(dir.multiplyScalar(distance));

    // 更新圆的位置
    circle.position.copy(pos);
}

// 渲染循环
function animate() {
    requestAnimationFrame(animate);    renderer.render(scene, camera);
}
animate();

这段代码创建了一个Three.js场景，相机和渲染器。它还创建了一个圆的几何体和一个材质，并将它们组装成一个圆的网格对象。然后，它监听鼠标移动事件，并在鼠标移动时更新圆的位置。最后，它使用渲染循环来实时渲染场景。

你可以根据自己的需要，调整圆的半径、颜色、线宽等参数来实现你想要的效果。希望对你有所帮助！