HTML5本身不支持建模，需借助three.js等JavaScript库通过WebGL渲染3D模型；<canvas>仅提供绘图表面，无原生建模标签；推荐使用.glb格式配合GLTFLoader快速加载。
HTML5 本身不提供建模能力——它没有 THREE.Mesh、没有 GLTFLoader、也不直接解析 .obj 或 .gltf 文件。所谓“HTML5建模”，实际是用 HTML5 页面作为容器，加载 JavaScript 3D 库（最常见的是 three.js）来渲染模型。
为什么直接写 HTML5 标签无法建模
HTML5 的 <canvas> 元素只是绘图表面，类似一张空白画布；它不理解顶点、法线、材质或骨骼动画。建模和渲染必须由 WebGL（通过 WebGLRenderingContext）驱动，而手写 WebGL 着色器和缓冲区管理对新手极不友好。
-
<model-viewer>是一个 Web Component，但它底层仍依赖three.js或babylon.js，不是 HTML5 原生能力 -
浏览器不支持
<mesh>、<geometry>这类“建模标签”——它们不存在于任何 HTML 规范中 - 所谓“HTML5 3D”教程，99% 实际教的是
three.js+<canvas>+HTML5页面结构的组合用法
新手第一块可运行的 3D 模型代码（three.js + GLTF）
别从“画三角形”开始，直接加载一个现成模型。确保你有网络访问权限（CDN 加载库），且模型文件路径正确。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GLTF 模型加载</title>
<style>body { margin: 0; } canvas { display: block; }</style>
</head>
<body>
<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();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const loader = new GLTFLoader();
loader.load(
'model.glb', // 替换为你自己的 .glb 文件路径（需同域或开启 CORS）
(gltf) => {
scene.add(gltf.scene);
},
undefined,
(err) => console.error('加载失败:', err)
);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();</script> </body> </html>
关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须用
type="module"，否则import会报错 -
model.glb要放在同目录下，或配置本地服务器（python3 -m http.server），不能双击打开.html——否则浏览器会因 CORS 拒绝加载二进制模型 - 版本号（如
0.160.1）要与文档匹配，新版GLTFLoader已移出examples/js，必须用examples/jsm/
模型格式选 .glb 而不是 .obj 的真实原因
.obj 只存几何体，贴图、材质、动画全靠外部 .mtl 和图片文件，加载时需多请求、易出路径错误；.glb 是二进制封装格式，把模型、材质、纹理、动画全部打包进一个文件，GLTFLoader 一行就能加载完成。
- Blender 导出时勾选 “Export as Binary (.glb)”
- 不要用在线转换工具转
.obj → .glb，常丢失 PBR 材质参数 -
.gltf（JSON 版）适合调试，但生产环境优先用.glb——体积更小、解析更快
真正卡住新手的往往不是代码，而是环境：没起本地服务、模型路径不对、CORS 报错却误以为是 JS 写错了、或者用了过时的 three.js 示例链接。把 console.error 里的完整错误信息复制出来搜，比看“HTML5建模教程”有效得多。
