web三维

import * as THREE from 'three';
// 修复：引入轨道控制器和字体加载器（关键新增）
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB); // 天空蓝色

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 50, 150);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 修复：使用导入的 OrbitControls 构造函数（移除 THREE 前缀）
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(100, 100, 50);
scene.add(directionalLight);

// 创建大坝主体
function createDam() {
  // 大坝基础
  const damGeometry = new THREE.BoxGeometry(100, 20, 40);
  const damMaterial = new THREE.MeshStandardMaterial({
    color: 0x888888,
    roughness: 0.8,
    metalness: 0.2
  });
  const dam = new THREE.Mesh(damGeometry, damMaterial);
  dam.position.set(0, 10, 0);
  scene.add(dam);

  // 大坝正面倾斜部分
  const slopeGeometry = new THREE.BoxGeometry(100, 30, 20);
  const slope = new THREE.Mesh(slopeGeometry, damMaterial);
  slope.position.set(0, 25, -10);
  slope.rotation.x = -0.3;
  scene.add(slope);

  // 坝顶结构
  const topStructureGeometry = new THREE.BoxGeometry(100, 5, 10);
  const topStructure = new THREE.Mesh(topStructureGeometry, damMaterial);
  topStructure.position.set(0, 30, 20);
  scene.add(topStructure);

  // 水闸塔
  const towerGeometry = new THREE.BoxGeometry(6, 20, 10);
  const towerMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc });

  // 左侧水闸塔
  const leftTower1 = new THREE.Mesh(towerGeometry, towerMaterial);
  leftTower1.position.set(-30, 40, 20);
  scene.add(leftTower1);

  const leftTower2 = new THREE.Mesh(towerGeometry, towerMaterial);
  leftTower2.position.set(-15, 40, 20);
  scene.add(leftTower2);

  // 中间水闸塔
  const centerTower1 = new THREE.Mesh(towerGeometry, towerMaterial);
  centerTower1.position.set(-5, 45, 20);
  scene.add(centerTower1);

  const centerTower2 = new THREE.Mesh(towerGeometry, towerMaterial);
  centerTower2.position.set(5, 45, 20);
  scene.add(centerTower2);

  // 右侧水闸塔
  const rightTower1 = new THREE.Mesh(towerGeometry, towerMaterial);
  rightTower1.position.set(15, 40, 20);
  scene.add(rightTower1);

  const rightTower2 = new THREE.Mesh(towerGeometry, towerMaterial);
  rightTower2.position.set(30, 40, 20);
  scene.add(rightTower2);

  // 右侧建筑
  const rightBuildingGeometry = new THREE.BoxGeometry(15, 15, 10);
  const rightBuilding = new THREE.Mesh(rightBuildingGeometry, towerMaterial);
  rightBuilding.position.set(55, 35, 20);
  scene.add(rightBuilding);

  // 添加""文字
  // 修复：使用导入的 FontLoader 构造函数（移除 THREE 前缀）
  const fontLoader = new FontLoader();
  fontLoader.load('https://cdn.jsdelivr.net/npm/three@0.150.1/examples/fonts/helvetiker_regular.typeface.json', function (font) {
    const textGeometry1 = new THREE.TextGeometry('字体', {
      font: font,
      size: 8,
      height: 1,
      curveSegments: 12,
      bevelEnabled: false
    });
    textGeometry1.center();

    const textGeometry2 = new THREE.TextGeometry('字', {
      font: font,
      size: 8,
      height: 1,
      curveSegments: 12,
      bevelEnabled: false
    });
    textGeometry2.center();

    const textMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });

    const text1 = new THREE.Mesh(textGeometry1, textMaterial);
    text1.position.set(-20, 20, -9);
    text1.rotation.x = -0.3;
    scene.add(text1);

    const text2 = new THREE.Mesh(textGeometry2, textMaterial);
    text2.position.set(20, 20, -9);
    text2.rotation.x = -0.3;
    scene.add(text2);
  });
}

// 创建山体
function createMountains() {
  // 左侧山体
  const leftMountainGeometry = new THREE.ConeGeometry(100, 80, 4);
  const mountainMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 });
  const leftMountain = new THREE.Mesh(leftMountainGeometry, mountainMaterial);
  leftMountain.position.set(-150, 20, -50);
  leftMountain.rotation.y = Math.PI / 4;
  scene.add(leftMountain);

  // 右侧山体
  const rightMountainGeometry = new THREE.ConeGeometry(100, 70, 4);
  const rightMountain = new THREE.Mesh(rightMountainGeometry, mountainMaterial);
  rightMountain.position.set(150, 15, -50);
  rightMountain.rotation.y = -Math.PI / 4;
  scene.add(rightMountain);

  // 远处山体
  const farMountainGeometry = new THREE.CylinderGeometry(120, 150, 50, 4);
  const farMountainMaterial = new THREE.MeshStandardMaterial({ color: 0x226622 });
  const farMountain = new THREE.Mesh(farMountainGeometry, farMountainMaterial);
  farMountain.position.set(0, 0, -200);
  scene.add(farMountain);
}

// 创建水体
function createWater() {
  const waterGeometry = new THREE.PlaneGeometry(300, 200);
  const waterMaterial = new THREE.MeshStandardMaterial({
    color: 0x4682B4,
    transparent: true,
    opacity: 0.8,
    roughness: 0.3,
    metalness: 0.2
  });
  const water = new THREE.Mesh(waterGeometry, waterMaterial);
  water.rotation.x = -Math.PI / 2;
  water.position.set(0, 5, -100);
  scene.add(water);
}

// 创建地面
function createGround() {
  const groundGeometry = new THREE.PlaneGeometry(500, 500);
  const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
  const ground = new THREE.Mesh(groundGeometry, groundMaterial);
  ground.rotation.x = -Math.PI / 2;
  ground.position.y = 0;
  scene.add(ground);
}

// 初始化场景元素
createGround();
createMountains();
createDam();
createWater();

// 窗口大小调整
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

animate();