1、3D交互初探：什么是3D网页交互？Three.js简介、WebGL与浏览器渲染、课程项目预览
1.1 从平面到立体：3D网页交互到底是什么？
说实话，很多人第一次听到「3D网页交互」这个词，第一反应是——「哦，就是网页里放个旋转的立方体呗？」
嗯，差不多，但远不止这么简单。
我个人的理解是：3D网页交互，就是让用户在浏览器里像操作真实物体一样，去旋转、缩放、点击、拖拽一个三维场景。 你想想看，传统的网页是平面的，你只能上下滑动、点链接。但3D网页不一样——你可以走进一个虚拟房间，拿起一个杯子，甚至从任意角度观察一个产品的内部结构。
我在项目中遇到过最典型的场景是：一个家具电商客户，想让用户在线查看沙发的3D模型。用户不仅能看到沙发的每个角度，还能点击更换布料颜色、拖动查看细节。这就是3D网页交互的典型应用。
说白了，3D交互的核心就三件事：
- 渲染：把3D模型变成屏幕上能看到的图像
- 控制：让用户能用鼠标、键盘或触屏操作场景
- 反馈：用户操作后，场景给出实时响应
这三件事，就是我们这门课要一步步攻克的。
1.2 Three.js是什么？为什么选它？
好，问题来了：在浏览器里做3D，难道要从零开始写渲染引擎吗？
当然不。这就是Three.js登场的时候了。
Three.js是一个基于WebGL的JavaScript 3D库。 它把底层WebGL那些繁琐的API封装成了简单好用的对象。你不需要懂矩阵运算、不需要写着色器代码，就能快速搭建一个3D场景。
我刚开始学3D的时候，也试过直接写原生WebGL。结果呢？光是画一个三角形就写了上百行代码。后来换成Three.js，同样的效果，十几行代码搞定。嗯，这就是我为什么强烈推荐它。
来看一个最简单的例子：
// 创建场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// 动画循环
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();你看，核心就三个要素：场景(Scene)、相机(Camera)、渲染器(Renderer)。再加上一个物体(Mesh)，一个动画循环，一个3D场景就跑起来了。
核心概念速览：
| 概念 | 作用 | 类比 |
|---|---|---|
| Scene（场景） | 容纳所有物体的容器 | 舞台 |
| Camera（相机） | 决定从哪个角度观察 | 摄影师的眼睛 |
| Renderer（渲染器） | 把3D画面绘制到屏幕上 | 投影仪 |
| Mesh（网格） | 可见的3D物体 | 演员 |
1.3 WebGL与浏览器渲染：底层到底发生了什么？
你可能会问：Three.js这么方便，那WebGL是不是就没用了？
恰恰相反。Three.js是建立在WebGL之上的。理解WebGL，能帮你写出更高效的Three.js代码。
WebGL是浏览器内置的一个底层图形API。 它直接调用GPU（显卡）来渲染图形。没有WebGL，Three.js就只是个空壳子。
我记得有一次做性能优化，场景里有上千个物体，帧率掉到了20帧。我一开始以为是Three.js的问题，后来发现是WebGL的绘制调用次数太多了。嗯，这就是为什么你需要了解底层——不懂WebGL，你连问题出在哪都不知道。
浏览器渲染3D的大致流程是这样的：
- CPU准备数据：计算物体的位置、颜色、纹理等
- 数据传给GPU：通过WebGL接口把数据发送到显存
- GPU执行着色器：顶点着色器处理位置，片元着色器处理颜色
- 输出到屏幕：GPU把最终图像绘制到浏览器的画布上
整个过程每秒钟重复60次（理想情况下），就形成了流畅的动画。
小提示： 如果你发现页面卡顿，优先检查是不是「绘制调用」太多了。减少物体数量、合并几何体、使用实例化渲染，都是常见的优化手段。
注意： WebGL 2.0已经普及，但部分老旧浏览器（比如IE）不支持。建议使用Can I Use网站检查兼容性。我在项目中一般会加一个降级方案，比如显示一张静态图片。
1.4 课程项目预览：我们要做什么？
光说不练假把式。这门课的核心，就是带着你做一个完整的3D交互项目。
我们的最终目标是一个3D产品展示系统。你可以把它想象成一个在线展厅——用户可以用鼠标拖拽旋转产品，点击按钮切换颜色，甚至用滑块调整光照角度。
具体来说，我们会实现以下功能：
- 场景搭建：创建3D场景、相机、灯光
- 模型加载：导入外部3D模型（比如一个手机或汽车）
- 鼠标交互：拖拽旋转、缩放、点击选中
- UI联动：按钮切换材质、滑块控制动画
- 性能优化：让场景在手机上也能流畅运行
我建议你准备好一个自己喜欢的3D模型（.glb或.gltf格式），到时候可以直接拿来做实验。没有也没关系，我会提供示例模型。
好了，第一章就到这里。下一章我们开始动手——搭建你的第一个Three.js场景。
记住：3D交互没那么神秘，它只是一套新的工具和思维方式。 跟着我一步步来，你很快就能做出让人眼前一亮的东西。