Three.js屏幕坐标转3d坐标

在网上找了好久，终于功夫不负有心人。终于被我找到了。哈哈！
附上原文链接：
https://stackoverflow.com/questions/13055214/mouse-canvas-x-y-to-three-js-world-x-y-z
实现代码：

/**
 * 
 * @param {Number} x 屏幕坐标 x
 * @param {Number} y 屏幕坐标 y
 * @param {Document} domContainer 存放元素的容积
 * @param {THREE.PerspectiveCamera} camera 相机
 * @param {Number} targetZ  z轴 默认为0
 */
screenPointToThreeCoords(x, y, domContainer, camera, targetZ) {
  var vec = new THREE.Vector3(); // create once and reuse
  var pos = new THREE.Vector3(); // create once and reuse

  vec.set(
      ( x / domContainer.clientWidth ) * 2 - 1,
      - ( y / domContainer.clientHeight ) * 2 + 1,
      0.5 );

  vec.unproject( camera );

  vec.sub( camera.position ).normalize();

  var distance = (targetZ - camera.position.z) / vec.z;

  pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );
  return pos;
},

代码解释，网上复制过来的
原文链接
https://discourse.threejs.org/t/project-a-2d-screen-point-to-3d-world-point/5713

As I understand,

after the line:
vec.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
vec is the position of a 3D point (pointA) in space along the ray in Normalized Device Coordinates

after the line:
vec.unproject( camera );
vec is the position of pointA in 3D space in world coordinates

after the line:
vec.sub( camera.position ).normalize();
vec is the normalized ray direction from the camera

after the line:
var distance = ( targetZ - camera.position.z ) / vec.z;
distance is the distance/scale by which to travel along the ray, until reaching a point on the ray which lies in plane z=targetZ

after the line:
pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );
pos is the position of the 3D point (pointB) which lies on the ray and is at z==targetZ
最后附上我设置的

this.subRenderer = new THREE.CSS3DRenderer();
this.subCamera = new THREE.PerspectiveCamera(45, this.$subContainer.clientWidth / this.$subContainer.clientHeight, 1, 10000);
this.subScene = new THREE.Scene();
this.subControls = new THREE.TrackballControls(
  this.subCamera,
  this.subRenderer.domElement,
);
// 重新绘制
subRender() {
  this.subRenderer.render(this.subScene, this.subCamera);
},

祝兄弟早日找到自己想要的答案

Three.js屏幕坐标转3d坐标

推荐阅读更多精彩内容