在HTML中创建3D模型通常涉及使用WebGL技术，它是一种用于渲染交互式2D和3D图形的JavaScript API，要在HTML页面上实现3D模型，你通常需要结合使用HTML、CSS以及JavaScript，并可能需要引入额外的库如Three.js来简化开发过程。
（图片来源网络，侵删）
下面是一个简单的步骤指南，展示如何在HTML中使用Three.js库创建一个基本的3D模型：
第一步：设置HTML结构
你需要一个基本的HTML文件结构，在你的HTML文件中，至少应该包含一个<div>元素作为3D场景的容器。
<!DOCTYPE html> <html> <head> <title>My 3D Model</title> <!引入Three.js库 > <script src="https://threejs.org/build/three.js"></script> <style> /* 可选的样式设置 */ body { margin: 0; } canvas { display: block; } </style> </head> <body> <!3D画布容器 > <div id="3dcontainer"> <canvas id="myCanvas"></canvas> </div> <!引入自定义的JS脚本 > <script src="script.js"></script> </body> </html>第二步：创建场景、相机和渲染器
接下来，在你的JavaScript文件（如上面HTML中的script.js）中，你需要初始化Three.js的基本组件：场景(Scene)、相机(Camera)和渲染器(Renderer)。
// 获取画布容器和画布元素 const container = document.getElementById(3dcontainer); const canvas = document.getElementById(myCanvas); // 创建场景 const scene = new THREE.Scene(); // 创建透视相机 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 设置相机位置 // 创建渲染器并添加到DOM中 const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement);第三步：添加光源
为了让你的3D模型看起来更加真实，可以添加光源到场景中。
// 创建环境光 const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4); scene.add(ambientLight); // 创建点光源 const pointLight = new THREE.PointLight(0xffffff, 0.8); pointLight.position.set(10, 10, 10); // 设置光源位置 scene.add(pointLight);第四步：加载和添加3D模型
现在你可以加载3D模型到场景中，Three.js支持多种3D模型格式，如GLTF、OBJ等，这里以GLTF格式为例。
// 使用GLTFLoader加载模型 const loader = new THREE.GLTFLoader(); loader.load( path_to_your_model.gltf, // 模型文件路径 function (gltf) { scene.add(gltf.scene); // 将模型添加到场景中 }, undefined, // 进度回调函数（可选） function (error) { console.error(error); // 错误处理（可选） } );第五步：渲染循环
你需要创建一个动画循环来不断更新和渲染场景。
function animate() { requestAnimationFrame(animate); // 请求下一帧动画 // 更新场景和相机 renderer.render(scene, camera); } animate(); // 启动动画循环第六步：窗口大小调整处理
为了确保3D场景在不同尺寸的窗口下都能正确显示，你需要监听窗口大小变化事件，并相应地调整相机和渲染器的尺寸。
window.addEventListener(resize, onWindowResize, false); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }完成以上步骤后，你就在HTML中创建了一个简单的3D模型，当然，这只是入门级别的示例，Three.js库提供了丰富的功能和方法来制作更复杂、更具交互性的3D场景，要深入了解Three.js，建议阅读官方文档和教程，以便掌握更多高级技术和效果。
