blender导出html5模型的正确路径是导出gltf格式（推荐.glb），再用three.js等库在网页中加载渲染；需注意材质节点、缩放旋转、纹理嵌入及前端光照、cors等配置。
Blender 本身不直接“导出 HTML5 模型”，HTML5 也不原生支持三维模型；所谓“Blender 转 HTML5”，实质是把 Blender 中建好的模型导出为通用 3D 格式（如 glTF），再用 JavaScript 库（如 three.js）在网页中加载渲染。跳过这层理解，直接搜“HTML5 建模”容易配错工具链。
Blender 导出 glTF 是当前唯一推荐路径
glTF（.glb 或 .gltf）是 WebGL 和 HTML5 3D 生态事实标准，被 three.js、Babylon.js、model-viewer 等广泛原生支持。Blender 自带官方 glTF 2.0 Exporter 插件（2.8+ 默认启用），无需第三方插件。
导出前注意：
- 确保所有材质使用
Principled BSDF节点（glTF 不支持 Cycles 特有节点或 EEVEE 后处理） - 应用缩放与旋转：
Ctrl+A → Scale & Rotation，否则模型可能缩放异常或朝向错误 - 纹理贴图需打包进 .blend 文件（
Image → Pack）或放在同级textures/目录下，导出时勾选Embed Textures - 导出格式优先选
glb（二进制单文件），比gltf + bin + textures更易部署
three.js 加载 glb 模型的最小可行代码
不用构建工具、不配 webpack，纯前端 HTML 就能跑起来。关键点不是“怎么写 JS”，而是“怎么让模型真正可见”：
立即学习“前端免费学习笔记（深入）”；
-
GLTFLoader需单独引入（非 three.js 核心包内置） - 必须等
renderer初始化完成后再调用load()，否则报Cannot read property 'scene' of undefined - 模型默认在原点，常需手动
scale和position，否则可能小到看不见或卡在视锥外 - 记得加
AmbientLight和DirectionalLight，否则MeshStandardMaterial渲染全黑
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<div id="container"></div>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.1/examples/jsm/Three.module.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.160.1/examples/jsm/loaders/GLTFLoader.js';
<pre class='brush:php;toolbar:false;'>const scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
const light = new THREE.AmbientLight(0x404040);
scene.add(light);
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(1, 1, 1);
scene.add(dirLight);
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
const model = gltf.scene;
model.scale.set(2, 2, 2); // 关键：Blender 单位常偏小
model.position.y = -1;
scene.add(model);
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
