使用 Three.js 加载 3D 模型 glTF。
时间: 2024-04-18 11:30:01 浏览: 122
你可以使用 Three.js 来加载 glTF 格式的 3D 模型。首先,确保你已经引入了 Three.js 库。然后,按照以下步骤加载 glTF 模型:
1. 创建一个场景(scene)和一个相机(camera):
```javascript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
```
2. 创建一个渲染器(renderer),并设置其大小和渲染目标:
```javascript
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
```
3. 加载 glTF 模型:
```javascript
var loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', function(gltf) {
scene.add(gltf.scene);
}, undefined, function(error) {
console.error(error);
});
```
4. 添加光源和其他效果(可选):
```javascript
var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
```
5. 更新相机和场景,并渲染场景:
```javascript
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function resize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', resize, false);
animate();
```
这是一个基本的加载和渲染 glTF 模型的例子。你可以根据自己的需求进一步扩展和调整。希望能对你有所帮助!
阅读全文