html5本身不支持建模，需借助three.js等javascript库通过webgl渲染3d模型；仅提供绘图表面，无原生建模标签；推荐使用.glb格式配合gltfloader快速加载。
HTML5 本身不提供建模能力——它没有 THREE.Mesh、没有 GLTFLoader、也不直接解析 .obj 或 .gltf 文件。所谓“HTML5建模”，实际是用 HTML5 页面作为容器，加载 JavaScript 3D 库（最常见的是 three.js）来渲染模型。
为什么直接写 HTML5 标签无法建模
HTML5 的 <canvas></canvas> 元素只是绘图表面，类似一张空白画布；它不理解顶点、法线、材质或骨骼动画。建模和渲染必须由 WebGL（通过 WebGLRenderingContext）驱动，而手写 WebGL 着色器和缓冲区管理对新手极不友好。
-
<model-viewer></model-viewer>是一个 Web Component，但它底层仍依赖three.js或babylon.js，不是 HTML5 原生能力 -
浏览器不支持
<mesh></mesh>、<geometry></geometry>这类“建模标签”——它们不存在于任何 HTML 规范中 - 所谓“HTML5 3D”教程，99% 实际教的是
three.js+<canvas></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();
