CocosCreator射线投射：3D物体选中检测全攻略

一、射线投射技术原理与CocosCreator实现基础

射线投射（Raycasting）作为3D图形学中的核心交互技术，通过从观察点发射虚拟射线并检测与场景中物体的交点，实现精准的物体选中功能。在CocosCreator引擎中，该技术依托物理引擎（如Builtin或Cannon.js）的碰撞检测系统，通过数学计算确定射线与碰撞体的空间交集。

1.1 核心数学原理

射线投射的数学本质是求解射线方程与物体包围盒/网格的交点。CocosCreator中，射线由起点（通常为相机位置）和方向向量（归一化后的屏幕坐标转换方向）定义，其参数方程为：
P(t) = Origin + t * Direction
其中t为距离参数，当t在[0, ∞)范围内且与物体碰撞体相交时，即判定为有效命中。

1.2 CocosCreator物理系统适配

引擎提供两种物理引擎支持：

• Builtin物理：轻量级实现，适合简单场景
• Cannon.js集成：支持复杂物理模拟，需通过physics.CannonPhysics接口调用

开发时需在项目设置中启用物理引擎，并为需要检测的物体添加cc.PhysicsCollider组件。

二、完整实现流程：从屏幕坐标到物体选中

2.1 屏幕坐标转换世界坐标

// 获取Canvas节点并转换为世界坐标
const canvas = this.node.scene.getChildByName('Canvas');
const worldPos = canvas.convertToNodeSpaceAR(
    cc.view.getVisibleSize().div(2) // 屏幕中心点
);

通过convertToNodeSpaceAR方法将屏幕坐标转换为场景世界坐标，为射线生成提供空间基准。

2.2 射线生成与发射

// 创建射线参数
const startPos = this.cameraNode.position;
const direction = this.getRayDirection(touchPos); // 自定义方向计算函数
// 使用物理系统进行射线检测
const results = [];
this.physicsManager.rayCast(
    startPos,
    direction.mul(1000), // 射线长度
    cc.RayCastType.Closest, // 检测最近碰撞体
    results
);

physicsManager.rayCast方法接受射线起点、方向、检测类型和结果数组，返回所有碰撞体的详细信息。

2.3 碰撞结果处理

if (results.length > 0) {
    const closestHit = results[0];
    const collider = closestHit.collider;
    const hitPoint = closestHit.point;
    // 获取被击中物体的脚本组件
    const targetScript = collider.node.getComponent('TargetController');
    if (targetScript) {
        targetScript.onSelected(); // 触发选中逻辑
    }
}

通过解析RayCastResult对象中的collider属性定位被击中物体，结合组件系统实现业务逻辑。

三、性能优化与边缘情况处理

3.1 分层检测策略

利用cc.PhysicsSystem.instance.enable的layer属性实现分层检测：

// 设置物体物理层
const targetLayer = 1 << 0; // 二进制第0位为1
collider.node.group = targetLayer;
// 射线检测时指定层
physicsManager.rayCast(..., { layer: targetLayer });

通过位掩码技术精准控制检测范围，避免无关物体的计算开销。

3.2 动态射线长度调整

根据场景规模动态设置射线长度：

const maxDistance = cc.misc.boundingBoxWorld(this.node.scene).size.length() * 2;
physicsManager.rayCast(..., maxDistance);

防止因射线过长导致的误检测或性能浪费。

3.3 移动端触控优化

针对移动设备实施以下优化：

• 触控区域扩大：在touchstart事件中扩大检测区域

  const touchPos = event.getLocation().add(cc.v2(-20, -20)); // 扩大40像素

• 多指触控处理：通过event.getTouches()实现多指支持
• 帧率适配：在update中实施节流控制

  update(dt) {
    if (this.lastRaycastTime + 0.1 < Time.time) { // 每100ms检测一次
        this.performRaycast();
        this.lastRaycastTime = Time.time;
    }
  }

四、高级应用场景扩展

4.1 多物体同时选中

通过修改射线检测类型实现：

physicsManager.rayCast(
    startPos,
    direction,
    cc.RayCastType.All, // 检测所有碰撞体
    results
);
results.forEach(hit => {
    // 处理每个命中物体
});

适用于需要批量操作的场景（如RTS游戏单位选择）。

4.2 穿透式检测实现

结合射线长度分段检测：

const segmentLength = 5;
for (let t = 0; t < maxDistance; t += segmentLength) {
    const segmentEnd = startPos.add(direction.mul(t));
    const segmentResults = [];
    physicsManager.rayCast(startPos, segmentEnd, ..., segmentResults);
    // 处理分段检测结果
}

实现类似激光束的穿透效果检测。

4.3 与UI系统协同工作

通过cc.Node.getWorldPosition和cc.Camera.screenToWorld实现UI与3D物体的混合检测：

// 判断点击是否在UI上
if (cc.Canvas.instance.node.getChildByName('UI').getBoundingBoxToWorld(touchPos)) {
    return; // 忽略UI区域的3D检测
}

五、常见问题解决方案

5.1 检测失效排查清单

1. 物理引擎未启用：检查项目设置中Physics模块是否激活
2. 碰撞体未添加：确认目标物体包含cc.PhysicsCollider组件
3. 层级不匹配：验证射线检测的layer与物体group是否对应
4. 坐标系错误：使用cc.log(worldPos)调试坐标转换

5.2 性能瓶颈优化

• 减少检测频率：将实时检测改为按钮触发式
• 使用空间分区：对静态场景实施八叉树分区
• 简化碰撞体：将复杂模型替换为基础几何体碰撞体

六、完整代码示例

const { ccclass, property } = cc._decorator;
@ccclass
export class RaycastSelector extends cc.Component {
    @property(cc.Camera)
    camera: cc.Camera = null;
    @property
    rayLength: number = 1000;
    @property
    detectionLayer: number = 0xFFFFFFFF; // 默认检测所有层
    update(dt: number) {
        if (cc.systemEvent.isMouseDown(cc.Event.EventMouse.BUTTON_LEFT)) {
            const touchPos = cc.v2(
                cc.input.getTouch(0).getLocationX(),
                cc.input.getTouch(0).getLocationY()
            );
            this.performRaycast(touchPos);
        }
    }
    performRaycast(screenPos: cc.Vec2) {
        // 屏幕转世界坐标
        const worldPos = this.camera.screenToWorld(screenPos);
        const direction = worldPos.sub(this.camera.node.position).normalize();
        // 执行射线检测
        const results = [];
        cc.director.getPhysicsManager().rayCast(
            this.camera.node.position,
            direction.mul(this.rayLength),
            cc.RayCastType.Closest,
            results,
            this.detectionLayer
        );
        // 处理结果
        if (results.length > 0) {
            const hit = results[0];
            cc.tween(hit.collider.node)
                .to(0.2, { scale: 1.2 })
                .to(0.2, { scale: 1 })
                .start();
            hit.collider.node.emit('selected', { hitPoint: hit.point });
        }
    }
}

七、最佳实践建议

1. 分层管理：为不同交互对象分配独立物理层
2. 可视化调试：使用cc.debug.setDisplayStats(true)显示物理检测统计
3. 资源预加载：确保碰撞体模型在检测前已完成加载
4. 跨平台适配：针对WebGL/Native平台调整射线检测精度参数

通过系统掌握射线投射技术原理与CocosCreator实现细节，开发者能够高效构建出稳定、高性能的3D物体选中系统，为游戏交互设计提供坚实的技术支撑。