MapGIS Client for JavaScript API

# new CollisionDetectionByRender(viewer, collider, optionsopt)

参数:

示例

const { CollisionDetectionByRender } = zondy.cesium
// ES6引入方式
import { CollisionDetectionByRender } from "@mapgis/webclient-cesium-plugin"

// 1. 默认使用相机做为碰撞检测对象
let collisionDetection;
collisionDetection = new CollisionDetectionByRender(viewer, viewer.camera);
// 对目标位置进行碰撞检测
let result = collisionDetection.checkCollision(targetPosition, 0);
// 未碰撞移动到该位置
if (result.result !== 'collided') {
    camera.setView({
        destination: result.computedPosition,
        orientation: {
            heading: camera.heading,
            pitch: camera.pitch,
            roll: 0.0
        }
    });
}

// 2. 使用M3D做为碰撞检测对象
let m3d;
let url = 'http://192.168.82.89:8200/3DData/ModelCache/M3D/2.0/wujiangdizhiti/wujiangdizhiti.mcj';
let options = {
    maximumScreenSpaceError: 0,
    autoReset: false,
    loaded: function(layer) {
        m3d = layer;
        collisionDetection = new CollisionDetectionByRender(viewer, layer._root, {
            colliderLength: 0.8, // 设置碰撞盒长
            colliderWidth: 0.6, // 设置碰撞盒宽
            colliderHeight: 1, // 设置碰撞盒高
            colliderPositionOffset: new Cesium.Cartesian3(0, 0, 0.5), // 设置碰撞盒偏移
            debugShowCollider: true, // 打开debug模式，碰撞盒检查
            debugShowDepthMap: true // 打开debug模式，深度图检查
        });
    }
};
viewer.scene.layers.appendM3DLayer(url, options);
// 对目标位置进行碰撞检测
let result = collisionDetection.checkCollision(targetPosition, 0);
// 获取M3D模型在笛卡尔空间的变换矩阵
let transform = m3d.computedTransform;
let newTransform = new Cesium.Matrix4();
let invModelMat = new Cesium.Matrix4();
if (result.result !== 'collided') {
     // 获取模型变换矩阵
     let modelMatrix = m3d.tileset.modelMatrix;
     // 求模型变换矩阵的逆
     Cesium.Matrix4.inverse(modelMatrix, invModelMat);
     // 未碰撞移动到该位置
     Cesium.Matrix4.setTranslation(transform, result.computedPosition, newTransform);
     // 乘上模型变换矩阵的逆矩阵
     Cesium.Matrix4.multiply(invModelMat, newTransform, newTransform);
     // 设置新的变换矩阵
     m3d.transform = Cesium.Matrix4.clone(newTransform);
}

// 3. 使用Entity做为碰撞检测对象
let url = '../../SampleData/models/GroundVehicle/GroundVehicle.glb';
let position = Cesium.Cartesian3.fromDegrees(108.9594, 34.2186, 5);
let hpr = new Cesium.HeadingPitchRoll(0, 0, 0);
let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
let entity = viewer.entities.add({
    name: url,
    position: position,
    orientation: orientation,
    model: {
        uri: url,
        minimumPixelSize: 32,
        maximumScale: 20000,
    },
});
collisionDetection = new CollisionDetectionByRender(viewer, entity, {
    colliderLength: 2,
    colliderWidth: 0.6,
    colliderHeight: 0.6,
    colliderPositionOffset: new Cesium.Cartesian3(0, 0, 0.6)
});
// 对目标位置进行碰撞检测
let result = collisionDetection.checkCollision(positionWC, 0);
// 未碰撞移动到该位置
if (result.result !== 'collided') {
    entity.position = result.computedPosition;
}

// 4. 打开调试模式
collisionDetection = new CollisionDetectionByRender(viewer, viewer.camera, {
    debugShowCollider: false, // 相机做为碰撞检测对象时不打开碰撞盒检查
    debugShowDepthMap: true, // 打开debug模式，深度图检查
});