模拟激光雷达线束打在图像上的效果（c代码实时交互）-深圳市維司達科技有限公司

<!DOCTYPE html>

<head>

<title>64线激光雷达投影模拟器</title>

<style>

body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #1a1a1a; color: #e0e0e0; }

canvas { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); }

.slider-container { margin-bottom: 1rem; }

input[type=range] { width: 100%; accent-color: #22c55e; }

</style>

</head>

</svg>

LiDAR 投影模拟器

</h1>

</label>

</div>

模拟平面深度 (米)

</label>

<p class="text-xs text-gray-500 mt-1">模拟激光打在前方多远的平面上</p>

</div>

相机焦距系数 (Zoom)

</label>

<p class="text-xs text-gray-500 mt-1">值越大，视野越窄 (Telephoto)</p>

</div>

激光点大小

</label>

</div>

线束弯曲度 (Curvature)

</label>

<p class="text-xs text-gray-500 mt-1">模拟广角畸变或扫描轨迹弯曲</p>

</div>

垂直视场角偏移 (Pitch)

</label>

<p class="text-xs text-gray-500 mt-1">模拟雷达安装的俯仰角微调</p>

</div>

水平扫描密度

</label>

<p class="text-xs text-gray-500 mt-1">值越小点越密</p>

</div>

<p>💡 说明：本工具基于针孔相机模型，假设激光雷达与相机光心重合。</p>

</div>

</svg>

<p>请点击右上角上传图片</p>

</div>

</div>

// DOM 元素

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const uploadInput = document.getElementById('imageUpload');

const placeholder = document.getElementById('placeholderText');

// 参数元素

const params = {

depth: document.getElementById('depth'),

focal: document.getElementById('focal'),

pointSize: document.getElementById('pointSize'),

pitchOffset: document.getElementById('pitchOffset'),

density: document.getElementById('density'),

curvature: document.getElementById('curvature') // 新增

};

// 显示数值的元素

const displays = {

depth: document.getElementById('val-depth'),

focal: document.getElementById('val-focal'),

pointSize: document.getElementById('val-size'),

pitchOffset: document.getElementById('val-pitch'),

density: document.getElementById('val-density'),

curvature: document.getElementById('val-curvature') // 新增

};

// 状态

let currentImage = null;

// 雷达常量

const LIDAR_LINES = 20;

const V_FOV_UP = 2.0;

const V_FOV_DOWN = -24.8;

const H_FOV = 90.0;

// 初始化监听器

uploadInput.addEventListener('change', handleImageUpload);

// 为所有滑块添加监听

Object.keys(params).forEach(key => {

params[key].addEventListener('input', (e) => {

// 更新数值显示

displays[key].innerText = e.target.value;

if(key === 'density') {

displays[key].innerText = parseFloat(e.target.value) < 0.3 ? "High" : "Low";

}

// 重绘

draw();

});

function handleImageUpload(e) {

const file = e.target.files[0];

if (!file) return;

const reader = new FileReader();

reader.onload = function(event) {

const img = new Image();

img.onload = function() {

currentImage = img;

placeholder.style.display = 'none';

canvas.classList.remove('hidden');

// 设置画布尺寸与图片一致

canvas.width = img.width;

canvas.height = img.height;

draw();

}

img.src = event.target.result;

}

reader.readAsDataURL(file);

}

function deg2rad(deg) {

return deg * Math.PI / 180;

}

function draw() {

if (!currentImage) return;

const width = canvas.width;

const height = canvas.height;

// 1. 清除画布并绘制原图

ctx.clearRect(0, 0, width, height);

ctx.drawImage(currentImage, 0, 0, width, height);

// 获取参数

const depthBase = parseFloat(params.depth.value);

const focalFactor = parseFloat(params.focal.value);

const pointSize = parseInt(params.pointSize.value);

const pitchOffset = parseFloat(params.pitchOffset.value);

const densityStep = parseFloat(params.density.value);

const curvature = parseFloat(params.curvature.value); // 获取弯曲度

// 相机内参

const fx = width * focalFactor;

const fy = width * focalFactor;

const cx = width / 2.0;

const cy = height / 2.0;

// 绘制样式

ctx.fillStyle = '#00ff00'; // 激光绿色

// 2. 模拟激光雷达投影

const angleStepV = (V_FOV_UP - V_FOV_DOWN) / (LIDAR_LINES - 1);

for (let i = 0; i < LIDAR_LINES; i++) {

// 计算垂直角度 (加上用户的微调偏移)

const angleV = V_FOV_DOWN + i * angleStepV + pitchOffset;

const radV = deg2rad(angleV);

// 水平扫描循环

for (let angleH = -H_FOV / 2.0; angleH <= H_FOV / 2.0; angleH += densityStep) {

const radH = deg2rad(angleH);

// --- 3D 坐标计算 (模拟平面投影) ---

// Z轴向前，X轴向右，Y轴向下

// 添加 +/- 1.5% 的深度噪声

const noiseFactor = 0.015;

const depthNoise = depthBase * noiseFactor * (Math.random() - 0.5) * 2;

const Z = depthBase + depthNoise;

// 计算弯曲后的垂直角度

// 随着水平角 radH 的增大，让垂直角 radV 也稍微增大（向上抬）

// 使用平方项来实现抛物线式的弯曲效果

const radVCurved = radV + curvature * Math.pow(radH, 2);

const X = Z * Math.tan(radH);

// 真实世界Y轴向上为正，相机坐标系Y轴向下为正，雷达仰角对应负Y

const Y = -Z * Math.tan(radVCurved);

// --- 投影到 2D 像素 ---

const u = fx * (X / Z) + cx;

const v = fy * (Y / Z) + cy;

// 绘制点 (简单的边界检查)

if (u >= 0 && u < width && v >= 0 && v < height) {

ctx.beginPath();

ctx.arc(u, v, pointSize, 0, 2 * Math.PI);

ctx.fill();

}

</script>

</body>

</html>

模拟激光雷达线束打在图像上的效果（c代码实时交互）

dubbo系统学习总结

TMS = ERP？

Windows Defender永久禁用深度解析：defender-control如何实现系统安全控制权回归

如何用免费开源方案搭建Windows Syslog服务器实现实时网络监控

风控规则 DSL 怎么设计？一次讲清表达式能力、可解释性、灰度控制与工程落地取舍

STM32+LVGL触摸屏移植避坑指南：从轮询到中断，如何让UI响应更跟手？