如何在Three.js中制作移动/滑动元素？

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

// 创建渲染器
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 5;

// 创建几何体
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 mouseDown = false;
var startX, startY;

function onMouseDown(event) {
  event.preventDefault();
  mouseDown = true;
  startX = event.clientX;
  startY = event.clientY;
}

function onMouseMove(event) {
  event.preventDefault();
  if (!mouseDown) return;

  var deltaX = event.clientX - startX;
  var deltaY = event.clientY - startY;

  cube.position.x += deltaX / 100;
  cube.position.y -= deltaY / 100;

  startX = event.clientX;
  startY = event.clientY;
}

function onMouseUp(event) {
  event.preventDefault();
  mouseDown = false;
}

renderer.domElement.addEventListener('mousedown', onMouseDown);
renderer.domElement.addEventListener('mousemove', onMouseMove);
renderer.domElement.addEventListener('mouseup', onMouseUp);

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

render();