html 5 通过 Three.js可实现 3D 模型渲染。首先引入 Three.js 库，创建场景、相机、渲染器和几何体，如立方体；在动画 循环 中更新旋转并渲染画面；支持加载 glTF 等外部模型，需服务器环境运行。1. 引入 Three.js cdn；2. 初始化场景、透视相机（位置 z =5）、webgl渲染器并绑定 canvas；3. 创建 BoxGeometry 与 MeshBasicMaterial 组成网格 对象 添加至场景；4. requestanimationFrame 驱动动画循环，持续更新 cube.rotation 实现旋转；5. 监听 resize事件 适配窗口变化；6. 使用 GLTFLoader 加载外部模型，注意路径正确及本地服务运行。掌握核心四要素（Scene、Camera、Renderer、Mesh）后可扩展灯光、纹理、控制交互等功能。
html5 本身不直接支持 3D 模型渲染，但结合 javaScript 库如 Three.js，可以在网页中轻松创建和展示 3D 内容。Three.js 是一个基于 WebGL 的高级库，让开发者无需深入图形学细节就能在 浏览器 中实现 3D 效果。
1. 准备工作：引入 Three.js
要开始使用 Three.js，首先需要在 HTML 文件中引入该库。可以通过 CDN 快速加载：
将这段代码放入 HTML 的 <head> 或 <body> 底部，确保脚本能被正确加载。
2. 创建基本的 3D 场景结构
每个 Three.js 项目都需要四个基本元素：场景（Scene）、相机（Camera）、渲染器（Renderer）和几何对象（如立方体、球体等）。
立即学习 “ 前端免费学习笔记（深入）”；
以下是一个完整的基础示例，展示如何创建一个旋转的立方体：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Three.js 入门示例 </title> <style> body {margin: 0; overflow: hidden;} canvas {display: block;} </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/three@0.152.0/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); // 4. 添加一个立方体 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true}); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 5. 动画循环 function animate() { requestAnimationFrame(animate); // 旋转立方体 cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); // 6. 处理窗口缩放 window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); </script> </body> </html>
3. 关键概念说明
- Scene（场景）：所有 3D 对象的容器，类似舞台。
- Camera（相机）：决定用户从哪个角度观看场景。常用的是透视相机
PerspectiveCamera。 - Renderer（渲染器）：将场景和相机的内容绘制到 canvas 上，使用 WebGL 渲染。
- Mesh（网格）：由几何体（Geometry）和材质（Material）组成，是可见的 3D 物体。
- Animation Loop：使用
requestAnimationFrame实现持续更新画面，实现动画效果。
4. 加载外部 3D 模型
Three.js 支持加载 glTF、OBJ、FBX 等格式的模型。以 glTF 为例（推荐格式）：
// 引入 GLTF 加载器（需额外脚本）<script src="https://cdn.jsdelivr.net/npm/three@0.152.0/examples/js/loaders/GLTFLoader.js"></script> // 在脚本中加载模型 const loader = new THREE.GLTFLoader(); loader.load('path/to/model.gltf', (gltf) => {scene.add(gltf.scene); }, undefined, (error) => {console.error('加载失败：', error); });
注意：需确保模型文件路径正确，并在服务器环境下运行（不能直接双击 HTML 打开）。
基本上就这些。掌握基础结构后，你可以添加灯光、阴影、纹理、交互控制（如 OrbitControls）来增强效果。Three.js 文档和示例丰富，适合边学边练。不复杂但容易忽略细节，比如坐标系、单位、渲染顺序等。多试几次就能上手。
