要实现HTML5中的3D效果需结合WebGL与JavaScript，1. 使用<canvas>获取WebGL上下文并编写着色器；2. 借助Three.js创建场景、相机、几何体与动画；3. 添加光照与材质增强真实感；4. 通过GLTFLoader等加载外部模型。
要在HTML5中实现3D效果，主要依赖于WebGL技术，它允许在浏览器中渲染高性能的3D图形而无需插件。虽然HTML5本身不直接支持3D建模，但通过结合JavaScript和WebGL，可以轻松创建交互式3D场景。以下是入门的关键步骤和常用工具。
1. 理解WebGL基础
WebGL（Web Graphics Library）是基于OpenGL ES的JavaScript API，可以直接调用GPU进行3D渲染。要在HTML页面中使用WebGL，你需要：
- 一个<canvas>元素作为渲染容器
- 获取WebGL上下文并编写着色器程序（Shader）
- 定义顶点数据、矩阵变换和渲染逻辑
原生WebGL代码较复杂，适合深入学习图形学原理，但初学者建议使用封装库简化开发。
2. 使用Three.js快速上手
Three.js 是最流行的3D JavaScript库，极大简化了WebGL的使用。你可以用几行代码创建相机、灯光、几何体和动画。
立即学习“前端免费学习笔记（深入）”；
基本结构示例：
<font face="Courier New">
<canvas id="myCanvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
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();
</script>
</font>
这段代码创建了一个旋转的绿色立方体，展示了Three.js的核心流程：构建场景 → 添加对象 → 渲染动画。
3. 添加光照与材质增强真实感
要让3D对象看起来更真实，需引入光源和高级材质：
- 使用THREE.DirectionalLight或THREE.PointLight添加光照
- 替换MeshBasicMaterial为MeshPhongMaterial或MeshStandardMaterial以支持光影效果
- 加载纹理贴图提升视觉细节
例如：
<font face="Courier New">
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);
const material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
</font>
4. 加载外部3D模型
实际项目中常使用Blender、Maya等工具制作模型，导出为glTF、OBJ等格式后在网页中加载。
Three.js提供GLTFLoader、OBJLoader等辅助类：
<font face="Courier New">
const loader = new THREE.GLTFLoader();
loader.load('models/duck.gltf', (gltf) => {
scene.add(gltf.scene);
});
</font>
确保服务器正确配置以支持这些文件类型的MIME类型。
基本上就这些。掌握Three.js + WebGL的组合，你就能在HTML5中高效开发出丰富的3D内容。从简单几何体开始，逐步尝试动画、交互和模型加载，是入门的最佳路径。
