一、射线投射技术基础解析

射线投射（Raycasting）是3D图形开发中的基础技术，其本质是从指定起点沿特定方向发射一条无限延伸的直线，检测该直线与场景中物体的碰撞情况。在CocosCreator中，这项技术被广泛应用于3D物体选中、视线检测、碰撞预警等交互场景。

1.1 数学原理与实现机制

射线投射的数学基础可追溯至解析几何，通过向量运算确定射线与物体包围盒（Bounding Box）或三角网格（Triangle Mesh）的交点。CocosCreator的物理引擎封装了这些复杂计算，开发者只需关注射线起点（origin）、方向（direction）和距离（length）三个核心参数。

// 创建射线实例
const ray = new cc.Ray(
    cc.v3(0, 1, 0),  // 起点坐标
    cc.v3(0, -1, 0)  // 方向向量（归一化）
);

1.2 物理引擎支持对比

CocosCreator提供两种射线检测实现：

• PhysicsSystem射线检测：基于物理引擎（如Cannon.js/Bullet），支持复杂碰撞体检测
• Graphics射线检测：直接通过渲染管线检测，性能更高但精度较低

建议根据场景复杂度选择：简单交互使用Graphics检测，复杂物理交互使用PhysicsSystem。

二、CocosCreator中的实现方案

2.1 基础射线检测实现

通过PhysicsSystem实现最基础的物体检测：

// 获取物理系统实例
const physicsSystem = cc.director.getPhysicsManager();
// 执行射线检测
const results = physicsSystem.raycast(
    cc.v3(0, 1, 0),  // 起点
    cc.v3(0, -1, 0), // 方向
    1000             // 最大检测距离
);
if (results.length > 0) {
    const firstHit = results[0];
    console.log(`击中物体: ${firstHit.collider.node.name}`);
}

2.2 屏幕坐标转世界坐标

实际开发中常需要将屏幕点击转换为世界空间射线：

// 获取屏幕点击位置
const canvas = cc.find('Canvas');
canvas.on(cc.Node.EventType.TOUCH_START, (event: cc.Event.EventTouch) => {
    // 将屏幕坐标转换为NDC（标准化设备坐标）
    const touchPos = event.getLocation();
    const ndcPos = new cc.Vec2(
        touchPos.x / canvas.width * 2 - 1,
        -(touchPos.y / canvas.height * 2 - 1)
    );
    // 创建相机实例
    const camera = this.node.getComponent(cc.Camera);
    // 生成射线
    const ray = camera.screenPointToRay(ndcPos.x, ndcPos.y);
    // 执行检测...
});

2.3 多层物体检测优化

对于包含多层UI的3D场景，建议使用分层检测策略：

// 创建分层检测器
const layerMask = 1 << 8; // 第8层
const results = physicsSystem.raycast(
    startPoint,
    direction,
    distance,
    layerMask  // 只检测指定层的物体
);

三、性能优化策略

3.1 检测频率控制

• 移动设备优化：将连续检测改为间隔检测（如每帧检测改为每3帧检测）
• 区域检测：使用PhysicsSystem.sphereCast替代raycast进行近似检测

// 使用球体检测替代射线检测
const radius = 0.5;
const hits = physicsSystem.sphereCast(
    center,
    radius,
    direction,
    distance
);

3.2 检测范围限制

通过设置最大检测距离减少计算量：

// 限制检测距离为10单位
const closeHits = physicsSystem.raycast(
    start,
    direction,
    10  // 最大距离
);

3.3 物体层级管理

建议建立物体检测优先级系统：

// 物体组件添加检测优先级
@property({type: cc.Integer, min: 0, max: 10})
detectionPriority: number = 5;
// 检测时按优先级排序
results.sort((a, b) => b.collider.node.detectionPriority - a.collider.node.detectionPriority);

四、高级应用场景

4.1 动态物体检测

对于移动物体，建议使用预测射线：

// 预测物体0.1秒后的位置
const targetVel = targetNode.getComponent(cc.RigidBody).linearVelocity;
const predictionTime = 0.1;
const predictedPos = targetNode.position.add(targetVel.multiplyScalar(predictionTime));
// 生成指向预测位置的射线
const predictionRay = new cc.Ray(
    cameraPos,
    predictedPos.subtract(cameraPos).normalize()
);

4.2 多重检测结果处理

处理复杂场景中的多重检测结果：

const allHits = physicsSystem.raycastAll(start, direction, distance);
// 按距离排序
allHits.sort((a, b) => a.distance - b.distance);
// 获取最近的可交互物体
const interactable = allHits.find(hit => 
    hit.collider.node.getComponent('Interactable')
);

4.3 自定义碰撞体检测

为特殊形状物体实现自定义检测逻辑：

// 自定义碰撞检测组件
const { ccclass, property } = cc._decorator;
@ccclass
class CustomCollider extends cc.Component {
    onLoad() {
        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouch, this);
    }
    onTouch(event: cc.Event.EventTouch) {
        const camera = cc.find('Canvas/Main Camera').getComponent(cc.Camera);
        const worldPos = this.node.parent.convertToWorldSpaceAR(this.node.position);
        const ray = camera.screenPointToRay(
            event.getLocationX(),
            event.getLocationY()
        );
        // 自定义距离检测
        const toObject = worldPos.subtract(ray.origin);
        const projection = toObject.dot(ray.direction);
        const closestPoint = ray.origin.add(ray.direction.multiplyScalar(projection));
        const distance = closestPoint.sub(worldPos).mag();
        if (distance < this.node.width / 2) {
            console.log('自定义碰撞检测成功');
        }
    }
}

五、常见问题解决方案

5.1 检测失效问题排查

1. 相机层级问题：确保检测相机在正确的渲染层级
2. 碰撞体未启用：检查cc.Collider组件的enabled属性
3. 层级掩码不匹配：验证检测代码中的layerMask设置

5.2 精度优化技巧

• 对于小物体，使用PhysicsSystem.raycastClosest替代raycast
• 启用物理系统的连续碰撞检测（CCD）：

// 在项目设置中启用
cc.PhysicsSystem.instance.enableCCD = true;

5.3 移动端适配建议

1. 使用cc.macro.ENABLE_MULTI_TOUCH控制多点触控
2. 针对不同DPI设备调整检测灵敏度
3. 实现触摸容差区域：

const touchTolerance = 10; // 像素容差
const isWithinTolerance = (screenPos: cc.Vec2, targetPos: cc.Vec2) => {
    return screenPos.sub(targetPos).mag() < touchTolerance;
};

六、最佳实践总结

1. 分层检测：将场景物体按交互频率分层，优先检测高频交互层
2. 结果缓存：对静态场景预计算检测结果，减少实时计算
3. 异步检测：复杂场景中使用WebWorker进行后台检测
4. 可视化调试：实现射线可视化工具辅助调试

// 射线可视化工具
@ccclass
class RayVisualizer extends cc.Component {
    @property(cc.Graphics)
    graphics: cc.Graphics = null;
    update(dt) {
        this.graphics.clear();
        this.graphics.strokeColor = cc.Color.RED;
        this.graphics.moveTo(0, 0, 0);
        this.graphics.lineTo(0, -10, 0);
        this.graphics.stroke();
    }
}

通过系统掌握射线投射技术原理与CocosCreator实现细节，开发者能够高效解决3D场景中的物体选中难题。建议结合具体项目需求，灵活运用本文介绍的检测策略和优化方案，构建出流畅的3D交互体验。