在 Three.js 中加载 GLTF 格式的三维模型文件相对简单,你可以按照以下步骤进行操作:
准备你的 GLTF 文件:
首先确保你有一个包含了模型、纹理和其他相关资源的 GLTF 文件。通常,一个 GLTF 文件会包含一个或多个 .gltf 文件以及可能的 .bin 文件和相关的纹理文件(如 .jpg、.png 等)。在你的 HTML 文件中引入 Three.js 库:
在你的 HTML 文件中引入 Three.js 库。可以通过 CDN 或者本地文件的方式引入,例如: <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script>编写加载 GLTF 文件的代码:
使用 Three.js 提供的 GLTFLoader 来加载 GLTF 文件。确保你已经包含了 GLTFLoader 的脚本,或者通过 npm 安装并导入。
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script>
创建一个 Three.js 场景、相机和渲染器,并在加载完成后将模型添加到场景中。
// 创建 Three.js 场景
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.body.appendChild(renderer.domElement);
// 创建 GLTFLoader 实例
var loader = new THREE.GLTFLoader();
// 加载模型
loader.load(
'path/to/your/model.gltf',
function (gltf) {
// 模型加载成功后的回调函数
scene.add(gltf.scene);
},
function (xhr) {
// 模型加载中的回调函数,可以用于显示加载进度等信息
console.log((xhr.loaded / xhr.total * 100) + '% 已加载');
},
function (error) {
// 模型加载失败后的回调函数
console.error('模型加载失败', error);
}
);
// 渲染函数
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate(); 运行和调试:
将上述代码保存为一个 HTML 文件,并确保路径指向正确的 GLTF 文件。在浏览器中打开该 HTML 文件,你应该能够看到加载并渲染出的三维模型。通过这些步骤,你可以利用 Three.js 的 GLTFLoader 来加载和显示 GLTF 格式的三维模型文件。加载成功后,你可以进一步探索如何在 Three.js 中对模型进行操作、添加动画、调整光照效果等。
网友回复


