Model示例讲解链接地址 ，注意是开发模式的示例
http://localhost:8080/Apps/Sandcastle/index.html?src=development%2F3D%20Models.html&label=Development
minimumPixelSize : 128 //保证不管地球缩放到多小，这个飞机依然能看得见
model = scene.primitives.add(Cesium.Model.fromGltf({
url : url,
modelMatrix : modelMatrix,
minimumPixelSize : 128 //保证不管地球缩放到多小，这个飞机依然能看得见
}));
createModel具体使用讲解
modelMatrix
Cesium.Transforms.headingPitchRollToFixedFrame
Model readyPromise
camera.lookAt
//origin 基于空间直角坐标系，已地球的圆心为原点建的坐标系，本初子午线为X轴；origin = 需要从经纬度转为空间直角坐标系的值
//hpr 相对于飞机自身的三个旋转角度，heading左右摇头的角度，改变航向；Pitch 上下抬头低头角度，上正下负；Roll相对于视线方向，从左到右旋转的角度；
//在地球上的不同位置，飞机的初始姿态是不一样的。需要根据不同的位置初始化飞机的位置
//异步创建，
// camera.lookAt 调整相机角度，才能看到飞机的位置；设置视觉中心点，视觉角度；鼠标坐标拖动时可以看到，是围绕着视觉中心点进行旋转的，若需要解绑的话，需要用另外一个函数
//camera.lookAt Transform(Cesium.Matrix4.IDENTITY)可以完成解绑。
function createModel(url, height, heading, pitch, roll) {
height = Cesium.defaultValue(height, 0.0);
heading = Cesium.defaultValue(heading, 0.0);
pitch = Cesium.defaultValue(pitch, 0.0);
roll = Cesium.defaultValue(roll, 0.0);
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, hpr);
scene.primitives.removeAll(); // Remove previous model
model = scene.primitives.add(Cesium.Model.fromGltf({
url : url,
modelMatrix : modelMatrix,
minimumPixelSize : 128
}));
model.readyPromise.then(function(model) {
model.color = Cesium.Color.fromAlpha(getColor(viewModel.color), Number(viewModel.alpha));
model.colorBlendMode = getColorBlendMode(viewModel.colorBlendMode);
model.colorBlendAmount = viewModel.colorBlendAmount;
// Play and loop all animations at half-speed
model.activeAnimations.addAll({
multiplier : 0.5,
loop : Cesium.ModelAnimationLoop.REPEAT
});
var camera = viewer.camera;
// Zoom to model
var controller = scene.screenSpaceCameraController;
var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
controller.minimumZoomDistance = r * 0.5;
var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
var heading = Cesium.Math.toRadians(230.0);
var pitch = Cesium.Math.toRadians(-20.0);
camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));
}).otherwise(function(error){
window.alert(error);
});
}
注册事件 ScreenSpaceEventHandler
scene.pick
scene.pick之后需要判断的属性字段根据你的需求而定，这里我们关注的是model，所以判断model的属性是否存在。
scene.pick之后判断model的属性是否存在
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(movement) {
var pick = scene.pick(movement.endPosition);
if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
// Output glTF node and mesh under the mouse.
console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
Sandcastle使用讲解
cesium 是通过knockout.js完成页面DOM和数据绑定操作的.关键语句如下：
toolbar
Cesium.knockout
Cesium.knockout.track(viewModel)
Cesium.knockout.applyBindings(viewModel, toolbar)
// 在html中
Mode
// 在js中
// The viewModel tracks the state of our mini application.
var viewModel = {
color : 'White',
colors : ['White', 'Red', 'Green', 'Blue', 'Yellow', 'Gray'],
alpha : 1.0,
colorBlendMode : 'Highlight',
colorBlendModes : ['Highlight', 'Replace', 'Mix'],
colorBlendAmount : 0.5,
colorBlendAmountEnabled : false
};
// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);
// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout.getObservable(viewModel, 'colorBlendMode').subscribe(
function(newValue) {
var colorBlendMode = getColorBlendMode(newValue);
model.colorBlendMode = colorBlendMode;
viewModel.colorBlendAmountEnabled = (colorBlendMode === Cesium.ColorBlendMode.MIX);
}
);
mode下的terrainProvider 属性
image.png
terrainProvider 其实是属于global的，这里是做了个快捷方式，直接访问了global.terrainProvider ;
还有很多类似这样的属性 都是快捷方式。
ModelInstance示例讲解
scene 要创建1024个飞机，考虑渲染性能，一次把1024个飞机一次绘制出来，降低绘制批次，优化渲染性能。
ModelInstance 在文档里面没有，是因为ModelInstance.js文档里面有@private关键字，所以自动生成文档的时候没有该关键字。
链接地址
http://localhost:8080/Apps/Sandcastle/index.html?src=development%2F3D%20Models%20Instancing.html&label=Development
image.png
var collection = scene.primitives.add(new Cesium.ModelInstanceCollection({
url : url,
instances : instances
}));
Model子节点控制
http://localhost:8080/Apps/Sandcastle/index.html?src=development%2F3D%20Models%20Node%20Explorer.html&label=Development
image.png
image.png
改动子节点关键代码，获取子节点的名字model.getNode，改动node.matrix
// respond to viewmodel changes by applying the computed matrix
Cesium.knockout.getObservable(viewModel, 'matrix').subscribe(function(newValue) {
var node = model.getNode(viewModel.nodeName);
if (!Cesium.defined(node.originalMatrix)) {
node.originalMatrix = node.matrix.clone();
}
node.matrix = Cesium.Matrix4.multiply(node.originalMatrix, newValue, new Cesium.Matrix4());
});