Cesium基础-（Entity）-（model ）

9、model 模型

效果：

以下是Cesium中Model的属性和方法：

属性

方法

以上表格提供了Cesium中Model的属性和方法的详细说明，可以帮助小白更好地理解和使用Cesium中的模型加载和渲染功能。

代码：

  addModel(viewer) {
            let position = Cesium.Cartesian3.fromDegrees( // 定义位置
                -123.0744619,
                44.0503706,
                10000
            );
            let heading = Cesium.Math.toRadians(135); // 左右旋转的角度
            let pitch = 0;  // 仰视俯视角度
            let roll = 0;  // 飞机翻滚角度
            let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
            let orientation = Cesium.Transforms.headingPitchRollQuaternion(
                position,
                hpr
            ); // 构成朝向

            let entity = viewer.entities.add({
                name: "model",
                position: position,
                orientation: orientation,
                model: {
                    uri: "http://localhost:8888/Models/weixin.gltf",
                    /*http://localhost:8888/images/Billboard.png*/
                    // 模型最小刻度
                    scale: 5,//缩放
                    minimumPixelSize: 32,//指定模型的最小最小像素大小，而不考虑缩放
                    maximumSize: 128,//模型的最大比例尺大小。 minimumPixelSize的上限
                    runAnimations: true,//指定是否应启动模型中指定的glTF动画
                    clampAnimations: true,//指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
                    silhouetteColor: Cesium.Color.fromAlpha(Cesium.Color.BLUE, 1),// 模型轮廓颜色与透明度
                    silhouetteSize: 3,//模型轮廓大小
                    maximumScale: 200,// 设置模型最大放大大小
                    color: Cesium.Color.YELLOWGREEN, // 指定与模型的渲染颜色混合的 Color
                    show: true,// 模型是否可见
                    colorBlendMode: Cesium.ColorBlendMode.MIX,//颜色混合模式
                    colorBlendAmount: 0,//颜色混合比例
                    heightReference: Cesium.HeightReference.NONE,//高度参考
                    height: 10000,
                },
            });
            viewer.trackedEntity = entity;

        },

要在React代码环境中运行，你需要按照以下步骤操作：

步骤 1: 安装Cesium

首先，确保你的React项目中已经安装了Cesium。如果还没有安装，可以通过npm或yarn来安装：

npm install cesium

或者

yarn add cesium

步骤 2: 创建React组件

创建一个新的React组件，用于承载Cesium Viewer。例如，你可以创建一个名为CesiumModelViewer.js的文件。

步骤 3: 引入Cesium

在React组件中引入Cesium库：

import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css'; // 引入Cesium的样式文件

步骤 4: 设置Cesium Viewer

在React组件中设置Cesium Viewer，并添加一个ref来引用DOM元素：

import React, { useRef, useEffect } from 'react';
import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';

const CesiumModelViewer = () => {
  const cesiumContainerRef = useRef(null);

  useEffect(() => {
    // 初始化Cesium Viewer
    const viewer = new Cesium.Viewer(cesiumContainerRef.current);

    // 添加模型实体
    addModel(viewer);

    // 清理资源，组件卸载时销毁viewer
    return () => {
      viewer.destroy();
    };
  }, []);

  return (
    <div ref={cesiumContainerRef} style={{ width: '100%', height: '100vh' }} />
  );
};

export default CesiumModelViewer;

步骤 5: 定义addModel函数

在同一个文件中定义addModel函数：

const addModel = (viewer) => {
  let position = Cesium.Cartesian3.fromDegrees( // 定义位置
    -123.0744619,
    44.0503706,
    10000
  );
  let heading = Cesium.Math.toRadians(135); // 左右旋转的角度
  let pitch = 0;  // 仰视俯视角度
  let roll = 0;  // 飞机翻滚角度
  let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  let orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  ); // 构成朝向

  let entity = viewer.entities.add({
    name: "model",
    position: position,
    orientation: orientation,
    model: {
      uri: "http://localhost:8888/Models/weixin.gltf", // 模型文件的URL，确保路径正确
      scale: 5, // 缩放
      minimumPixelSize: 32, // 指定模型的最小像素大小，而不考虑缩放
      maximumSize: 128, // 模型的最大比例尺大小。minimumPixelSize的上限
      runAnimations: true, // 指定是否应启动模型中指定的glTF动画
      clampAnimations: true, // 指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
      silhouetteColor: Cesium.Color.fromAlpha(Cesium.Color.BLUE, 1), // 模型轮廓颜色与透明度
      silhouetteSize: 3, // 模型轮廓大小
      maximumScale: 200, // 设置模型最大放大大小
      color: Cesium.Color.YELLOWGREEN, // 指定与模型的渲染颜色混合的 Color
      show: true, // 模型是否可见
      colorBlendMode: Cesium.ColorBlendMode.MIX, // 颜色混合模式
      colorBlendAmount: 0, // 颜色混合比例
      heightReference: Cesium.HeightReference.NONE, // 高度参考
      height: 10000,
    },
  });
  viewer.trackedEntity = entity;
};

请注意，模型文件的URL（uri属性）需要根据你的实际文件路径进行调整。如果模型文件位于本地服务器上，请确保服务器正在运行，并且路径正确无误。

步骤 6: 使用CesiumModelViewer组件

在你的React应用中的任何地方引入并使用CesiumModelViewer组件：

import React from 'react';
import ReactDOM from 'react-dom';
import CesiumModelViewer from './CesiumModelViewer';

ReactDOM.render(
  <React.StrictMode>
    <CesiumModelViewer />
  </React.StrictMode>,
  document.getElementById('root')
);

步骤 7: 确保Cesium资源加载

Cesium需要加载大量的资源文件，确保你的项目配置了正确的路径或者使用了Cesium的CDN服务。

步骤 8: 调试和测试

运行你的React应用，并确保Cesium Viewer正确加载，并且3D模型实体正确显示。

注意

如果你在加载模型时遇到问题，比如模型不显示或者有错误，检查以下几点：

• 确保模型文件（如.gltf或.glb）位于正确的URL路径下。
• 确保你的开发服务器正在运行，并且可以访问到模型文件。
• 检查浏览器的控制台输出，查看是否有任何错误信息。

如果模型文件是从网络上加载的，确保没有跨域资源共享（CORS）问题。如果模型文件是本地的，确保你的开发服务器配置正确，允许访问这些文件。

要在Vue代码环境中运行，你需要按照以下步骤操作：

步骤 1: 安装Cesium

首先，确保你的Vue项目中已经安装了Cesium。如果还没有安装，可以通过npm或yarn来安装：

npm install cesium

或者

yarn add cesium

步骤 2: 创建Vue组件

创建一个新的Vue组件，用于承载Cesium Viewer。例如，你可以创建一个名为CesiumModelViewer.vue的文件。

步骤 3: 引入Cesium

在Vue组件中引入Cesium库：

<template>
  <div ref="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script>
import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css'; // 引入Cesium的样式文件

export default {
  name: 'CesiumModelViewer',
  mounted() {
    this.initCesium();
  },
  methods: {
    initCesium() {
      // 初始化Cesium Viewer
      const viewer = new Cesium.Viewer(this.$refs.cesiumContainer);

      // 添加模型实体
      this.addModel(viewer);
    },
    addModel(viewer) {
      let position = Cesium.Cartesian3.fromDegrees( // 定义位置
        -123.0744619,
        44.0503706,
        10000
      );
      let heading = Cesium.Math.toRadians(135); // 左右旋转的角度
      let pitch = 0;  // 仰视俯视角度
      let roll = 0;  // 飞机翻滚角度
      let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
      let orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpr
      ); // 构成朝向

      let entity = viewer.entities.add({
        name: "model",
        position: position,
        orientation: orientation,
        model: {
          uri: "http://localhost:8888/Models/weixin.gltf", // 确保模型文件的URL正确
          scale: 5, // 缩放
          minimumPixelSize: 32, // 指定模型的最小像素大小，而不考虑缩放
          maximumSize: 128, // 模型的最大比例尺大小。minimumPixelSize的上限
          runAnimations: true, // 指定是否应启动模型中指定的glTF动画
          clampAnimations: true, // 指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
          silhouetteColor: Cesium.Color.fromAlpha(Cesium.Color.BLUE, 1), // 模型轮廓颜色与透明度
          silhouetteSize: 3, // 模型轮廓大小
          maximumScale: 200, // 设置模型最大放大大小
          color: Cesium.Color.YELLOWGREEN, // 指定与模型的渲染颜色混合的 Color
          show: true, // 模型是否可见
          colorBlendMode: Cesium.ColorBlendMode.MIX, // 颜色混合模式
          colorBlendAmount: 0, // 颜色混合比例
          heightReference: Cesium.HeightReference.NONE, // 高度参考
          height: 10000,
        },
      });
      viewer.trackedEntity = entity;
    }
  }
};
</script>

步骤 4: 使用CesiumModelViewer组件

在你的Vue应用中的任何地方引入并使用CesiumModelViewer组件：

<template>
  <div id="app">
    <CesiumModelViewer />
  </div>
</template>

<script>
import CesiumModelViewer from './components/CesiumModelViewer.vue';

export default {
  name: 'App',
  components: {
    CesiumModelViewer
  }
};
</script>

欢迎关注我的博客及B站：

博客：

https://blog.csdn.net/weixin_44857463/article/details/129157708

B站：

https://space.bilibili.com/610654927?spm_id_from=..0.0

点击蓝字  关注我们

扫码关注

我们一起学习！