Raycaster--当物体放在容器中并做了转换，交点坐标不对的问题。

问题

子代放在了一个容器里，容器做了旋转、位移。
递归获得了最近的相交子代获取到的交点坐标并不是想要的交点坐标。
经过可视化观察，很像是没转换之前的坐标点。

解决x

在 Three.js 中，当你使用 Raycaster 获取与一个子对象的相交点时，返回的相交点信息是相对于世界坐标系的。如果你的子对象被包含在一个已经做了旋转或其他变换的容器中，你需要将相交点转换到子对象的本地坐标系中。

为了将相交点从世界坐标系转换到子对象的本地坐标系，你可以使用 Three.js 提供的 Object3D 方法 worldToLocal。

以下是一个示例，展示了如何将相交点从世界坐标系转换到子对象的本地坐标系：

import * as THREE from 'three';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个容器并做旋转变换
const container = new THREE.Object3D();
container.rotation.y = Math.PI / 4; // 旋转45度
scene.add(container);

// 添加一个子对象到容器中
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const child = new THREE.Mesh(geometry, material);
container.add(child);

camera.position.z = 5;

// 创建 Raycaster 和射线
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 事件监听器，用于捕捉鼠标点击事件
document.addEventListener('click', onMouseClick, false);

function onMouseClick(event) {
  // 计算鼠标在 NDC (Normalized Device Coordinates) 中的位置
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 设置 Raycaster 的射线方向
  raycaster.setFromCamera(mouse, camera);

  // 计算与场景中所有对象的相交点
  const intersects = raycaster.intersectObjects(scene.children, true);

  if (intersects.length > 0) {
    const intersect = intersects[0];
    console.log('Intersected object:', intersect.object);

    // 相交点在世界坐标系中的位置
    const worldIntersection = intersect.point.clone();
    console.log('World intersection:', worldIntersection);

    // 将相交点转换到相交对象的本地坐标系中
    const localIntersection = intersect.object.worldToLocal(worldIntersection);
    console.log('Local intersection:', localIntersection);
  }
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

关键点

• 旋转容器：将子对象添加到一个旋转的容器中。
• 获取相交点：使用 Raycaster 获取相交点，该相交点是相对于世界坐标系的。
• 转换相交点：使用 intersect.object.worldToLocal(intersect.point.clone()) 将相交点从世界坐标系转换到子对象的本地坐标系中。

总结

当子对象位于一个做了变换（如旋转、缩放、平移）的容器中时，从 Raycaster 获取的相交点是相对于世界坐标系的。为了将相交点转换到子对象的本地坐标系中，需要使用 worldToLocal 方法。这种转换可以帮助你正确地在子对象的本地坐标系中处理相交点。