如何在html添加3d模型

要在HTML中添加3D模型，可以使用WebGL或Three.js等库。以下是一个使用Three.js添加3D模型的示例代码：

首先，需要引入Three.js库和模型文件。假设模型文件名为“model.obj”和“model.mtl”，则可以使用以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r128/examples/js/loaders/MTLLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r128/examples/js/loaders/OBJLoader.js"></script>

然后，在HTML中创建一个容器用于渲染3D场景，例如：

<div id="container"></div>

接下来，使用JavaScript代码加载模型文件，并将其添加到场景中，例如：

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);

// 加载模型
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('model.mtl', function(materials) {
  materials.preload();
  var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.load('model.obj', function(object) {
    scene.add(object);
  });
});

// 渲染场景
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

这样，就可以在HTML中添加3D模型了。请注意，这只是一个简单的示例代码，实际使用时可能需要根据具体情况进行调整。