three模拟高山中风力发电站景色代码-html代码-BFW代码库

three模拟高山中风力发电站景色代码

代码语言：html

所属分类：三维

代码描述：three模拟高山中风力发电站景色代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3D风力发电站 - Eco Wind Power</title>
    <style>
        body { margin: 0; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        #canvas-container { width: 100vw; height: 100vh; display: block; }
        
        /* UI 面板样式 */
        #ui-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            width: 280px;
            backdrop-filter: blur(5px);
        }
        h2 { margin: 0 0 15px 0; color: #2c3e50; font-size: 1.5rem; border-bottom: 2px solid #27ae60; padding-bottom: 5px; }
        .stat-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 1.1rem; }
        .label { color: #7f8c8d; }
        .value { font-weight: bold; color: #2c3e50; }
        #power-val { color: #e67e22; }
        #storage-val { color: #27ae60; }
        
        /* 风速控制 */
        .control-group { margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; }
        input[type=range] { width: 100%; cursor: pointer; }
        .note { font-size: 0.8rem; color: #95a5a6; margin-top: 5px; }

    </style>
    
    <!-- 引入 Three.js -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
            }
        }
    </script>
</head>
<body>

    <!-- UI 面板 -->
    <div id="ui-panel">
        <h2>绿色能源监控</h2>
        <div class="stat-row">
            <span class="label">实时发电功率:</span>
            <span class="value"><span id="power-val">0</span> kW</span>
        </div>
        <div class="stat-row">
            <span class="label">总储电量:</span>
            <span class="value"><span id="storage-val">0.00</span> kWh</span>
        </div>
        <div class="stat-row">
            <span class="label">转速:</span>
            <span class=&.........完整代码请登录后点击上方下载按钮下载查看