suzhou-jichuang-lanhai
/
uav-flight-control
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

处理旋转飞机模型灯光问题

Browse Source
main
许宏杰 1 week ago
parent 760a6447c3
commit 9b1bea8681
5 changed files with 76 additions and 72 deletions
Show Stats Download Patch File Download Diff File

4
index.html
Unescape View File

@ -9,6 +9,7 @@
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/> />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<!--引入cesium基础lib--> <!--引入cesium基础lib-->
<link <link
href="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Widgets/widgets.css" href="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Widgets/widgets.css"
@ -32,9 +33,12 @@
type="text/javascript" type="text/javascript"
></script> ></script>
<!-- <script src="http://www.jichuanglanhai.com/demo/map3d/turf.min.js" type="text/javascript"></script> <!-- <script src="http://www.jichuanglanhai.com/demo/map3d/turf.min.js" type="text/javascript"></script>
<link href="http://www.jichuanglanhai.com/demo/map3d/mars3d/mars3d.css" rel="stylesheet" type="text/css" /> <link href="http://www.jichuanglanhai.com/demo/map3d/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="http://www.jichuanglanhai.com/demo/map3d/mars3d/mars3d.js" type="text/javascript"></script> --> <script src="http://www.jichuanglanhai.com/demo/map3d/mars3d/mars3d.js" type="text/javascript"></script> -->
<!-- <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script> -->
<title>若依管理系统</title> <title>若依管理系统</title>
<!--[if lt IE 11 <!--[if lt IE 11
]><script> ]><script>

1
package.json
Unescape View File

@ -34,6 +34,7 @@
"pinia": "2.1.7", "pinia": "2.1.7",
"splitpanes": "3.1.5", "splitpanes": "3.1.5",
"vue": "3.4.31", "vue": "3.4.31",
"vue-3d-loader": "^2.2.4",
"vue-3d-model": "^2.0.0-alpha.4", "vue-3d-model": "^2.0.0-alpha.4",
"vue-cropper": "1.1.1", "vue-cropper": "1.1.1",
"vue-router": "4.4.0", "vue-router": "4.4.0",

6
src/views/components/map/marsMap.vue
Unescape View File

@ -66,7 +66,7 @@ const params = reactive({
pitch: 0, //保当前俯仰角 pitch: 0, //保当前俯仰角
roll: 0, //当前翻滚角 roll: 0, //当前翻滚角
correction: 1, correction: 1,
speed: 250, speed: 260,
}); });
let currentTimestampInSeconds = ref(0); let currentTimestampInSeconds = ref(0);
@ -172,7 +172,7 @@ const handleUavDataLast = () => {
//注意：清除默认给的固定线路，否则会出现手柄控制与固定线路冲突问题 //注意：清除默认给的固定线路，否则会出现手柄控制与固定线路冲突问题
uav.position = { uav.position = {
type: "time", // 时序动态坐标 type: "time", // 时序动态坐标
speed: 100, speed: 130,
list: [[120.657967,31.048193,100] ], list: [[120.657967,31.048193,100] ],
} }
@ -315,7 +315,7 @@ const initUav = () => {
name: "无人机模型", name: "无人机模型",
position: { position: {
type: "time", // 时序动态坐标 type: "time", // 时序动态坐标
speed: 100, speed: 130,
list: list, list: list,
}, },
clockLoop: true, //是否循环播放 clockLoop: true, //是否循环播放

119
src/views/components/map/panelLeft.vue
Unescape View File

@ -2,25 +2,23 @@
<div class="panel-box panel-left"> <div class="panel-box panel-left">
<view-title height="50%" title="无人机信息"> <view-title height="50%" title="无人机信息">
<div class="uav-data"> <div class="uav-data">
<div class="uav-name">云航低空研训基地 <div class="uav-name">
云航低空研训基地
<div class="uav-state">待命</div> <div class="uav-state">待命</div>
</div> </div>
<div class="uav-model"> <div class="uav-model">
<div class="uav-model3d"> <div class="uav-model3d">
<model-collada <vue3dLoader
@load="onLoad" :width="200"
src="src/assets/images/uav-model.dae" :height="200"
:rotation="rotation" :showFps="false"
:position="position" filePath="https://data.mars3d.cn/gltf/mars/wrj.glb"
:height="100"
:lights="lights"
:backgroundAlpha="0" :backgroundAlpha="0"
:controls-options="{ @load="onLoad()"
enableRotate: true, // 是否可旋转 :lights="lights"
enableZoom: false, // 是否可缩放 :cameraPosition="{ x: 1500, y:1000, z: 500}"
enablePan: false, // 是否可移动（鼠标右键可以移动模型） :rotation="rotation"
}" ></vue3dLoader>
/>
</div> </div>
<div class="model-bg"></div> <div class="model-bg"></div>
</div> </div>
@ -32,7 +30,7 @@
<div class="uav-value"> <div class="uav-value">
<div class="value-item"> <div class="value-item">
<div class="value-image"> <div class="value-image">
<img src="/src/assets/images/uav-value-icon1.png" alt=""> <img src="/src/assets/images/uav-value-icon1.png" alt="" />
</div> </div>
<div class="value-data"> <div class="value-data">
<div class="data-name">站点编号</div> <div class="data-name">站点编号</div>
@ -41,7 +39,7 @@
</div> </div>
<div class="value-item"> <div class="value-item">
<div class="value-image"> <div class="value-image">
<img src="/src/assets/images/uav-value-icon2.png" alt=""> <img src="/src/assets/images/uav-value-icon2.png" alt="" />
</div> </div>
<div class="value-data"> <div class="value-data">
<div class="data-name">无人机编号</div> <div class="data-name">无人机编号</div>
@ -50,7 +48,7 @@
</div> </div>
<div class="value-item"> <div class="value-item">
<div class="value-image"> <div class="value-image">
<img src="/src/assets/images/uav-value-icon3.png" alt=""> <img src="/src/assets/images/uav-value-icon3.png" alt="" />
</div> </div>
<div class="value-data"> <div class="value-data">
<div class="data-name">型号</div> <div class="data-name">型号</div>
@ -59,11 +57,11 @@
</div> </div>
<div class="value-item"> <div class="value-item">
<div class="value-image"> <div class="value-image">
<img src="/src/assets/images/uav-value-icon4.png" alt=""> <img src="/src/assets/images/uav-value-icon4.png" alt="" />
</div> </div>
<div class="value-data"> <div class="value-data">
<div class="data-name">无人机状态</div> <div class="data-name">无人机状态</div>
<div class="data-number" style="color: #13E052;">在线</div> <div class="data-number" style="color: #13e052">在线</div>
</div> </div>
</div> </div>
</div> </div>
@ -72,37 +70,49 @@
<!-- 内容区 --> <!-- 内容区 -->
<div class="contain-grid"> <div class="contain-grid">
<div class="grid-item"> <div class="grid-item">
<div class="grid-item-content">{{ uavStore.params.lat.toFixed(3) }}</div> <div class="grid-item-content">
{{ uavStore.params.lat.toFixed(3) }}
</div>
<div class="grid-item-footer"> <div class="grid-item-footer">
纬度 <span class="unit-name">(°)</span> 纬度 <span class="unit-name">(°)</span>
</div> </div>
</div> </div>
<div class="grid-item"> <div class="grid-item">
<div class="grid-item-content">{{uavStore.params.lng.toFixed(3)}}</div> <div class="grid-item-content">
{{ uavStore.params.lng.toFixed(3) }}
</div>
<div class="grid-item-footer"> <div class="grid-item-footer">
经度 <span class="unit-name">(°)</span> 经度 <span class="unit-name">(°)</span>
</div> </div>
</div> </div>
<div class="grid-item"> <div class="grid-item">
<div class="grid-item-content">{{ uavStore.params.altitude.toFixed(2) }}</div> <div class="grid-item-content">
{{ uavStore.params.altitude.toFixed(2) }}
</div>
<div class="grid-item-footer"> <div class="grid-item-footer">
高度 <span class="unit-name">(m)</span> 高度 <span class="unit-name">(m)</span>
</div> </div>
</div> </div>
<div class="grid-item"> <div class="grid-item">
<div class="grid-item-content">{{ uavStore.params.heading.toFixed(2) }}</div> <div class="grid-item-content">
{{ uavStore.params.heading.toFixed(2) }}
</div>
<div class="grid-item-footer"> <div class="grid-item-footer">
偏航角 <span class="unit-name">(°)</span> 偏航角 <span class="unit-name">(°)</span>
</div> </div>
</div> </div>
<div class="grid-item"> <div class="grid-item">
<div class="grid-item-content">{{ uavStore.params.pitch.toFixed(2) }}</div> <div class="grid-item-content">
{{ uavStore.params.pitch.toFixed(2) }}
</div>
<div class="grid-item-footer"> <div class="grid-item-footer">
俯仰角 <span class="unit-name">(°)</span> 俯仰角 <span class="unit-name">(°)</span>
</div> </div>
</div> </div>
<div class="grid-item"> <div class="grid-item">
<div class="grid-item-content">{{ uavStore.params.roll.toFixed(2) }}</div> <div class="grid-item-content">
{{ uavStore.params.roll.toFixed(2) }}
</div>
<div class="grid-item-footer"> <div class="grid-item-footer">
滚转角 <span class="unit-name">(°)</span> 滚转角 <span class="unit-name">(°)</span>
</div> </div>
@ -126,12 +136,22 @@
<script setup> <script setup>
import { ViewTitle } from "@/views/components/map"; import { ViewTitle } from "@/views/components/map";
import { ModelCollada } from "vue-3d-model"; import { vue3dLoader } from "vue-3d-loader";
import useUavStore from '@/store/modules/uav' import useUavStore from "@/store/modules/uav";
const uavStore = useUavStore();
const lights = ref();
const uavStore = useUavStore() lights.value = [
{
type: "AmbientLight",
color: "#fff",
},
];
const rotation = reactive({
x: 0,
y: 0,
z: 0,
});
const onLoad = () => { const onLoad = () => {
rotate(); rotate();
@ -139,34 +159,11 @@ const onLoad = () => {
function rotate() { function rotate() {
requestAnimationFrame(rotate); requestAnimationFrame(rotate);
rotation.y += 0.01; rotation.y -= 0.01;
} }
const rotation = reactive({
x: 0.5,
y: 0,
z: 0,
});
const position = {
x: 0,
y: 0,
z: 0,
};
const lights = [
{
type: "HemisphereLight",
position: { x: 0, y: 15, z: 50 },
skyColor: 0xffd700,
groundColor: 0xffd700,
intensity: 0.2,
},
{
type: "DirectionalLight",
position: { x: 0.2, y: 20, z: 1 },
color: 0xffffff,
intensity: 0.8,
},
];
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -189,13 +186,13 @@ const lights = [
font-weight: 400; font-weight: 400;
background: url("../../../assets/images/introduce-cell-bg.png"); background: url("../../../assets/images/introduce-cell-bg.png");
background-size: 100% 100%; background-size: 100% 100%;
.uav-state{ .uav-state {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
right: -28px; right: -28px;
font-size: 12px; font-size: 12px;
color: #43FFAD; color: #43ffad;
width: 45px; width: 45px;
height: 19px; height: 19px;
line-height: 19px; line-height: 19px;
@ -214,7 +211,9 @@ const lights = [
background-size: 100% 100%; background-size: 100% 100%;
.uav-model3d { .uav-model3d {
position: absolute; position: absolute;
top: -75px; top: -110px;
left: 50%;
transform: translateX(-50%);
} }
} }
.model-btn { .model-btn {
@ -256,7 +255,7 @@ const lights = [
height: 35px; height: 35px;
background: url("../../../assets/images/uav-value-bg.png"); background: url("../../../assets/images/uav-value-bg.png");
background-size: 100% 100%; background-size: 100% 100%;
img{ img {
position: absolute; position: absolute;
top: -10px; top: -10px;
left: 50%; left: 50%;

2
src/views/map.vue
Unescape View File

@ -2,7 +2,7 @@
<div> <div>
<map-container> <map-container>
<template #map> <template #map>
<mars-map></mars-map> <!-- <mars-map></mars-map> -->
</template> </template>
<template #left> <template #left>
<panel-left></panel-left> <panel-left></panel-left>

Write Preview
Loading…
Cancel
Save