javascript 通过正交摄影机求交

wpx232ag  于 2023-04-04  发布在  Java
关注(0)|答案(2)|浏览(127)

我在我的项目中使用正交摄影机。我的问题是光线投射器。它工作正常,但不正确。对象拾取的不是它的全部宽度或高度。有时它只对对象的一半工作。但是当我通过轨道控制移动摄影机时,光线投射器工作正常。我忘了说我使用GUPicker库
我的项目:https://alovert.ru
默认情况下,相机是透视的,要将其切换为正交,请按键盘上的“O”。
要看到这个问题,你必须点击立方体的边和光束的小边。这样,你就可以添加一个新的对象到场景中。当你尝试添加新对象时,你可以看到一些对象没有相交,直到你移动相机。使用透视相机它工作正常。我感谢任何帮助!x1c 0d1x
我的代码交集

function onMouseClick(e) {
  e.preventDefault();

  mouse.x = e.clientX;
  mouse.y = e.clientY;
  var raymouse = new THREE.Vector2();
  raymouse.x = ((event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width) * 2 - 1;
  raymouse.y = - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1;

  raycaster.setFromCamera(raymouse, activeCamera);

  var intersect = gpuPicker.pick(mouse, raycaster);
}
3phpmpom

3phpmpom1#

请看这个例子:https://threejs.org/examples/#webgl_interactive_cubes_ortho
编码:https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes_ortho.html
试试这个:

var camera = new THREE.OrthographicCamera(0, window.innerWidth, -window.innerHeight, 0, -100, 100);

var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); // create once

...

mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );

var intersects = raycaster.intersectObjects( objects, recursiveFlag );
pbpqsu0x

pbpqsu0x2#

要解决此问题,只需添加这一行

raycaster.ray.origin.set( mouse.x, mouse.y, - 1 ).unproject( camera );

相关问题