GLTF Import
Import external 3D models
Overview
The GLTF element allows you to import external 3D models in the GLTF (GL Transmission Format) into your scene. GLTF is a standard file format for 3D scenes and models widely used in web-based 3D applications.
Key Features
- Import GLTF (.gltf) and GLB (.glb) files
- Full position, rotation, and scale control
- Preserves materials and textures
- Support for animations (when available)
Supported Formats
GLTF
.gltf
JSON format with external assets
GLB
.glb
Binary format (recommended)
GLB is recommended as it packages all assets into a single file.
Parameters
Configure your GLTF import.
url
URL or path to the GLTF file
models/chair.glb
x, y, z
Position in 3D space
0, 0, 0
rx, ry, rz
Rotation angles in degrees
0, 45, 0
scale
Uniform scale factor
1.0
Usage Example
Import a 3D model into your scene.
Basic Import
gltf
models/furniture.glb
0
0
0
1.0
This imports the furniture model at the origin with normal scale.
Rotated and Scaled Import
gltf
models/chair.glb
100
0
50
45
0.5
This imports a chair model at position (100, 0, 50), rotated 45 degrees, at half scale.
Best Practices
Tips for working with GLTF imports.
File Preparation
- Use optimized GLTF files to ensure good performance
- Keep model file sizes reasonable for web loading
- Use compressed GLB format for binary efficiency
- Center your model at origin before exporting
- Use consistent scale (meters recommended)
Import Tips
- Optimize models before importing (reduce polygon count)
- Use GLB format for best results with textures
- Test models for compatibility before deployment
- Use appropriate scaling to match your scene units
Performance Considerations
- Use compressed textures when possible
- Optimize model geometry before importing
- Consider using LOD (Level of Detail) versions for complex models
- Cache frequently used models
- Monitor memory usage when loading multiple models
Common Issues and Solutions
Solutions to frequently encountered problems.
Model not loading
Check if the URL path is correct and the file is accessible. Ensure the file is a valid GLTF/GLB format and CORS headers allow access if loading from a different domain.
Model appears too large or small
Adjust the scale parameter to match your scene scale. Models may be exported at different scales (e.g., centimeters vs meters).
Incorrect model orientation
Use rotation parameters (rx, ry, rz) to correct the orientation. Common adjustments include rotating 90 degrees to switch between Y-up and Z-up conventions.
Missing textures
Use GLB format instead of GLTF to ensure textures are embedded. For GLTF files, ensure texture files are in the correct relative paths.