threejs 鼠标点击位置移动

使用Three.js可以轻松实现鼠标点击位置移动的效果。首先，在场景中创建一个3D模型，比如一个立方体或者球体。然后，监听鼠标点击事件，当鼠标在模型上被点击时，获取点击位置的坐标。接着，可以通过修改模型的位置，将模型移动到鼠标点击的位置。

具体的代码可以如下：

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

// 创建一个立方体
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 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

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

// 监听鼠标点击事件
document.addEventListener('click', onDocumentMouseClick, false);

function onDocumentMouseClick(event) {
  // 获取鼠标点击位置的坐标
  var mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 通过鼠标点击位置的坐标获取模型的位置
  var raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(scene.children);
  
  if (intersects.length > 0) {
    // 将模型移动到鼠标点击位置
    var targetPosition = intersects[0].point;
    cube.position.copy(targetPosition);
  }
}

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

以上代码通过监听鼠标点击事件，获取鼠标点击位置的坐标，并将模型移动到该位置。这样，就实现了鼠标点击位置移动的效果。