three三维可视化动画演示A*、D* Lite、RRT * 和 RRT-Connect 四种路径规划算法区别代码-html代码-BFW代码库

three三维可视化动画演示A*、D* Lite、RRT * 和 RRT-Connect 四种路径规划算法区别代码

代码语言：html

所属分类：三维

代码描述：three三维可视化动画演示A*、D* Lite、RRT * 和 RRT-Connect 四种路径规划算法区别代码

代码标签： three 三维可视化动画演示 A* D* Lite RRT * RRT-Connect

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3D 路径规划算法演示 (A*, D* Lite, RRT*, RRT-Connect)</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #1a1a1a; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        #container { width: 100vw; height: 100vh; }
        #ui {
            position: absolute; top: 20px; left: 20px;
            background: rgba(0, 0, 0, 0.8); color: white;
            padding: 20px; border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            width: 280px;
        }
        h1 { margin: 0 0 15px 0; font-size: 18px; color: #4db8ff; border-bottom: 1px solid #444; padding-bottom: 10px; }
        .control-group { margin-bottom: 15px; }
        button {
            width: 100%; padding: 10px; margin-bottom: 8px;
            background-color: #333; border: 1px solid #555; color: white;
            cursor: pointer; border-radius: 4px; transition: 0.2s;
            font-weight: bold;
        }
        button:hover { background-color: #444; }
        button.active { background-color: #4db8ff; color: #000; border-color: #4db8ff; }
        button.reset { background-color: #d9534f; border-color: #d43f3a; margin-top: 10px; }
        button.reset:hover { background-color: #c9302c; }
        .legend { font-size: 12px; margin-top: 10px; }
        .legend-item { display: flex; align-items: center; margin-bottom: 4px; }
        .box { width: 12px; height: 12px; margin-right: 8px; border-radius: 2px; }
        #status { margin-top: 10px; color: #aaa; font-size: 13px; font-style: italic; }
    </style>
    <!-- 引入 Three.js -->
    <script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
</head>
<body>

<div id="ui">
    <h1>3D 路径规划演示</h1>
    
    <div class="control-group">
        <button onclick="startAlgo('astar')" id="btn-astar">A* (Grid)</button>
        <button onclick="startAlgo('dstarlite')" id="btn-dstarlite">D* Lite (Grid)</button>
      .........完整代码请登录后点击上方下载按钮下载查看