Cesium随笔：视锥绘制（下）

0.前言

上一次Cesium随笔中介绍的视锥的绘制方法并不准确，使用camera.debugShow便可以检查到实际视锥和我们计算的视锥的姿态的误差情况，本文将简单介绍正确的视锥绘制方法，重点说明怎么根据两点来计算视锥的姿态。
笔者的可视域分析已经成功做出来，使用ShadowMap并对ShadowMapShader进行修改便可以实现（需要在源代码中修改GLSL以改变阴影着色效果），不过后续生产环境还需要借助后期处理技术将功能独立出来。

GIF.gif

1.根据两点计算相机射向

参考自SandCastle里面的根据两点计算射线的例子，

let spotLightCamera = new Cesium.Camera(window.app.viewer.scene);
let direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(this.secondPos, this.firstPos, new Cesium.Cartesian3()), new Cesium.Cartesian3());
spotLightCamera.position = this.firstPos;//firstPos是相机起点
spotLightCamera.direction=direction;//direction是相机面向的方向

2.视锥绘制部分

视锥绘制代码参考自Cesium源代码中的Camera debug show部分

let scratchRight = new Cesium.Cartesian3();
let scratchRotation = new Cesium.Matrix3();
var scratchOrientation = new Cesium.Quaternion();
let position = spotLightCamera.positionWC;
let direction = spotLightCamera.directionWC;
let up = spotLightCamera.upWC;
let right = spotLightCamera.rightWC;
right = Cesium.Cartesian3.negate(right, scratchRight);

let rotation = scratchRotation;
Cesium.Matrix3.setColumn(rotation, 0, right, rotation);
Cesium.Matrix3.setColumn(rotation, 1, up, rotation);
Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);
//计算视锥姿态
let orientation = Cesium.Quaternion.fromRotationMatrix(rotation, scratchOrientation);
//视锥轮廓线图形
let instanceOutline = new Cesium.GeometryInstance({
                geometry: new Cesium.FrustumOutlineGeometry({
                    frustum: spotLightCamera.frustum,
                    origin: this.firstPos,
                    orientation: orientation
                }),
                id: "pri" + window.app.viewer.scene.primitives.length + 1,
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 1.0, 0.0, 1.0)),
                    show: new Cesium.ShowGeometryInstanceAttribute(true)
                }
            });
//添加图元
let newPrimitive = window.app.viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: instanceOutline,
                appearance: new Cesium.PerInstanceColorAppearance()
            }));

对了，上述代码之前别忘了先修改视锥的相关参数（不修改的话使用默认参数画出来的视锥会突破天际），上一篇随笔中有相关参数的说明。

spotLightCamera.frustum.near=1;
spotLightCamera.frustum.far=100;

除了上述方法外还可以直接使用DebugCameraPrimitive实体绘制视锥，但缺点是该实体好像不方便修改near和far参数。

3.总结

Cesium中模型的平移、缩放、旋转是通过ModelMatrix这个矩阵参数来实现的，学好矩阵运算对理解三维世界很有帮助。

本文转自 https://www.jianshu.com/p/f2c9a4cac078，如有侵权，请联系删除。