相关疑难解决方法(0)

鼠标/画布X,Y到Three.js世界X,Y,Z

我一直在寻找一个与我的用例相匹配的例子,却找不到一个.我正在尝试将屏幕鼠标坐标转换为考虑到相机的3D世界坐标.

解决方案我发现所有人都做射线交叉以实现对象拾取.

我想要做的是将Three.js对象的中心定位在鼠标当前"结束"的坐标上.

我的相机位于x:0,y:0,z:500(虽然它会在模拟过程中移动)并且我的所有物体都在z = 0时具有不同的x和y值,所以我需要知道基于X,Y的世界假设az = 0表示跟随鼠标位置的对象.

这个问题看起来像一个类似的问题,但没有解决方案:在THREE.js中获取鼠标相对于3D空间的坐标

给定屏幕上的鼠标位置,其范围为"左上角= 0,0 |右下角= window.innerWidth,window.innerHeight",任何人都可以提供将Three.js对象移动到鼠标坐标的解决方案沿z = 0？

point projection mouse-coordinates three.js

Rob*_*ans

2019 04-12

57
推荐指数

4
解决办法

5万
查看次数

如何从鼠标单击坐标获取WebGL 3d空间中的对象

我正在WebGL中构建一个桌面游戏.电路板可以旋转/缩放.我需要一种方法将画布元素(x,y)上的点击转换为3D空间(x,y,z)中的相关点.最终结果是我想知道包含触及最靠近用户的对象的点的(x,y,z)坐标.例如,用户点击一块,你想象一条穿过3D空间的光线穿过这件作品和游戏板,但是我希望这件作品的(x,y,z)坐在它的位置.感动.

我觉得这一定是一个非常普遍的问题,但我似乎无法在谷歌中找到解决方案.必须有某种方法将3D空间的当前视图投影到2D中,这样您就可以将2D空间中的每个点映射到3D空间中的相关点.我希望用户能够将鼠标悬停在板上的空间上,并使点变色.

javascript 3d mouse webgl coordinate

sei*_*elj

lucky-day

18
推荐指数

1
解决办法

2万
查看次数

正射相机和用raycast选择对象

我使用raycaster使用正交相机选择对象时遇到了一些困难.虽然,当我使用透视相机时,我没有任何问题.我在两者之间切换时唯一要改变的是型号相机.

我可以在正交视图上选择面部,但它与我点击屏幕的位置只是松散相关.当我可以远离物体点击时它仍然会回来,好像它已经击中了靠近它的中心的物体.

关于我在这里缺少什么的想法？

我在这个例子中基于我的大部分代码,并希望从我的代码中获得非常相似的结果.(这个例子我正在引用透视摄像头)

任何帮助深表感谢

<html>
<head>
  <style>
    canvas {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #111115;
    }
  </style>
</head>
<body id='c'>
  <script src="js/three.js"></script>

  <script>

    var obj = [];
    var mouse ={};
    var zoom = 2;

    var scene = new THREE.Scene();

    //switch between these two and see the difference:
    //var camera =  new THREE.OrthographicCamera(window.innerWidth / -zoom, window.innerWidth / zoom, window.innerHeight / zoom, window.innerHeight / -zoom, -1000, 1000);
    var camera = new THREE.PerspectiveCamera( 45, …

Run Code Online (Sandbox Code Playgroud)

javascript orthographic three.js raycasting

bob*_*2vs

2013 09-01

12
推荐指数

1
解决办法

5795
查看次数