【Cesium学习(七)】Cesium对模型各种属性设置和修改

本文详细介绍了如何使用Cesium库对模型进行属性设置,包括位置、方向、颜色、轮廓等,以及如何通过API修改这些属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Cesium对模型各种属性设置和修改

在前面我们可以通过entites.add的方法来添加模型,现在我们来针对模型model的各个属性进行设置和修改!

创建一个模型

创建前先要初始化地图来获取viewer,这里不细展示,去看前面的文章初始化地图及封装链接
在前面我们学习到了通过entites的add方法来添加模型,我们再来看一看add方法的属性官方原文链接
在这里插入图片描述
在原文中我们看到有position(位置),orientation(方向)model(设置模型)等等属性!这里我们主要就是针对model这个属性进来设置

初始化模型

初始化一个模型最主要的就是需要position,orientaion,model,所以我们需要先设置这个三个属性
创建几个属性

// 创建一个模型位置
const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
//> 创建模型的航向
const heading = Cesium.Math.toRadians(135);
const pitch = 0; //> 俯仰角
const roll = 0; //> 翻滚角
//> 创建出一个航向,俯仰,翻滚的实例
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
//> 根据参考系计算四元数,其中参考系具有根据航向-俯仰-横滚角计算的轴以提供的原点为中心
const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

这个看看model有哪些属性(原文链接
在这里插入图片描述
上面有很多属性,具体自己看文档,这个我们就演示模型颜色和模型轮廓这个几个属性
创建模型

//> 通过entities的add方法来添加一个模型
entity = window.viewer.entities.add({
    name: '模型',
    position,
    orientation,
    model: {
        uri: require('../public/models/CesiumAir/Cesium_Air.glb'),
        minimumPixelSize: 128,
        maximumScale: 20000,
        color: this.getColor('Red', 1.0), //> 模型颜色与透明度
        colorBlendMode: this.getColorBlendMode('Highlight'), //> 模型颜色模式
        colorBlendAmount: parseFloat(0.5), //> 模型混合度
        silhouetteColor: this.getColor('Red', 1.0), //> 模型轮廓颜色
        silhouetteSize: parseFloat(2), //> 模型轮廓大小
    },
});
window.viewer.trackedEntity = entity;


获取颜色和模式的方法

//-----------------------下面是获取颜色方法------------------
//> 获取模型颜色与透明度
getColor(colorName, alpha) {
    const color = Cesium.Color[colorName.toUpperCase()];
    return Cesium.Color.fromAlpha(color, parseFloat(alpha));
},
//> 获取目标颜色和图元的源颜色之间混合的不同模式  HIGHLIGHT将源颜色乘以目标颜色 REPLACE将源颜色替换为目标颜色 MIX将源颜色和目标颜色混合在一起
getColorBlendMode(colorBlendMode) {
    return Cesium.ColorBlendMode[colorBlendMode.toUpperCase()];
},

运行如下图
在这里插入图片描述

修改属性

其实修改属性很简单,只需要拿到创建模型的entity,在entity.model中选择想要修改的属性,直接修改就ok了!
例如:
修改设置的模型颜色和透明度

entity.model.color = this.getColor('green', 0.5);

修改设置的模型轮廓大小

entity.model.silhouetteSize = parseFloat(5);

在这里可以通过elementUI来选择合适的组件来进行设置和修改
例如我设计的控制器:
在这里插入图片描述
这里就不多说了,各位自行设计,我直接贴我的组件代码

完整代码
<template>
    <div class="SetModelsColor">
        <el-form ref="form" :model="form" label-width="100px">
            <h3 style="margin: 5px">模型颜色设置</h3>
            <el-form-item label="渲染模式">
                <el-select size="mini" v-model="form.colorBlendMode" placeholder="请选择" @change="colorBlendModeChange">
                    <el-option v-for="item in colorBlendModes" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="颜色">
                <el-select size="mini" v-model="form.color" placeholder="请选择" @change="colorChange">
                    <el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="颜色透明度">
                <el-slider size="mini" v-model="form.alpha" :show-tooltip="false" :min="0" :max="1" :step="0.01" show-input @input="alphaChange"></el-slider>
            </el-form-item>
            <el-form-item label="混合度">
                <el-slider size="mini" :disabled="form.colorBlendMode != 'Mix'" v-model="form.colorBlendAmount" :show-tooltip="false" :min="0" :max="1" :step="0.01" show-input @input="colorBlendAmountChange"></el-slider>
            </el-form-item>
            <h3 style="margin: 5px">模型轮廓设置</h3>
            <el-form-item label="轮廓颜色">
                <el-select size="mini" v-model="form.silhouetteColor" placeholder="请选择" @change="silhouetteColorChange">
                    <el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="轮廓透明度">
                <el-slider size="mini" v-model="form.silhouetteAlpha" :show-tooltip="false" :min="0" :max="1" :step="0.01" show-input @input="silhouetteAlphaChange"></el-slider>
            </el-form-item>
            <el-form-item label="轮廓大小">
                <el-slider size="mini" v-model="form.silhouetteSize" :show-tooltip="false" :min="0" :max="10" :step="0.01" show-input @input="silhouetteSizeChange"></el-slider>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
let entity = null;
export default {
    name: 'SetModelsColor',
    data() {
        return {
            form: {
                colorBlendMode: 'Highlight',
                color: 'Red',
                alpha: 1,
                colorBlendAmount: 0.5,
                silhouetteColor: 'Red',
                silhouetteAlpha: 1,
                silhouetteSize: 2,
            },
            colorBlendModes: [
                {
                    value: 'Highlight',
                    label: '颜色相乘',
                },
                {
                    value: 'Replace',
                    label: '颜色替换',
                },
                {
                    value: 'Mix',
                    label: '颜色混合',
                },
            ],
            colors: [
                {
                    value: 'White',
                    label: '白色',
                },
                {
                    value: 'Red',
                    label: '红色',
                },
                {
                    value: 'Green',
                    label: '绿色',
                },
                {
                    value: 'Blue',
                    label: '蓝色',
                },
                {
                    value: 'Yellow',
                    label: '黄色',
                },
                {
                    value: 'Gray',
                    label: '灰色',
                },
            ],
        };
    },
    mounted() {
        // this.createModel('../public/models/CesiumAir/Cesium_Air.glb', 5000.0);
    },
    methods: {
        //> 初始化模型 url:模型地址 height:模型高度
        createModel(url, height) {
            //> 创建一个模型位置
            const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
            //> 创建模型的航向
            const heading = Cesium.Math.toRadians(135);
            const pitch = 0; //> 俯仰角
            const roll = 0; //> 翻滚角
            //> 创建出一个航向,俯仰,翻滚的实例
            const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
            //> 根据参考系计算四元数,其中参考系具有根据航向-俯仰-横滚角计算的轴以提供的原点为中心
            const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

            //> 通过entities的add方法来添加一个模型
            entity = window.viewer.entities.add({
                name: '模型',
                position,
                orientation,
                model: {
                    uri: url,
                    minimumPixelSize: 128,
                    maximumScale: 20000,
                    color: this.getColor(this.form.color, this.form.alpha), //> 模型颜色与透明度
                    colorBlendMode: this.getColorBlendMode(this.form.colorBlendMode), //> 模型颜色模式
                    colorBlendAmount: parseFloat(this.form.colorBlendAmount), //> 模型混合度
                    silhouetteColor: this.getColor(this.form.color, this.form.silhouetteAlpha), //> 模型轮廓颜色
                    silhouetteSize: parseFloat(2), //> 模型轮廓大小
                },
            });
            window.viewer.trackedEntity = entity;
        },
        //> 获取模型颜色与透明度
        getColor(colorName, alpha) {
            const color = Cesium.Color[colorName.toUpperCase()];
            return Cesium.Color.fromAlpha(color, parseFloat(alpha));
        },
        //> 获取目标颜色和图元的源颜色之间混合的不同模式  HIGHLIGHT将源颜色乘以目标颜色 REPLACE将源颜色替换为目标颜色 MIX将源颜色和目标颜色混合在一起
        getColorBlendMode(colorBlendMode) {
            return Cesium.ColorBlendMode[colorBlendMode.toUpperCase()];
        },
        //> 渲染模式选择
        colorBlendModeChange(value) {
            entity.model.colorBlendMode = this.getColorBlendMode(value);
        },
        //> 颜色选择
        colorChange(value) {
            entity.model.color = this.getColor(value, this.form.alpha);
        },
        //> 颜色透明度选择
        alphaChange(value) {
            entity.model.color = this.getColor(this.form.color, value);
        },
        //> 混合度选择
        colorBlendAmountChange(value) {
            entity.model.colorBlendAmount = parseFloat(value);
        },
        //> 轮廓颜色选择
        silhouetteColorChange(value) {
            entity.model.silhouetteColor = this.getColor(value, this.form.silhouetteAlpha);
        },
        //> 轮廓透明度选择
        silhouetteAlphaChange(value) {
            entity.model.silhouetteColor = this.getColor(this.form.silhouetteColor, value);
        },
        //> 轮廓大小选择
        silhouetteSizeChange(value) {
            entity.model.silhouetteSize = parseFloat(value);
        },
    },
};
</script>

<style scoped lang="scss">
.SetModelsColor {
    width: 500px;
    position: absolute;
    top: 3%;
    left: 3%;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}
.el-form {
    padding: 5px;
    /deep/ .el-form-item__label {
        color: #fff;
    }
}
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龟中的程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值