javascript - 单击鼠标更改几何位置

Question

我是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}`);
}

这里也是整个代码的小提琴链接： https ://jsfiddle.net/2jkhqnty/

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

标签： javascriptthree.js3dperspectivecamera