0.前言

上一次Cesium隨筆中介紹的視錐的繪制方法并不準(zhǔn)確，使用camera.debugShow便可以檢查到實(shí)際視錐和我們計(jì)算的視錐的姿態(tài)的誤差情況，本文將簡(jiǎn)單介紹正確的視錐繪制方法，重點(diǎn)說明怎么根據(jù)兩點(diǎn)來計(jì)算視錐的姿態(tài)。
筆者的可視域分析已經(jīng)成功做出來，使用ShadowMap并對(duì)ShadowMapShader進(jìn)行修改便可以實(shí)現(xiàn)（需要在源代碼中修改GLSL以改變陰影著色效果），不過后續(xù)生產(chǎn)環(huán)境還需要借助后期處理技術(shù)將功能獨(dú)立出來。

GIF.gif

1.根據(jù)兩點(diǎn)計(jì)算相機(jī)射向

參考自SandCastle里面的根據(jù)兩點(diǎn)計(jì)算射線的例子，

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是相機(jī)起點(diǎn)
spotLightCamera.direction=direction;//direction是相機(jī)面向的方向

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);
//計(jì)算視錐姿態(tài)
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()
            }));

對(duì)了，上述代碼之前別忘了先修改視錐的相關(guān)參數(shù)（不修改的話使用默認(rèn)參數(shù)畫出來的視錐會(huì)突破天際），上一篇隨筆中有相關(guān)參數(shù)的說明。

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

除了上述方法外還可以直接使用DebugCameraPrimitive實(shí)體繪制視錐，但缺點(diǎn)是該實(shí)體好像不方便修改near和far參數(shù)。

3.總結(jié)

Cesium中模型的平移、縮放、旋轉(zhuǎn)是通過ModelMatrix這個(gè)矩陣參數(shù)來實(shí)現(xiàn)的，學(xué)好矩陣運(yùn)算對(duì)理解三維世界很有幫助。