🏄公司报销，培养我成一名 WebGL 工程师⛵️

效果

智慧城

智慧孪生类：智慧城市、智慧小区、智慧厂

大屏可视化：地球飞线

物品：配件3D、车、单个人

其他产业：室内设计、收费站

前提准备

Web 3D技术的应用场景

企业展示：如腾讯云官网，通过3D技术打造智慧、创新的企业形象。
新基建项目：数字孪生、智慧城市、智慧园区、智慧工厂、智慧消防等，均涉及3D可视化技术。

为啥学threejs?

从Three.js库入手

Three.js是一个简化WebGL开发的库，适合初学者快速入门。
直接使用WebGL需要掌握图形学知识及GLSL语言，而Three.js可以跳过复杂的底层实现。

要学的汇总总结

🎨. 掌握基础概念

点、线、面、几何体、材质、物体、场景、相机、渲染器、动画、控制器等。
学会搭建基础场景和3D物体，并调试代码。

🎨. 深入学习材质与光照

了解PBR（基于物理的渲染）技术，掌握环境贴图、凹凸贴图、置换贴图、金属贴图、粗糙度贴图等。
通过贴图实现逼真的光照效果，如石子凹凸、门面纹理等。

🎨. 学习粒子系统与特效

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

🎨. 交互与物理引擎

实现物体选中、交互功能。
学习物理引擎，模拟重力、反弹、摩擦力等真实物理效果。

🎨. 深入WebGL与着色器

掌握GLSL语言，编写顶点着色器和片元着色器。
实现动态效果，如飘扬的旗帜、烟雾、波涛汹涌的海面等。

🎨. 后期处理与场景优化

对场景进行后期加工，如生化危机风格的闪烁画面、雪花电视效果、水下视角等。
结合曲线与物体运动，实现飞线、雷达、光强特效。

🎨. 地理信息与3D建模

利用地理数据生成建筑框架、数字城市等。
学习Blender建模技术，优化模型并导出到网页，实现复杂动画（如人物、物体动画）。

🎨. CSS3D渲染器

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

01. 添加坐标轴辅助器

javascript 复制代码

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

02. 设置物体移动

javascript 复制代码

// 修改物体位置
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. 物体的缩放与旋转

javascript 复制代码

// 缩放
cube.scale.set(3, 2, 1);  // 各轴缩放比例
cube.scale.x = 5;         // 单独设置x轴

// 旋转（弧度制）
cube.rotation.set(Math.PI / 4, 0, 0, "XZY");  // 绕x轴旋转45度

04. 应用requestAnimationFrame

javascript 复制代码

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

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

javascript 复制代码

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动画库基本使用

javascript 复制代码

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控制动画属性与方法

javascript 复制代码

const animation = gsap.to(cube.position, { 
  x: 5, 
  duration: 5 
});

// 暂停/恢复动画
window.addEventListener("dblclick", () => {
  if (animation.isActive()) {
    animation.pause();
  } else {
    animation.resume();
  }
});

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

javascript 复制代码

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

09. 控制画布全屏和退出

javascript 复制代码

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

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

javascript 复制代码

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实现平滑动画。
时间控制 ：THREE.Clock用于精确控制动画时间。
响应式设计 ：通过监听resize事件适配不同屏幕尺寸。
交互控制 ：结合dat.GUI快速创建调试界面，Gsap实现复杂动画。
全屏操作：通过浏览器API实现双击全屏功能。