每天两小时学习three.js

总览：

入门并能制作简单作品： 1 - 2个月
达到熟练，能完成大多数项目： 4 - 6个月
达到精通，能解决复杂难题： 1年以上（持续学习过程）

第一阶段：入门基础 (预计：3 - 4周)

这个阶段的目标是理解核心概念，并能让一个3D场景在浏览器中跑起来。

第1周：环境搭建与第一个场景

学习目标： 了解Three.js的基本结构：场景（Scene）、相机（Camera）、渲染器（Renderer）、几何体（Geometry）、材质（Material）、网格（Mesh）。
学习内容：
1. 如何引入Three.js库（通过CDN或npm+构建工具如Vite）。
2. 创建场景、透视相机（PerspectiveCamera）和WebGL渲染器。
3. 创建一个立方体并添加到场景中。
4. 让渲染器循环渲染场景（requestAnimationFrame）。
代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Three.js Scene</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script>
        // 1. 创建场景
        const scene = new THREE.Scene();

        // 2. 创建相机（视野角度，宽高比，近截面，远截面）
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5; // 将相机向后移动，以便看到物体

        // 3. 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小为整个窗口
        document.body.appendChild(renderer.domElement); // 将画布添加到HTML中

        // 4. 创建物体（几何体 + 材质）
        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); // 将物体添加到场景中

        // 5. 渲染循环
        function animate() {
            requestAnimationFrame(animate); // 循环调用animate函数

            // 动画：让立方体旋转
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera); // 用相机渲染场景
        }
        animate(); // 启动循环
    </script>
</body>
</html>

第2-3周：光源、材质与动画

学习目标： 让场景看起来更真实，并实现更复杂的动画。
学习内容：
1. 光源： 环境光（AmbientLight）、点光源（PointLight）、平行光（DirectionalLight）、聚光灯（SpotLight）。
2. 标准网格材质（MeshStandardMaterial）： 与光源配合使用，能产生光影效果，支持粗糙度（roughness）、金属度（metalness）等PBR（基于物理的渲染）属性。
3. 使用GSAP或Tween.js等库实现更流畅、复杂的动画。
代码示例（在上一示例基础上修改）：

javascript 复制代码

// 移除MeshBasicMaterial，改用MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.5 });

// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光，柔和整体照明
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xffffff, 1); // 点光源，像灯泡
pointLight.position.set(2, 3, 4);
scene.add(pointLight);

// 可以添加轨道控制器，用鼠标拖拽查看场景
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 添加阻尼感，更平滑

// 在animate函数中更新控制器
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 必须更新
    renderer.render(scene, camera);
}
animate();

第4周：加载3D模型

学习目标： 学会将艺术家制作的外部模型（如.blender, .fbx, .gltf/.glb文件）导入到Three.js中。
学习内容：
1. 使用GLTFLoader加载.glb/.gltf格式（这是官方推荐的标准格式）。
2. 处理加载异步过程，调整模型位置、缩放比例。

javascript 复制代码

import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load(
    'path/to/your/model.glb', // 模型路径
    function (gltf) {
        // 加载完成回调
        const model = gltf.scene;
        scene.add(model); // 将整个模型添加到场景中
        console.log('Model loaded!', model);
        // 通常需要调整模型
        model.scale.set(0.5, 0.5, 0.5);
        model.position.y = -1;
    },
    undefined,
    function (error) {
        console.error('An error happened:', error);
    }
);

到此为止，大约1个月，你已经"入门"，可以制作一些简单的静态场景展示和基础动画。

第二阶段：熟练与应用 (预计：2 - 3个月)

这个阶段的目标是掌握常用高级技术，并能独立完成完整的3D项目。

第1-2月：深入核心技术

学习内容：
1. 着色器（Shaders）基础： 学习GLSL语言基础，了解顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）的作用。使用Three.js的ShaderMaterial或RawShaderMaterial创建自定义材质。这是实现高级视觉效果的关键。
2. 后期处理（Post-processing）： 给整个场景添加特效，如辉光（Bloom）、模糊、色彩校正、胶片颗粒等。使用EffectComposer、RenderPass和各种ShaderPass。
3. 性能优化： 理解dispose()方法管理内存，使用InstancedMesh渲染大量相同物体，使用LOD（Level of Detail）根据距离显示不同精度的模型。

第3月：项目实践

学习内容：
1. 选择一个完整的项目进行实践，例如：
  - 3D产品展示器： 360度查看产品，切换颜色/材质。
  - 交互式故事场景： 用户点击或移动到特定位置触发动画。
  - 数据可视化： 将数据用3D图表、地图等形式展现。
2. 学习与HTML UI（按钮、滑块等）进行交互。
3. 学习使用Raycaster进行物体点击、选择等交互检测。

javascript 复制代码

// Raycaster 简单示例：点击选择物体
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseClick(event) {
    // 将鼠标点击位置归一化为设备坐标（-1到+1）
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // 通过相机和鼠标位置更新射线
    raycaster.setFromCamera(mouse, camera);

    // 计算物体和射线的交点
    const intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
        console.log('你点击了：', intersects[0].object);
        // 可以在这里改变被点击物体的颜色等
        intersects[0].object.material.color.set(0xff0000);
    }
}
window.addEventListener('click', onMouseClick);

到此为止，大约3-4个月，你已经达到"熟练"，可以应对客户大多数的3D网页需求，并知道如何优化和debug。

第三阶段：进阶与精通 (持续6个月以上)

这个阶段没有终点，是不断探索和深化的过程。

学习内容：
1. 物理引擎： 集成Cannon.js或Ammo.js，为场景添加重力、碰撞、约束等物理效果。
2. 自定义着色器： 编写复杂的GLSL代码，实现水波、熔岩、高级雾效、扭曲等完全自定义的效果。
3. 高级动画： 使用骨骼动画、变形动画，以及复杂的动画状态机。
4. WebXR： 学习使用Three.js创建VR和AR体验。
5. 源码阅读： 阅读Three.js本身的源码，理解其内部机制，这能极大提升你解决问题的能力。

影响学习速度的关键因素

已有基础：
- 有Web前端基础（HTML, CSS, JavaScript）： 这是最大的加速器。特别是对JS的熟悉程度（ES6+语法、异步编程、模块化）直接影响学习速度。
- 有其它3D图形学基础/游戏开发经验（如Unity, Blender）： 你对3D概念（坐标系、变换、材质、光照）的理解会很快，只需学习Three.js的API即可。
- 数学基础： 线性代数（向量、矩阵）知识对理解3D变换、相机等非常有帮助，但不是绝对必要的前置条件，可以在学习中边用边学。
学习方法：
- 被动观看 vs 主动编码： 只看教程不动手，效率极低。必须每个示例都自己敲一遍并尝试修改参数。
- 项目驱动： 学完基础后，尽快开始做一个小项目。在项目中遇到问题并解决它，是学习最快的方式。
- 官方文档与示例： Three.js的官方文档和示例库是最好的学习资料，一定要学会查阅。
学习资源质量：
- 跟随一个结构清晰、更新的教程系列非常重要。

总结与建议

阶段	时间投入 (每天2小时)	可达水平	可完成项目
入门	1个月	掌握基础API，理解核心概念	旋转立方体、简单光源场景、加载静态模型
熟练	3-4个月	掌握交互、动画、模型加载、基础优化	产品展示页、简单3D展厅、基础交互游戏
进阶	6个月+	精通着色器、物理、性能深度优化	复杂交互项目、高级视觉效果、WebXR应用

最终建议：

不要贪多： 从最基础的示例开始，确保每个概念都理解透彻。
立即动手： 今天就跟着上面的第一个代码示例，在你的电脑上创建一个HTML文件并运行起来。
目标导向： 想清楚你学Three.js是为了什么（做网站特效、做游戏、做数据可视化？），这能帮助你更有针对性地学习相关模块。
保持耐心： 3D开发涉及的概念较多，初期可能会感到困惑，这是完全正常的。坚持每天学习和编码，积累一段时间后必然会有突破。