|
@@ -54,7 +54,7 @@ export const FlyGLTFClass = {
|
|
|
const grid = new THREE.GridHelper(30,10,0xf0f0f0,0xffffff);
|
|
|
this.scene.add(grid);
|
|
|
|
|
|
- this.ambient = new THREE.AmbientLight(0xffffff,0.5);
|
|
|
+ this.ambient = new THREE.AmbientLight(0xffffff,5);
|
|
|
this.scene.add(this.ambient);
|
|
|
|
|
|
this.loadGLTF();
|
|
@@ -79,66 +79,67 @@ export const FlyGLTFClass = {
|
|
|
const AnimationAction = that.mixer.clipAction(gltf.animations[0]);
|
|
|
AnimationAction.play();
|
|
|
|
|
|
- // 创建信息面板
|
|
|
- const panelGeometry = new THREE.PlaneGeometry(3.5, 3.5); // 面板大小
|
|
|
- const canvas = document.createElement('canvas');
|
|
|
- const context = canvas.getContext('2d');
|
|
|
- // 加载背景图片
|
|
|
- const backgroundImage = new Image();
|
|
|
- backgroundImage.src = 'public/imgs/serviceBackground.png'; // 替换为你的图片路径
|
|
|
- backgroundImage.onload = () => {
|
|
|
- // 确保背景透明
|
|
|
- context.clearRect(0, 0, canvas.width, canvas.height); // 清除所有内容,包含黑色
|
|
|
- context.fillStyle = 'rgba(0, 0, 0, 0)'; // 设置透明背景
|
|
|
- context.fillRect(0, 0, canvas.width, canvas.height); // 填充透明背景
|
|
|
-
|
|
|
- context.save();
|
|
|
- context.scale(-1, 1);
|
|
|
- context.translate(-canvas.width, 0);
|
|
|
- // 绘制背景图片,填满整个 canvas
|
|
|
- context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
|
|
|
-
|
|
|
- // // 绘制文字信息
|
|
|
- // context.fillStyle = '#fff';
|
|
|
- // context.font = 'normal 15px Arial';
|
|
|
- // context.fillText('无人机信息:',40, 25);
|
|
|
- // context.fillText('无人机名称: 无人机1号', 40, 50);
|
|
|
- // context.fillText('所属企业: 美团', 40, 70);
|
|
|
- // context.fillText('速度: 100km/h', 40, 90);
|
|
|
- // context.fillText('高度: 200m', 40, 110);
|
|
|
- // context.fillText('状态: 正常',40, 130);
|
|
|
-
|
|
|
-
|
|
|
- const textInfo = [
|
|
|
- { text: '无人机信息: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 25 },
|
|
|
- { text: '无人机名称:'+this.panelInfo.data.name, color: '#fff', font: '15px Arial', offsetX:40, offsetY: 50 },
|
|
|
- { text: '所属企业: 美团: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 70 },
|
|
|
- { text: '速度: '+Math.floor(this.panelInfo.data.speed * 3.6)+'km/h',color: '#fff', font: '15px Arial', offsetX:40, offsetY: 90 },
|
|
|
- { text: '高度: '+ this.panelInfo.data.altitude+'m', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 110 },
|
|
|
- { text: '状态: 正常',color: '#fff',font: '15px Arial', offsetX:40, offsetY: 130 }
|
|
|
- ];
|
|
|
- // 绘制文字
|
|
|
- textInfo.forEach((line) => {
|
|
|
- context.fillStyle = line.color;
|
|
|
- context.font = line.font;
|
|
|
- context.fillText(line.text, line.offsetX, line.offsetY);
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- // 标记纹理需要更新
|
|
|
- texture.needsUpdate = true;
|
|
|
- };
|
|
|
|
|
|
- const texture = new THREE.CanvasTexture(canvas);
|
|
|
- const panelMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true });
|
|
|
- panelGeometry.scale(-1,1,1);
|
|
|
- const panelMesh = new THREE.Mesh(panelGeometry, panelMaterial);
|
|
|
- // 将面板附加到无人机模型
|
|
|
- panelMesh.position.set(0, 2.5, 0); // 调整面板位置到无人机上方
|
|
|
- gltf.scene.add(panelMesh);
|
|
|
-
|
|
|
- // 保存信息面板,以便更新
|
|
|
- that.infoPanel = { canvas, context, texture, mesh: panelMesh };
|
|
|
+ // 创建信息面板
|
|
|
+ // const panelGeometry = new THREE.PlaneGeometry(3.5, 3.5); // 面板大小
|
|
|
+ // const canvas = document.createElement('canvas');
|
|
|
+ // const context = canvas.getContext('2d');
|
|
|
+ // // 加载背景图片
|
|
|
+ // const backgroundImage = new Image();
|
|
|
+ // backgroundImage.src = 'public/imgs/serviceBackground.png'; // 替换为你的图片路径
|
|
|
+ // backgroundImage.onload = () => {
|
|
|
+ // // 确保背景透明
|
|
|
+ // context.clearRect(0, 0, canvas.width, canvas.height); // 清除所有内容,包含黑色
|
|
|
+ // context.fillStyle = 'rgba(0, 0, 0, 0)'; // 设置透明背景
|
|
|
+ // context.fillRect(0, 0, canvas.width, canvas.height); // 填充透明背景
|
|
|
+ //
|
|
|
+ // context.save();
|
|
|
+ // context.scale(-1, 1);
|
|
|
+ // context.translate(-canvas.width, 0);
|
|
|
+ // // 绘制背景图片,填满整个 canvas
|
|
|
+ // context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
|
|
|
+ //
|
|
|
+ // // // 绘制文字信息
|
|
|
+ // // context.fillStyle = '#fff';
|
|
|
+ // // context.font = 'normal 15px Arial';
|
|
|
+ // // context.fillText('无人机信息:',40, 25);
|
|
|
+ // // context.fillText('无人机名称: 无人机1号', 40, 50);
|
|
|
+ // // context.fillText('所属企业: 美团', 40, 70);
|
|
|
+ // // context.fillText('速度: 100km/h', 40, 90);
|
|
|
+ // // context.fillText('高度: 200m', 40, 110);
|
|
|
+ // // context.fillText('状态: 正常',40, 130);
|
|
|
+ //
|
|
|
+ //
|
|
|
+ // const textInfo = [
|
|
|
+ // { text: '无人机信息: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 25 },
|
|
|
+ // { text: '无人机名称:'+this.panelInfo.data.name, color: '#fff', font: '15px Arial', offsetX:40, offsetY: 50 },
|
|
|
+ // { text: '所属企业: 美团: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 70 },
|
|
|
+ // { text: '速度: '+Math.floor(this.panelInfo.data.speed * 3.6)+'km/h',color: '#fff', font: '15px Arial', offsetX:40, offsetY: 90 },
|
|
|
+ // { text: '高度: '+ this.panelInfo.data.altitude+'m', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 110 },
|
|
|
+ // { text: '状态: 正常',color: '#fff',font: '15px Arial', offsetX:40, offsetY: 130 }
|
|
|
+ // ];
|
|
|
+ // // 绘制文字
|
|
|
+ // textInfo.forEach((line) => {
|
|
|
+ // context.fillStyle = line.color;
|
|
|
+ // context.font = line.font;
|
|
|
+ // context.fillText(line.text, line.offsetX, line.offsetY);
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ //
|
|
|
+ // // 标记纹理需要更新
|
|
|
+ // texture.needsUpdate = true;
|
|
|
+ // };
|
|
|
+ //
|
|
|
+ // const texture = new THREE.CanvasTexture(canvas);
|
|
|
+ // const panelMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true });
|
|
|
+ // panelGeometry.scale(-1,1,1);
|
|
|
+ // const panelMesh = new THREE.Mesh(panelGeometry, panelMaterial);
|
|
|
+ // // 将面板附加到无人机模型
|
|
|
+ // panelMesh.position.set(0, 2.5, 0); // 调整面板位置到无人机上方
|
|
|
+ // gltf.scene.add(panelMesh);
|
|
|
+ //
|
|
|
+ // // 保存信息面板,以便更新
|
|
|
+ // that.infoPanel = { canvas, context, texture, mesh: panelMesh };
|
|
|
});
|
|
|
|
|
|
},
|
|
@@ -254,7 +255,7 @@ export const FlyGLTFClass = {
|
|
|
texture.needsUpdate = true;
|
|
|
}
|
|
|
}
|
|
|
- }else if(this.panelInfo.type == "routeDeviate"){
|
|
|
+ }else if(this?.panelInfo?.type == "routeDeviate"){
|
|
|
//获取当前下标index
|
|
|
let index = this.panelInfo.index * 1 +Math.floor(this.panelInfo.data.distance * 1 / 10) * 1 + 1;
|
|
|
let targetPoint = [];
|
|
@@ -375,7 +376,7 @@ export const FlyGLTFClass = {
|
|
|
this.scene.remove(this.recommandPathLineGroup);
|
|
|
}
|
|
|
|
|
|
- if(this.panelInfo.type == "routeDeviate"){
|
|
|
+ if(this?.panelInfo?.type == "routeDeviate"){
|
|
|
this.updateRecommandPath();
|
|
|
}
|
|
|
|