文章介绍了Three.js，一个用于简化WebGL开发的JavaScript库，并探讨了其在Web 3D可视化中的应用。内容涵盖了Three.js的基础概念、材质与光照、粒子系统与特效、交互与物理引擎、WebGL与着色器、后期处理与场景优化、地理信息与3D建模等多个方面。文章还提供了代码示例，包括坐标轴辅助器、物体移动、缩放、旋转、动画、响应式设计、全屏控制以及图形用户界面（dat.GUI）的使用。此外，文章还提到了Three.js在智慧城市、企业展示、新基建项目等领域的应用，并提供了AI编程资讯的链接。

💡 **基础入门**：从Three.js库入手，学习点、线、面、几何体、材质、物体、场景、相机、渲染器、动画、控制器等基础概念，搭建基础场景和3D物体，并进行代码调试。

💡 **材质与光照**：深入学习PBR技术，掌握环境贴图、凹凸贴图、置换贴图、金属贴图、粗糙度贴图等，通过贴图实现逼真的光照效果，例如石子凹凸和门面纹理。

💡 **动画与交互**：使用requestAnimationFrame实现平滑动画；利用THREE.Clock精确控制动画时间；结合dat.GUI快速创建调试界面，以及Gsap实现复杂动画；通过监听resize事件适配不同屏幕尺寸。

💡 **高级应用**：掌握GLSL语言，编写顶点着色器和片元着色器，实现动态效果，如飘扬的旗帜、烟雾、波涛汹涌的海面等。利用地理数据生成建筑框架、数字城市等，并学习Blender建模技术，优化模型并导出到网页。

原创 curdcv_po 2025-06-25 08:30 重庆

效果智慧城「智慧孪生类」：智慧城市、智慧小区、智慧厂「大屏可视化」：地球飞线「物品」：配件3D、车、单个人「其

「从Three.js库入手」

Three.js是一个简化WebGL开发的库，适合初学者快速入门。

直接使用WebGL需要掌握图形学知识及GLSL语言，而Three.js可以跳过复杂的底层实现。

要学的汇总总结🎨. 「掌握基础概念」

点、线、面、几何体、材质、物体、场景、相机、渲染器、动画、控制器等。

学会搭建基础场景和3D物体，并调试代码。

🎨. 「深入学习材质与光照」

了解PBR（基于物理的渲染）技术，掌握环境贴图、凹凸贴图、置换贴图、金属贴图、粗糙度贴图等。

通过贴图实现逼真的光照效果，如石子凹凸、门面纹理等。

🎨. 「学习粒子系统与特效」

实现雨雪、落叶、星河等粒子效果，或酷炫的产品展示（如战斗机化为星光点点再还原）。

🎨. 「交互与物理引擎」

实现物体选中、交互功能。

学习物理引擎，模拟重力、反弹、摩擦力等真实物理效果。

🎨. 「深入WebGL与着色器」

掌握GLSL语言，编写顶点着色器和片元着色器。

实现动态效果，如飘扬的旗帜、烟雾、波涛汹涌的海面等。

🎨. 「后期处理与场景优化」

对场景进行后期加工，如生化危机风格的闪烁画面、雪花电视效果、水下视角等。

结合曲线与物体运动，实现飞线、雷达、光强特效。

🎨. 「地理信息与3D建模」

利用地理数据生成建筑框架、数字城市等。

学习Blender建模技术，优化模型并导出到网页，实现复杂动画（如人物、物体动画）。

🎨. 「CSS3D渲染器」

实现网页元素与3D场景的互动，如文字、标识随场景变换。

01. 添加坐标轴辅助器

// 添加坐标轴辅助器（长度为5）const axesHelper = new THREE.AxesHelper(5);scene.add(axesHelper);

02. 设置物体移动

// 修改物体位置cube.position.set(3, 0, 0);  // 一次性设置cube.position.x = 3;         // 单独设置x轴// 动画移动function render() {  cube.position.x += 0.01;  if (cube.position.x > 5) cube.position.x = 0;  renderer.render(scene, camera);  requestAnimationFrame(render);}

03. 物体的缩放与旋转

// 缩放cube.scale.set(3, 2, 1);  // 各轴缩放比例cube.scale.x = 5;         // 单独设置x轴// 旋转（弧度制）cube.rotation.set(Math.PI / 4, 0, 0, "XZY");  // 绕x轴旋转45度

04. 应用requestAnimationFrame

function render() {  cube.rotation.x += 0.01;  renderer.render(scene, camera);  requestAnimationFrame(render);  // 循环调用}render();

05. 通过Clock跟踪时间处理动画

const clock = new THREE.Clock();function render() {  const elapsedTime = clock.getElapsedTime();  // 获取运行总时长  cube.position.x = elapsedTime % 5;          // 每5秒循环一次  renderer.render(scene, camera);  requestAnimationFrame(render);}

06. Gsap动画库基本使用

import gsap from"gsap";// 移动动画gsap.to(cube.position, {x: 5,duration: 5,repeat: -1,    // 无限循环yoyo: true     // 往返运动});// 旋转动画gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5});

07. Gsap控制动画属性与方法

const animation = gsap.to(cube.position, { x: 5, duration: 5});// 暂停/恢复动画window.addEventListener("dblclick", () => {if (animation.isActive()) {    animation.pause();  } else {    animation.resume();  }});

08. 根据尺寸变化实现自适应

window.addEventListener("resize", () => {  // 更新相机比例  camera.aspect = window.innerWidth / window.innerHeight;  camera.updateProjectionMatrix();    // 更新渲染器  renderer.setSize(window.innerWidth, window.innerHeight);  renderer.setPixelRatio(window.devicePixelRatio);});

09. 控制画布全屏和退出

window.addEventListener("dblclick", () => {  if (!document.fullscreenElement) {    renderer.domElement.requestFullscreen();  // 进入全屏  } else {    document.exitFullscreen();               // 退出全屏  }});

10. 图形用户界面（dat.GUI）

import * as dat from "dat.gui";const gui = new dat.GUI();// 控制位置gui.add(cube.position, "x").min(0).max(5).step(0.1).name("X轴位置");// 控制颜色const params = { color: "#ffff00" };gui.addColor(params, "color").onChange((value) => {  cube.material.color.set(value);});// 添加文件夹const folder = gui.addFolder("立方体");folder.add(cube.material, "wireframe");  // 线框模式

关键点总结「动画循环」：使用

requestAnimationFrame

实现平滑动画。