单击鼠标更改几何位置

如何解决单击鼠标更改几何位置

我是three.js 的新手，我想把模型放在我用鼠标点击的地方。我面临的问题是我想将 2D x,y 画布点转换为 3D x,y 世界点（使用透视相机）。这似乎是重复的，但这些答案现在已被弃用，或者它们不完全是我所需要的。

这是 JS 代码，它可以完成我想要的操作，例如在鼠标单击时放置几何图形，但它也会改变视角。我不希望它这样做。

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

document.addEventListener("mousedown",onMouseDown);

function onMouseDown(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse,camera);

  var dist = Box.position.clone().sub(camera.position).length();

  raycaster.ray.at(dist,Box.position);
  console.log(`mouse.x: ${event.clientX} mouse.y: ${event.clientY}`);
}

还有整个代码的 fiddle 链接： https://jsfiddle.net/2jkhqnty/

P.S：如果我无法正确表达我的问题，请提前道歉，如果有人可以指导我方向或给出解决方案，我将不胜感激。 TIA