WebGL是浏览器实现真3D渲染的底层API，HTML5原生标签仅支持伪3D；需实时渲染等复杂功能时应选Three.js等封装库，避免原生WebGL开发陷阱，并注意模型加载、内存管理与性能优化细节。
用 WebGL 而不是 HTML5 原生标签做 3D
HTML5 本身没有“画 3D 图形”的能力，<canvas></canvas> 只是画布容器，真正干活的是 WebGL —— 它是浏览器暴露的底层图形 API。想绕过它用纯 HTML/CSS 做真正可交互、带光照和深度的 3D，基本做不到，顶多是伪 3D（比如 CSS transform: rotateX），一动就穿帮。
所以第一步不是写 HTML，而是确认你是否需要：实时渲染、模型加载、相机控制、阴影或后期效果。如果只是静态旋转图标，CSS 3D 可能够用；否则直接上 WebGL 或封装库。
初学者别硬啃原生 WebGL，先用 Three.js
原生 WebGL 需手动管理着色器、缓冲区、矩阵、帧缓冲……写个旋转立方体要 200+ 行且极易出错。而 Three.js 把这些封装成直观对象：Scene、Camera、Mesh、Renderer。
-
Three.js不是黑盒，它暴露了底层接口（比如你可以替换MeshStandardMaterial的onBeforeCompile修改着色器） - 注意版本差异：v128+ 默认使用
import，CDN 引入需选对应版本，否则THREE.WebGLRenderer可能报undefined - 常见错误：忘了调用
renderer.render(scene, camera)，或者没在requestAnimationFrame里循环渲染，画面就卡死在第一帧
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();
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();
Three.js 加载模型时，路径和格式别踩坑
模型不是扔进文件夹就能加载的。浏览器同源策略下，GLTFLoader 加载本地 .glb 文件会触发 CORS 错误，直接双击 HTML 打开必失败。
立即学习“前端免费学习笔记（深入）”；
- 开发阶段用
http-server或 VS Code 的 Live Server 插件起一个本地服务，让地址变成http://localhost:8080 -
.glb比.gltf更推荐：它是二进制打包格式，只用一个文件，不用处理纹理外链 - 加载前记得实例化
GLTFLoader，别漏掉import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'（注意路径中的jsm） - 错误信息如
TypeError: Cannot read property 'scene' of undefined，大概率是模型还没加载完就访问gltf.scene，必须放在loader.load(..., (gltf) => { ... })回调里
性能敏感点：别在动画循环里新建对象
requestAnimationFrame 每秒跑 60 次，循环里用 new THREE.Vector3() 或拼接字符串生成材质名，内存会疯涨，很快卡顿甚至崩溃。
- 把可复用的对象提到循环外：比如
const tempVec = new THREE.Vector3()，循环内用tempVec.set(x, y, z).applyMatrix4(matrix) - 材质尽量复用，别每次渲染都
new MeshStandardMaterial(...)；颜色变化用material.color.set(0xff0000) - 开启
renderer.setPixelRatio(window.devicePixelRatio)，否则高清屏上模型模糊；但别在 resize 里反复调，只在初始化或像素比变化时设一次
真正麻烦的从来不是“怎么画出来”，而是“怎么让它稳、快、不崩”。模型面数、纹理尺寸、实时阴影计算、未清理的事件监听器——这些细节堆在一起，比第一个 render() 调用难十倍。
