Web 3D 的觉醒

【画一个三角形需要……】
  ① 创建着色器程序（GLSL 代码 30 行）
  ② 准备顶点数据（缓冲）
  ③ 写渲染循环（requestAnimationFrame）
  ④ 处理矩阵（数学 50 行）
  → 300 行代码画个三角形 —— 所以用 Three.js！

【GLSL 着色器（了解语法）】
  // 顶点着色器：决定顶点画在哪
  void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
  // 片元着色器：决定像素什么颜色
  void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);   // 红色
  }

【WebGL vs WebGPU（未来）】
  WebGL：当前标准（Three.js 主力支持）
  WebGPU：新一代 API（更现代、性能更强）——未来方向
  → 学 Three.js 不用关心底层，引擎两个都兼容

【浏览器兼容】
  WebGL 支持率 98%+（所有现代浏览器）
  → 「免安装点开即玩」的硬件基础就是它

【技术栈全景（四层）】
  底层：WebGL / WebGPU
  引擎：Three.js（最流行）
  框架：Babylon.js / PlayCanvas / React Three Fiber
  平台：H5 / 微信小游戏 / 小程序

import * as THREE from "three";

// ① 场景
const scene = new THREE.Scene();

// ② 相机（透视：75° 视角，近远裁剪）
const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5);         // 放在(0,2,5)

// ③ 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

// ④ 物体：几何体 + 材质 = 网格
const geometry = new THREE.BoxGeometry(1, 1, 1);       // 立方体
const material = new THREE.MeshStandardMaterial({ color: 0x2dd4bf });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);                                        // 放进场景

// ⑤ 灯光（没光 = 全黑）
scene.add(new THREE.AmbientLight(0xffffff, 0.5));       // 环境光
const dir = new THREE.DirectionalLight(0xffffff, 1);    // 方向光
dir.position.set(3, 5, 3);
scene.add(dir);

// ⑥ 动画循环（第二十一本游戏循环！）
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.y += 0.01;          // 每帧转一点
    renderer.render(scene, camera);
}
animate();

【六大对象一句话】
  Scene 装世界 / Camera 看世界 / Renderer 画世界
  Geometry 形状 / Material 表面 / Mesh 可见物
  → 万事万物都是「几何+材质」组合进场景

【Hello 之后学什么】
  官网示例库（threejs.org/examples）——最好的教材
  常用：导入模型、动画、粒子、后处理特效

// 场景图：父子关系（爸爸动，孩子跟着动）
const player = new THREE.Group();            // 空组（身体）
const head = new THREE.Mesh(sphereGeo, skinMat);
head.position.y = 1.7;                        // 相对身体的位置
player.add(head);                             // 头是身体的子节点
scene.add(player);                            // 身体进场景
player.position.x += 1;                       // 移动身体 → 头跟着走！

// PBR 材质：物理真实
const metal = new THREE.MeshStandardMaterial({
    color: 0xc0c0c0,
    metalness: 0.9,       // 金属度：高 = 金属
    roughness: 0.1,       // 粗糙度：低 = 光滑反光
});

// 贴图：细节靠贴图补（不用建模）
const woodTex = new THREE.TextureLoader().load("wood.jpg");
const floor = new THREE.Mesh(
    new THREE.PlaneGeometry(20, 20),
    new THREE.MeshStandardMaterial({ map: woodTex })  // 贴图材质
);
floor.rotation.x = -Math.PI / 2;              // 地面躺平
scene.add(floor);

// 灯光组合（氛围）
scene.add(new THREE.AmbientLight(0xffffff, 0.3));     // 全局补光
const sun = new THREE.DirectionalLight(0xffeedd, 1);  // 太阳
sun.position.set(10, 20, 5);
scene.add(sun);
const lamp = new THREE.PointLight(0xff8800, 1, 10);   // 暖灯泡
lamp.position.set(2, 3, 2);
scene.add(lamp);

【打光三原则】
  全局环境光：保证不黑
  主光（方向光）：立体感来源（侧上 45°）
  点缀光（点/聚光）：氛围与焦点
  → 灯光数量少而精（每盏灯都是渲染成本）

// 轨道控制器（鼠标旋转/缩放——3D 查看器标配）
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;          // 惯性手感

// Raycaster：点击拾取（点选交互的灵魂）
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

renderer.domElement.addEventListener("click", (e) => {
    // 屏幕坐标 → 归一化设备坐标
    pointer.x = (e.clientX / innerWidth) * 2 - 1;
    pointer.y = -(e.clientY / innerHeight) * 2 + 1;

    raycaster.setFromCamera(pointer, camera);   // 从相机发射线
    const hits = raycaster.intersectObjects(scene.children, true);
    if (hits.length > 0) {
        console.log("点到了：", hits[0].object.name);
        highlight(hits[0].object);              // 高亮被点中的
    }
});

【相机两种选型】
  透视（PerspectiveCamera）：近大远小——真实感（游戏）
  正交（OrthographicCamera）：平行投影——2.5D/俯视策略

【游戏视角】
  第一人称：相机 = 角色眼睛（射击/FPS）
  第三人称：相机跟在角色后（动作/RPG）
  → 相机跟随：每帧 lerp 平滑跟随角色位置

【Raycaster 应用】
  点击拾取（选物体/捡装备）
  悬停高亮（鼠标指哪亮哪）
  拖拽移动（抓住物体跟着走）
  → 所有「鼠标和 3D 世界互动」都是它

// ① 动画循环（游戏循环的 Web 版）
let last = 0;
function animate(time) {
    requestAnimationFrame(animate);
    const dt = (time - last) / 1000;    // deltaTime！（第二十一本）
    last = time;

    // 关键帧动画：补间插值
    cube.position.y = 1 + Math.sin(time / 500) * 0.5;   // 上下浮动
    cube.rotation.y += dt * 0.5;                        // 匀速旋转

    controls.update();
    renderer.render(scene, camera);
}
animate();

// ② 骨骼动画（导入角色后播放）
gltf.animations;                        // 模型自带动作列表
mixer = new THREE.AnimationMixer(gltf.scene);
const walk = mixer.clipAction(gltf.animations.find(a => a.name === "Walk"));
walk.play();                            // 播放走路动画

// ③ 物理引擎（cannon-es：刚体 + 重力 + 碰撞）
import * as CANNON from "cannon-es";
const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.82, 0) });
const ballBody = new CANNON.Body({ mass: 1 });       // 刚体
ballBody.addShape(new CANNON.Sphere(0.5));
world.addBody(ballBody);

function animate(time) {
    world.step(1 / 60);                 // 物理步进
    ballMesh.position.copy(ballBody.position);        // 物理→渲染同步
    renderer.render(scene, camera);
}

【动画 vs 物理分工】
  动画：播放预设动作（走路/攻击——美术做好的）
  物理：实时计算（落体/碰撞/弹跳——引擎算的）
  → 角色走路用动画，石头下落用物理

【物理同步模式】
  物理引擎算位置 → 每帧同步给 Three 网格
  → 「物理世界」和「渲染世界」两个世界对齐

// 加载 glTF 模型（GLTFLoader）
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";

// Draco 压缩：几何数据先解压
const draco = new DRACOLoader();
draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.4.1/");

const loader = new GLTFLoader();
loader.setDRACOLoader(draco);
loader.load("models/robot.glb", (gltf) => {
    scene.add(gltf.scene);              // 模型入场景
    // gltf.animations 模型自带动画（第5站播放）
}, (xhr) => {
    console.log("加载进度：", xhr.loaded / xhr.total * 100 + "%");
});

【glTF 是什么】
  Web 3D 的标准格式（“3D 世界的 JPEG”）
  一个 .glb 文件 = 几何 + 材质 + 贴图 + 动画 + 场景
  → Three.js / Babylon / Unity WebGL 都支持

【资产压缩三件套】
  Draco：几何压缩（顶点位置/法线压 80%）
  KTX2 ：纹理压缩（GPU 直接读，省显存省加载）
  Meshopt：现代几何压缩（更小更快）
  → 首屏加载快的幕后功臣（第10站展开）

【内容管线全流程】
  Blender 建模/绑定 → 导出 .glb → Draco/KTX2 压缩
  → 上传 CDN（第10站）→ Three.js 加载 → 场景中使用

【模型来源】
  自建：Blender（免费）/ 建模师外包
  现成：Sketchfab（模型市场）/ Quixel（素材库）
  → 个人开发先用现成模型，练手不卡美术

【坑：格式与兼容】
  老格式（OBJ/DAE）：能用但不推荐（无压缩无动画）
  FBX：美术常用但大——转 glTF 再上网页
  → 统一走 glTF/GLB 是 Web 3D 的规矩

【框架对比】
  框架            定位            适合
  Three.js       3D 库（灵活）   3D 展示/轻游戏
  Babylon.js     游戏引擎        正经 Web 3D 游戏
  R3F (React)    组件化 3D       React 团队/数据可视化
  PlayCanvas     在线引擎        可视化拖拽
  Cocos Creator  小游戏引擎      微信小游戏（3D 也行）
  Unity WebGL    Unity 导出      已有 Unity 项目

【React Three Fiber（组件化 3D）】
<Canvas>
  <ambientLight />
  <mesh rotation={[0, angle, 0]}>
    <boxGeometry />
    <meshStandardMaterial color="teal" />
  </mesh>
</Canvas>
→ 用 JSX 组件描述 3D 场景（声明式！——第十九本 SwiftUI 同思想）

【选型口诀】
  3D 展示/学习   → Three.js
  正经 Web 游戏  → Babylon.js（引擎功能全）
  React 团队     → React Three Fiber
  微信小游戏     → Cocos Creator（最成熟路径）
  已有 Unity     → Unity WebGL 导出

【游戏引擎 vs 3D 库】
  3D 库：只管渲染（Three.js）——其他自己拼
  游戏引擎：渲染+场景+物理+UI+输入+资源管理一体化
  → 做「游戏」选引擎，做「展示」选库

// ① 键盘输入（WASD 移动——第二十一本轮询）
const keys = {};
addEventListener("keydown", e => keys[e.code] = true);
addEventListener("keyup", e => keys[e.code] = false);

// 每帧查状态（Update 里轮询）
function update(dt) {
    const speed = 3 * dt;                    // deltaTime 速度一致
    if (keys["KeyW"]) player.position.z -= speed;
    if (keys["KeyA"]) player.position.x -= speed;
    if (keys["KeyD"]) player.position.x += speed;
}

// ② 触屏（手机——虚拟摇杆）
// 触屏坐标 → 摇杆位移 → 角色方向移动（手势检测）

// ③ HUD：HTML 叠在 3D 上
// <div id="hud">金币：<span id="gold">0</span></div>
// CSS: position:fixed; z-index:10;（3D canvas 之上）

// ④ 点击拾取（第4站 Raycaster）——点击敌人开打
renderer.domElement.addEventListener("click", (e) => {
    const hit = pick(e);                     // 射线检测
    if (hit?.object.name === "enemy") attack(hit.object);
});

【输入设计原则】
  键盘：WASD/空格（桌面）
  鼠标：视角拖拽 + 点击
  触屏：虚拟摇杆 + 手势（手机优先）
  → 多端适配：检测设备类型切换输入方案

【UI 与 3D 分层】
  3D 场景（Canvas）+ 2D UI（HTML/CSS）两层
  → 3D 互动用射线，2D 信息用 HTML（开发简单）

【WebXR 初识】
  VR：眼镜看 3D 场景（AR/VR 设备）
  AR：3D 叠到现实（手机摄像头）
  → Three.js 官方 WebXR 支持——未来交互方向

【帧预算（60fps = 16.7ms/帧）——第二十一本同款】
  渲染 8ms + 逻辑 3ms + 物理 2ms + 余量
  → 用浏览器 Profiler（Performance 面板）先测量

【实例化（Instancing）：1000 棵树一次画】
const count = 1000;
const instanced = new THREE.InstancedMesh(geometry, material, count);
// 设置每棵的位置/旋转/缩放
for (let i = 0; i < count; i++) {
    const m = new THREE.Matrix4().makeTranslation(x[i], y[i], z[i]);
    instanced.setMatrixAt(i, m);
}
scene.add(instanced);
// → 1 次 Draw Call 画 1000 棵树（vs 1000 次）

【LOD（多级细节）】
new THREE.LOD()
  .addLevel(highModel, 0)      // 近处：高模
  .addLevel(midModel, 30)      // 中距离
  .addLevel(lowModel, 80);     // 远处：低模
// 相机近了自动换高模——性能与画质平衡

【性能排查流程】
  ① Performance/Profiler 采样 → 找热点帧
  ② 是 Draw Call 多？→ 实例化/合批/图集
  ③ 是像素多？→ LOD/遮挡剔除/降分辨率
  ④ 是 JS 慢？→ 避免每帧分配/对象池（第二十一本）
  → 先测量再优化（全系列铁律）

【手机特有】
  低端机 GPU 弱：降分辨率渲染（renderer.setPixelRatio）
  发热降频：负载平缓（别瞬间吃满）
  省电：画面静止时降帧率（60→30fps）

【显存管理】
  纹理 KTX2 压缩（第6站）——省显存
  离开场景释放：geometry.dispose()/material.dispose()

【加载进度条（LoadingManager）】
const manager = new THREE.LoadingManager();
manager.onProgress = (url, loaded, total) => {
    bar.style.width = (loaded / total * 100) + "%";   // 进度条
};
const loader = new GLTFLoader(manager);

【首屏优化策略】
  ① 分包：先加载「开场场景」（小）→ 后台加载正式场景（大）
  ② 骨架场景：先显示天空/地面（几 KB）→ 模型到了再出现
  ③ 压缩：Draco(几何) + KTX2(纹理) + brotli(传输) —— 体积减 70%
  ④ 懒加载：玩家走到哪，加载哪块（区域按需）

【发布平台】
  H5 页面：任意服务器/CDN 托管 → 链接即玩
  微信小游戏：Cocos 导出 → 微信开发者工具上传 → 审核
  → 国内「免下载」主战场是微信小游戏（社交裂变强）

【上线指标（Web 游戏）】
  首屏时间：< 3 秒（用户耐心上限）
  加载成功率：> 95%（弱网/低端机都能进）
  帧率：主流机型 > 50fps
  留存/分享：玩法 + 加载速度决定分享传播

【技术栈总结（全书串联）】
  底层 WebGL → 引擎 Three.js/Babylon
  → 模型 glTF+压缩 → 交互射线 → 性能实例化/LOD
  → 加载分包+CDN → 平台 H5/小游戏
  → 一条完整的 Web 3D 游戏生产线