惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Spread Privacy
Spread Privacy
大猫的无限游戏
大猫的无限游戏
F
Fortinet All Blogs
M
MIT News - Artificial intelligence
G
Google Developers Blog
Hacker News: Ask HN
Hacker News: Ask HN
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
H
Help Net Security
V
Visual Studio Blog
WordPress大学
WordPress大学
博客园 - 司徒正美
TaoSecurity Blog
TaoSecurity Blog
Webroot Blog
Webroot Blog
Hugging Face - Blog
Hugging Face - Blog
Application and Cybersecurity Blog
Application and Cybersecurity Blog
W
WeLiveSecurity
C
CERT Recently Published Vulnerability Notes
Y
Y Combinator Blog
S
Schneier on Security
Recent Announcements
Recent Announcements
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
宝玉的分享
宝玉的分享
T
Troy Hunt's Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 三生石上(FineUI控件)
Microsoft Azure Blog
Microsoft Azure Blog
N
News and Events Feed by Topic
A
About on SuperTechFans
小众软件
小众软件
K
Kaspersky official blog
Help Net Security
Help Net Security
V2EX - 技术
V2EX - 技术
P
Proofpoint News Feed
S
Secure Thoughts
IT之家
IT之家
云风的 BLOG
云风的 BLOG
N
Netflix TechBlog - Medium
The Register - Security
The Register - Security
I
Intezer
NISL@THU
NISL@THU
GbyAI
GbyAI
P
Privacy & Cybersecurity Law Blog
T
Threatpost
C
Check Point Blog
Forbes - Security
Forbes - Security
C
Cisco Blogs
AI
AI
Recorded Future
Recorded Future
F
Full Disclosure

博客园 - 华腾智算

子系统框架存档20260717 响应式后台管理系统 smart-water 融合多端协同总体架构设计方案 现代前端架构的核心思想 极简设计框架 跨平台弹性栅格理念设计 多端统一设计理念 一套规则,多端伸缩的UI设计理念 现代栅格设计之一 设计中的栅格系统 智慧水利顶层设计之何为“水利矩阵”与“数字孪生” 从古典Web到AI原生超级应用:团队学习路线与未来架构蓝图 最新架构设计 前端代码规范 v1.0 树型菜单全功能代码 最终最佳实践操作文档:统信UOS VSCode 全栈开发环境配置(基于 Chromium 浏览器) vscode-setting.json配置 VSCode 全栈开发环境初始化设置与跨平台配置指南(Windows/macOS 通用) VScode完整的跨平台适配方案 完整的跨平台 settings.json(飞雪飘鸿优化版) 数字孪生破局之道 完整的GLFW应用程序示例 雏形 程序方向 第一步,第一行,开始 绘制三角形 明确目标 从文本文件加载指令到模拟内存中,并显示前11个内存单元的内容 使用Python的pydub库播放音乐并打印二进制数据 python的音频处理 python加密与解密 mainwindows.cpp 十进制数213转换为二进制数的完整过程,使用除2取余法(也称为“重复除法法”) 二进制数 \((-1101.101)_2\) 转换为十进制数 - 华腾智算
web三维
华腾智算 · 2025-09-24 · via 博客园 - 华腾智算
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();