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等。
