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();