首页three.js加载GLTF模型

three.js加载GLTF模型

时间: 2025-01-22 17:35:15 浏览: 45

### 使用Three.js加载GLTF模型为了在Three.js项目中成功加载并显示GLTF格式的3D模型，可以利用`THREE.GLTFLoader`类来实现这一功能[^1]。下面提供一段简单的JavaScript代码片段作为示例： ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; // 创建场景对象Scene const scene = new THREE.Scene(); // 初始化相机设置 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(2, 2, 2); // 设置渲染器参数 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加光源到场景中 (这里仅作简单示范) var light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(5, 3, 5).normalize(); scene.add(light); // 加载GLTF文件 const loader = new GLTFLoader().load( '/path/to/your/model.gltf', // 替换为实际路径 function(gltf){ const model = gltf.scene; scene.add(model); animate(); }, undefined, function(error){ console.error(error);} ); function animate(){ requestAnimationFrame(animate); renderer.render(scene, camera); } ``` 这段脚本展示了如何创建基本的WebGL环境，并通过指定URL地址加载外部GLTF资源至当前页面展示出来。

阅读全文