只有投影矩阵的Three.js中的Raycast [英] Raycast in Three.js with only a projection matrix

问题描述

我正在

不幸的是，当我尝试添加光线投射时，出现错误:

  raycast(point){var mouse = new THREE.Vector2();mouse.x =(point.x/this.map.transform.width)* 2-1;mouse.y = 1-(point.y/this.map.transform.height)* 2;const raycaster =新的THREE.Raycaster();raycaster.setFromCamera(mouse，this.camera);console.log(raycaster.intersectObjects(this.scene.children，true));} 

这给了我一个例外:

  THREE.Raycaster:不支持的摄像机类型. 

我可以从普通的 THREE.Camera 更改为 THREE.PerspectiveCamera ，而不会影响场景的渲染:

  this.camera = new THREE.PerspectiveCamera(28，window.innerWidth/window.innerHeight，0.1，1e6); 

这可以修复异常，但也不会导致记录任何对象.稍微挖掘一下即可发现相机的 projectionMatrixInverse 都是 NaN ，我们可以通过计算来解决:

  raycast(point){var mouse = new THREE.Vector2();mouse.x =(point.x/this.map.transform.width)* 2-1;mouse.y = 1-(point.y/this.map.transform.height)* 2;this.camera.projectionMatrixInverse.getInverse(this.camera.projectionMatrix);//<-const raycaster =新的THREE.Raycaster();raycaster.setFromCamera(mouse，this.camera);console.log(raycaster.intersectObjects(this.scene.children，true));} 

现在，无论单击何处，我都会得到两个相交点，分别是立方体的两个面.他们的距离是0:

  [{距离:0，faceIndex:10，点:Vector3 {x:0，y:0，z:0}，uv:Vector2 {x:0.5，y:0.5}，...}，{距离:0，faceIndex:11，点:Vector3 {x:0，y:0，z:0}，uv:Vector2 {x:0.5，y:0.5}，...}，] 

很明显，这里有些东西行不通.查看用于 setCamera的代码 ，它涉及到 projectionMatrix 和 matrixWorld .有没有一种方法可以设置 matrixWorld ，或仅使用投影矩阵直接构造光线投射器的光线?看来我只需要投影矩阵即可渲染场景，所以我希望它也将是我投射光线的全部.

完整示例此codepen中的.

解决方案

难以调试，但已解决！

TL; DR:此正常工作中的完整代码小提琴.

1. 我认为，没有MapBox相机的世界矩阵不是主要问题，而是坐标空间的不兼容.Mapbox提供了一个左手系统，其中 z 朝上.三个使用右手系统，且 y 朝上.

2. 在调试过程中，我创建了raycaster安装程序函数的精简副本，以使所有内容均受控制，并且还清了.

3. 多维数据集不是调试的最佳对象，它太对称了.最好的是非对称图元或复合对象.我更喜欢使用3D坐标十字来看到轴的方向.

坐标系

• 不需要更改 BoxCustomLayer 构造函数中的 DefaultUp ，因为目标是使所有内容与三"中的默认坐标对齐.
• 您可以在 onAdd()方法中翻转y轴，但是在初始化组时还可以缩放所有对象.这样，在 raycast()中对投影进行反转后，您所使用的坐标不再以米为单位.因此，让我们将扩展部分与 this.cameraTransform 一起加入.左手到右手的转换也应该在这里完成.我决定翻转z轴并沿x轴旋转90度，以获得y朝上的右手系统:

  const centerLngLat = map.getCenter();this.center = MercatorCoordinate.fromLngLat(centerLngLat，0);const {x，y，z} = this.center;const s = this.center.meterInMercatorCoordinateUnits();const scale = new THREE.Matrix4().makeScale(s，s，-s);const rotation = new THREE.Matrix4().multiplyMatrices(新的THREE.Matrix4().makeRotationX(-0.5 * Math.PI)，新的THREE.Matrix4().makeRotationY(Math.PI));//可选的Y旋转this.cameraTransform =新的THREE.Matrix4().multiplyMatrices(比例，旋转).setPosition(x，y，z); 

3. 确保从 makeScene 中的组中删除缩放比例，实际上，您不再需要该组.

4. 无需触摸 render 功能.

射线广播

这里有点棘手，基本上是 Raycaster 会做的事情，但是我省略了一些不必要的函数调用，例如相机世界矩阵为恒等=>无需与之相乘.

1. 获取投影矩阵的逆矩阵.分配 Object3D.projectionMatrix 时，它不会更新，因此让我们手动对其进行计算.
2. 使用它来获取3D相机和鼠标的位置.这等效于 Vector3.unproject .
3. viewDirection 只是从 cameraPosition 到 mousePosition 的归一化向量.

  const camInverseProjection =新的THREE.Matrix4().getInverse(this.camera.projectionMatrix);const cameraPosition =新的THREE.Vector3().applyMatrix4(camInverseProjection);const mousePosition =新的THREE.Vector3(mouse.x，mouse.y，1).applyMatrix4(camInverseProjection);const viewDirection = mousePosition.clone().sub(cameraPosition).normalize(); 

4. 设置光线投射器光线

  this.raycaster.set(cameraPosition，viewDirection); 

5. 其余的可以保持不变.

完整代码

小提琴进行演示.

• 我添加了 mousemove 以使用 jQuery 显示实时调试信息.
• 点击后，有关匹配的完整信息将记录到控制台.

I'm rendering some custom layers using Three.js in a Mapbox GL JS page following this example. I'd like to add raycasting to determine which object a user has clicked on.

The issue is that I only get a projection matrix from Mapbox, which I use to render the scene:

class CustomLayer {
  type = 'custom';
  renderingMode = '3d';

  onAdd(map, gl) {
    this.map = map;
    this.camera = new THREE.Camera();
    this.renderer = new THREE.WebGLRenderer({
      canvas: map.getCanvas(),
      context: gl,
      antialias: true,
    });
    this.scene = new THREE.Scene();
    // ...
  }

  render(gl, matrix) {
    this.camera.projectionMatrix = new THREE.Matrix4()
      .fromArray(matrix)
      .multiply(this.cameraTransform);
    this.renderer.state.reset();
    this.renderer.render(this.scene, this.camera);
  }
}

This renders just great, and tracks changes in view when I pan/rotate/zoom the map.

Unfortunately, when I try to add raycasting I get an error:

  raycast(point) {
    var mouse = new THREE.Vector2();
    mouse.x = ( point.x / this.map.transform.width ) * 2 - 1;
    mouse.y = 1 - ( point.y / this.map.transform.height ) * 2;
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, this.camera);
    console.log(raycaster.intersectObjects(this.scene.children, true));
  }

This gives me an exception:

THREE.Raycaster: Unsupported camera type.

I can change from a generic THREE.Camera to a THREE.PerspectiveCamera without affecting the rendering of the scene:

this.camera = new THREE.PerspectiveCamera(28, window.innerWidth / window.innerHeight, 0.1, 1e6);

This fixes the exception but also doesn't result in any objects being logged. Digging a bit reveals that the camera's projectionMatrixInverse is all NaNs, which we can fix by calculating it:

  raycast(point) {
    var mouse = new THREE.Vector2();
    mouse.x = ( point.x / this.map.transform.width ) * 2 - 1;
    mouse.y = 1 - ( point.y / this.map.transform.height ) * 2;
    this.camera.projectionMatrixInverse.getInverse(this.camera.projectionMatrix);  // <--
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, this.camera);
    console.log(raycaster.intersectObjects(this.scene.children, true));
  }

Now I get two intersections wherever I click, with two faces of the cube. Their distances are 0:

[
  { distance: 0, faceIndex: 10, point: Vector3 { x: 0, y: 0, z: 0 }, uv: Vector2 {x: 0.5, y: 0.5}, ... },
  { distance: 0, faceIndex: 11, point: Vector3 { x: 0, y: 0, z: 0 }, uv: Vector2 {x: 0.5, y: 0.5}, ... },
]

So clearly something isn't working here. Looking at the code for setCamera, it involves both projectionMatrix and matrixWorld. Is there a way I can set matrixWorld, or construct the raycaster's ray directly using only the projection matrix? It seems that I only need the projection matrix to render the scene, so I'd hope that it would also be all I need to cast a ray.

Full example in this codepen.

解决方案

Difficult to debug, but solved!

TL;DR: Full code in this working Fiddle.

1. I think that not having the world matrix of the camera from MapBox is not the main problem, rather the incompatibility of the coordinate spaces. Mapbox delivers a left-handed system with z pointing up. Three uses a right-handed system with y pointing up.

2. During the debugging I created a reduced copy of the raycaster setup functions to have everything under control and it paid off.

3. A cube is not the best object for debugging, It is way too symmetric. The best are asymmetric primitives or compound objects. I prefer a 3D coordinate cross to see the axes orientation straight away.

Coordinate systems

• There is no need for changing the DefaultUp in the BoxCustomLayer constructor, since the goals is to have everything aligned with the default coordinates in Three.
• You flip the y-axis in the onAdd() method, but then you also scale all objects when initializing the group. This way, the coordinates you operate in after inverting the projection in raycast() are not in meters anymore. So let's join that scaling part with this.cameraTransform. The left-handed to right-handed conversion should be done here as well. I decided to flip the z-axis and rotate 90deg along x-axis to get a right-handed system with y pointing up:

const centerLngLat = map.getCenter();
this.center = MercatorCoordinate.fromLngLat(centerLngLat, 0);
const {x, y, z} = this.center;

const s = this.center.meterInMercatorCoordinateUnits();

const scale = new THREE.Matrix4().makeScale(s, s, -s);
const rotation = new THREE.Matrix4().multiplyMatrices(
        new THREE.Matrix4().makeRotationX(-0.5 * Math.PI),
        new THREE.Matrix4().makeRotationY(Math.PI)); //optional Y rotation

this.cameraTransform = new THREE.Matrix4()
        .multiplyMatrices(scale, rotation)
        .setPosition(x, y, z);

3. Make sure to remove the scaling from the group in makeScene , in fact you don't need the group anymore.

4. No need to touch the render function.

Raycasting

Here it gets a bit tricky, basically it's what Raycaster would do, but I left out some unnecessary function calls, e.g. the camera world matrix is identity => no need to multiply with it.

1. Get the inverse of the projection matrix. It does not update when Object3D.projectionMatrix is assigned, so let's compute it manually.
2. Use it to get the camera and mouse position in 3D. This is equivalent to Vector3.unproject.
3. viewDirection is simply the normalized vector from the cameraPosition to the mousePosition.

const camInverseProjection = 
        new THREE.Matrix4().getInverse(this.camera.projectionMatrix);
const cameraPosition =
        new THREE.Vector3().applyMatrix4(camInverseProjection);
const mousePosition =
        new THREE.Vector3(mouse.x, mouse.y, 1)
        .applyMatrix4(camInverseProjection);
const viewDirection = mousePosition.clone()
        .sub(cameraPosition).normalize();

4. Setup the raycaster ray

this.raycaster.set(cameraPosition, viewDirection);

5. The rest can stay the same.

Full code

Fiddle for demonstration.

• I added mousemove to display real-time debug info with jQuery.
• The full info about the hit gets logged to the console upon click.

这篇关于只有投影矩阵的Three.js中的Raycast的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！