HTML 在JavaScript/HTML5中显示3D模型

在本文中，我们将介绍如何在JavaScript/HTML5中显示3D模型。HTML5为我们提供了强大的工具和功能，使我们能够使用JavaScript在网页上呈现各种类型的3D模型。

阅读更多：HTML 教程

什么是HTML5？

HTML5是一种用于构建网页的标准技术。它由HTML、CSS和JavaScript组成，并且提供了许多新的功能和API，使我们能够创建更丰富、更交互式的网页。

使用Three.js库

Three.js是一个用于在网页上显示3D模型的JavaScript库。它提供了许多功能和工具，使我们能够轻松地呈现和操作3D模型。

首先，我们需要在HTML文件中导入Three.js库。我们可以使用以下代码在标签中导入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

接下来，我们可以创建一个

<canvas id="canvas"></canvas>

然后，我们需要在JavaScript文件中编写代码来处理和渲染我们的3D模型。我们可以使用以下代码来创建一个简单的3D场景，并将其添加到

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

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

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("canvas") });

// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

// 添加一个立方体到场景中
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 移动相机位置
camera.position.z = 5;

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

上面的代码会在网页上创建一个简单的3D场景，并显示一个旋转的立方体。

导入外部模型

除了创建简单的几何体外，我们还可以导入外部的3D模型。Three.js支持许多不同的3D文件格式，如.obj、.gltf、.fbx等。

首先，我们需要有一个3D模型文件。在这里，我们以导入一个名为model.obj的模型文件为例。

在HTML文件中，我们需要导入OBJLoader.js用于解析和加载.obj文件。我们可以使用以下代码：

<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>

然后，我们可以在JavaScript文件中编写代码来导入并显示模型。我们可以使用以下代码：

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

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

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("canvas") });

// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

// 添加照明
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// 加载模型
const loader = new THREE.OBJLoader();
loader.load('model.obj', function (object) {
  scene.add(object);
});

// 移动相机位置
camera.position.z = 5;

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