美文网首页
Three.js屏幕坐标转3d坐标

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

作者: 苗喵秒 | 来源:发表于2019-12-30 23:11 被阅读0次

    在网上找了好久,终于功夫不负有心人。终于被我找到了。哈哈!
    附上原文链接:
    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坐标

          本文链接:https://www.haomeiwen.com/subject/fisvoctx.html