entities方式引入3D模型
const entity = viewer.value.entities.add({
name: “car”,
position: Cesium.Cartesian3.fromDegrees(120.13699186126235, 30.320240186854843, 0),
orientation: Cesium.Transforms.headingPitchRollQuaternion(
Cesium.Cartesian3.fromDegrees(120.13699186126235, 30.320240186854843, 0),
new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(90), // 设置这个属性即可（顺时针旋转的角度值）
Cesium.Math.toRadians(0),
Cesium.Math.toRadians(0)
)
),
model: {
uri: “/model/car.glb”, // /model/build.gltf
scale: 10,
runAnimations: true, // 是否显示动画
clampAnimations: true, // 是否保持最后一针的动画
// roll: 90, // 旋转
// minimumPixelSize: 128, // 最小的模型像素
// maximumScale: 20000, // 最大的模型像素
// color: Cesium.Color.RED, // 模型加颜色
// show: true,
// color: this.getColor(‘Red’, 1.0), //> 模型颜色与透明度
// colorBlendMode: this.getColorBlendMode(‘Highlight’), //> 模型颜色模式
// colorBlendAmount: parseFloat(0.5), //> 模型混合度
// silhouetteColor: this.getColor(‘Red’, 1.0), //> 模型轮廓颜色
// silhouetteSize: parseFloat(2), //> 模型轮廓大小
}
})
// 让摄像机视口快速定位到模型位置
viewer.value.trackedEntity = entity;
CZML方式引入3D模型
const czml = [
{
id: “document”,
name: “CZML Model”,
version: “1.0”,
},
{
id: “aircraft model”,
name: “Cesium Air”,
position: {
cartographicDegrees: [120.13699186126235, 30.320240186854843, 10000], // 生成位置
},
model: {
gltf: “/model/build.gltf”, // 文件路径
scale: 2.0,
minimumPixelSize: 128,
},
},
];
const dataSourcePromise = viewer.value.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise
.then(function (dataSource) {
viewer.value.trackedEntity = dataSource.entities.getById(
“aircraft model”
);
})
.catch(function (error) {
window.alert(error);
});

完整代码

<template>
<div id=”cesiumContainer”></div>
</template>

<script setup>
import { onMounted, ref } from “vue”;
const viewer = ref(null);

const initCesium = async () => {
// 1.引入token
Cesium.Ion.defaultAccessToken = “xxxxxxxxxxx”;
// 2.三维地球初始化
viewer.value = new Cesium.Viewer(“cesiumContainer”, {
animation: true, //是否创建动画小器件，左下角仪表
shouldAnimate: true,
fullscreenButton: false, //是否显示全屏按钮
geocoder: false, //是否显示geocoder小器件，右上角查询按钮
homeButton: false, //是否显示Home按钮
infoBox: false, //是否显示信息框
sceneModePicker: false, //是否显示3D/2D选择器
scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
selectionIndicator: false, // 是否显示选取指示器组件
timeline: false, // 是否显示时间轴
navigationHelpButton: false,// 是否显示右上角的帮助按钮
baselLayerPicker: false, // 将图层选择的控件关掉，才能添加其他影像数据
shadows: false, // 是否显示背影
baseLayerPicker: false, // 是否显示图层选择器
orderIndependentTranslucency: false, //去掉大气层黑圈
});

// 加载3D模型
// 1.entities方式
// const entity = viewer.value.entities.add({
// name: “car”,
// position: Cesium.Cartesian3.fromDegrees(120.13699186126235, 30.320240186854843, 0),
// orientation: Cesium.Transforms.headingPitchRollQuaternion(
// Cesium.Cartesian3.fromDegrees(120.13699186126235, 30.320240186854843, 0),
// new Cesium.HeadingPitchRoll(
// Cesium.Math.toRadians(90), // 设置这个属性即可（顺时针旋转的角度值）
// Cesium.Math.toRadians(0),
// Cesium.Math.toRadians(0)
// )
// ),
// model: {
// uri: “/model/car.glb”,
// scale: 10,
// runAnimations: true, // 是否显示动画
// clampAnimations: true, // 是否保持最后一针的动画
// // roll: 90, // 旋转
// // minimumPixelSize: 128, // 最小的模型像素
// // maximumScale: 20000, // 最大的模型像素
// // color: Cesium.Color.RED, // 模型加颜色
// // show: true,
// // color: this.getColor(‘Red’, 1.0), //> 模型颜色与透明度
// // colorBlendMode: this.getColorBlendMode(‘Highlight’), //> 模型颜色模式
// // colorBlendAmount: parseFloat(0.5), //> 模型混合度
// // silhouetteColor: this.getColor(‘Red’, 1.0), //> 模型轮廓颜色
// // silhouetteSize: parseFloat(2), //> 模型轮廓大小
// }
// })
// // 让摄像机视口快速定位到模型位置
// viewer.value.trackedEntity = entity;

// 2. CZML方式
const czml = [
{
id: “document”,
name: “CZML Model”,
version: “1.0”,
},
{
id: “aircraft model”,
name: “Cesium Air”,
position: {
cartographicDegrees: [120.13699186126235, 30.320240186854843, 0],
},
model: {
gltf: “/model/build.gltf”,
scale: 2.0,
minimumPixelSize: 128,
},
},
];
const dataSourcePromise = viewer.value.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise
.then(function (dataSource) {
viewer.value.trackedEntity = dataSource.entities.getById(
“aircraft model”
);
})
.catch(function (error) {
window.alert(error);
});

//缩放
viewer.value.scene.screenSpaceCameraController.zoomEventTypes = [
Cesium.CameraEventType.WHEEL,
Cesium.CameraEventType.PINCH,
];
//视图视角切换
viewer.value.scene.screenSpaceCameraController.tiltEventTypes = [
Cesium.CameraEventType.PINCH,
Cesium.CameraEventType.RIGHT_DRAG,
];

}

onMounted(() => {
initCesium();
})
</script>

<style scoped>
#cesiumContainer {
position: relative;
width: 100vw;
height: 100vh;
}
</style>
————————————————