useGLTF()

Loading and Handling GLTF Models with useGLTF. Efficiently load and manage GLTF models in your web applications with the useGLTF function.

Usage

To facilitate the loading of GLTF models in your web applications, utilize the useGLTF function.

This setup allows you to efficiently manage model loading with progress tracking and error handling.

Ensure you have the necessary dependencies and understand how to handle the asynchronous nature of model loading:

import { useGLTF } from '@heyokajs/nuxt';

const { model, models, progress, isLoading, error, loadModel } = useGLTF(modelUrls, dracoDecoderPath);

Options

modelUrls

Array of URLs pointing to the GLTF models you wish to load. This allows dynamic loading based on the application's requirements.

dracoDecoderPath

Path to the Draco decoder library, necessary for decompressing Draco-compressed models to improve performance and reduce bandwidth usage.

model

The model represents the GLTF model that is currently loaded. This object can be directly manipulated and integrated into your 3D scene.

models

The models array holds the URLs for multiple GLTF models that are to be loaded. This allows for efficient management and loading of various models in a dynamic application environment.

progress

Numeric value indicating the progress of the model loading, useful for displaying loading bars or similar indicators.

isLoading

Boolean flag indicating whether the model is currently being loaded, enabling UI updates and interactions based on the loading state.

error

String describing any errors encountered during the model loading process, critical for robust error handling in your application.

loadModel

Function to initiate the loading of a GLTF model. This allows for manual control over the timing and conditions of model loading.