Three.js是一款基于WebGL的JavaScript 3D图形库，它可以让开发者在浏览器中创建和展示3D图形，包括模型、动画、场景等。本文将介绍如何使用Three.js入门，并通过一个实例来演示如何引入一个模型。
一、环境搭建
在使用Three.js之前，需要先搭建好开发环境。首先，需要在HTML文件中引入Three.js库：
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
然后，需要在JavaScript文件中创建一个场景、相机和渲染器：
// 创建场景
const scene = new THREE.Scene();// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
二、创建模型
在Three.js中，可以通过加载外部模型文件来创建模型。常见的模型文件格式包括OBJ、FBX、GLTF等。本文以GLTF格式为例，演示如何引入一个模型。
首先，需要在HTML文件中引入GLTFLoader.js库：
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
然后，在JavaScript文件中创建一个GLTFLoader对象，并使用它加载模型文件：
// 创建GLTFLoader对象
const loader = new THREE.GLTFLoader();// 加载模型文件
loader.load('model.gltf', function(gltf) {scene.add(gltf.scene);
}, undefined, function(error) {console.error(error);
});
其中，'model.gltf’是模型文件的路径，gltf.scene是模型的根节点，可以通过scene.add()方法将其添加到场景中。
三、渲染场景
最后，需要在JavaScript文件中添加一个渲染函数，用于在每一帧更新场景并渲染：
function render() {requestAnimationFrame(render);renderer.render(scene, camera);
}render();
至此，一个简单的Three.js场景就创建完成了。完整代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Three.js入门</title><style>body {margin: 0;padding: 0;overflow: hidden;}</style></head><body><script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script><script>// 创建场景const scene = new THREE.Scene();// 创建相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 5;// 创建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 创建GLTFLoader对象const loader = new THREE.GLTFLoader();// 加载模型文件loader.load('model.gltf', function(gltf) {scene.add(gltf.scene);}, undefined, function(error) {console.error(error);});// 渲染场景function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();</script></body>
</html>
需要注意的是，由于Three.js是基于WebGL的，因此需要浏览器支持WebGL才能正常运行。如果浏览器不支持WebGL，可以考虑使用其他的3D图形库，如Babylon.js等。
