美文网首页
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://stackoverflow...

  • 4.three.js中的坐标系

    Three.js中的坐标系 three.js中坐标系使用的是左手坐标系 左手坐标系和右手坐标系的对比: three...

  • 3D数学介绍

    多坐标系 摄像机坐标系是和观察者密切相关的坐标系。摄像机坐标系和屏幕坐标系相似,差别在于摄像机坐标系处于3D空间中...

  • 2018-07-19 3D Max抓狂祭

    3d max 3D坐标转4元数,转换代码现成,一个3D坐标对应多个4元数,所以就想直接写回到3d max看下效果。...

  • 世界坐标系互相转换 矩阵相乘顺序

    metal纹理坐标与00点是左上角与opengl相反 3d世界物体转换为设备屏幕需要的转换 为了将坐标从一个坐标系...

  • css变换(transform)--3d变换

    3d坐标除了跟2d坐标一样的x,y轴外,还有一个z轴垂直于屏幕,从屏幕穿出为正方向 3d旋转图中红色的线可以想象为...

  • WebGL(日常疑惑)

    物体绕世界坐标系旋转(three.js) 物体绕世界坐标系旋转

  • 图形学 坐标系空间变换

    3D物体从三维坐标映射到2D屏幕上,要经过一系列的坐标系变换,这些坐标系如下: model物体本身(local)的...

  • Android 屏幕坐标轴 与数学坐标轴的差别

    数学坐标轴 屏幕坐标轴 平移屏幕原坐标到屏幕中心点 如上些图所示,屏幕坐标轴 与数学坐标轴的差别 一下就明了

  • Swift 百度坐标 转 火星坐标

    百度坐标 转 火星坐标 火星坐标 转 百度坐标

网友评论

      本文标题:Three.js屏幕坐标转3d坐标

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