Cesium-Examples/examples/cesiumEx/2.4.2、primitive加载模型.html
2025-05-20 14:52:40 +08:00

70 lines
2.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
<script type="text/javascript">
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjM2EzNGJmNy02N2RmLTQ0MDMtYjI2MS1hZTJiMTIwZGYwMTYiLCJpZCI6MzA0MzEyLCJpYXQiOjE3NDc3MjM3MTV9.ePQNhuoVuDsi_z00lTm5W26wyW1Adcr1AWetGM6WSXI'
const viewer = new Cesium.Viewer('map', {
shouldAnimate: true
});
// 开启帧率
viewer.scene.debugShowFramesPerSecond = true;
// 新版本API Model.fromGltfAsync
// https://cesium.com/learn/cesiumjs/ref-doc/Model.html?classFilter=model
// --------------不带方位-----------
// var origin = Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 200000.0);
// var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
// --------------带方位-------------
let heading = Cesium.defaultValue(90, 0.0);
let pitch = Cesium.defaultValue(0, 0.0);
let roll = Cesium.defaultValue(0, 0.0);
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var origin = Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 200000.0);
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, hpr);
const model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
scale: 7000,
modelMatrix: modelMatrix,
url: './Man.glb',
}));
viewer.camera.lookAtTransform(modelMatrix, new Cesium.Cartesian3(-50000, 0, 80000));
// cesium 1.107+ 的图元(Primitive) 已经不支持 readyPromise
// 完全载入
model.readyPromise.then(function (model) {
console.log(model)
model.silhouetteSize = 3
model.silhouetteColor = Cesium.Color.fromCssColorString("rgba(254, 129, 6, 0.65)");
// 动画是存储在glTF模型里所以需要等待readyPromise执行后才能访问他们
model.activeAnimations.addAll({
loop: Cesium.ModelAnimationLoop.REPEAT, //循环播放动画
speedup: 0.5,
reverse: true
});
})
</script>
</body>
</html>