内容概述
Three.js 支持加载多种 3D 文件格式（如 GLTF、OBJ、FBX），这让开发者可以直接使用专业建模软件（如 Blender、Maya）创建的复杂模型。本专题将重点介绍 GLTF 格式的加载，并调整模型的位置和材质。
学习目标
- 理解常见 3D 文件格式及其特点。
- 掌握使用
GLTFLoader加载外部模型。 - 学会调整加载模型的属性（如位置、大小、材质）。
完整代码实现
我们将加载一个 GLTF 格式的狐狸模型（来自 Three.js 官方示例），并让它在场景中旋转。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Three.js - 加载外部模型</title><style>body { margin: 0; overflow: hidden; }canvas { display: block; }</style>
</head>
<body><!-- 引入 Three.js 和 GLTFLoader --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script><script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script><script>// 1. 初始化场景、相机和渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 2, 5);camera.lookAt(0, 0, 0);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 2. 添加光源const ambientLight = new THREE.AmbientLight![P1006 [NOIP 2008 提高组] 传纸条 题解](http://pic.xiahunao.cn/P1006 [NOIP 2008 提高组] 传纸条 题解)
