Loading multiple GLTF

🌵 Needle Engine
1

Hi, using the GLTF Object component, I created multiple GLTF files. My requirement is while loading one GLTF file without unloading it, I want to load another one or more based on the requirement. Changing needle-engine src attribute load that GLTF alone. or Is there any better flow to achieve this?

2

Hi Ashok,

For loading multiple GLTF files without unloading previously loaded ones, the best approach is to maintain a list or array of the URLs you want to load and render them in the scene simultaneously. You can adapt the GLTFLoader to support multiple models and manage their visibility accordingly. Here’s a detailed pseudocode followed by a code snippet:

  1. Create an array of model URLs that you want to load.
  2. Iterate through this array and load each GLTF model using GLTFLoader.
  3. Add each model to a parent object or the scene.
  4. Control visibility or manage animations for models based on your requirements.

Here’s a code example illustrating this:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const loader = new GLTFLoader();

const modelUrls = [
    'url_to_first_model.glb',
    'url_to_second_model.glb',
    // Add more URLs as needed
];

const loadedModels = [];

function loadModels() {
    modelUrls.forEach(url => {
        loader.load(url, gltf => {
            const model = gltf.scene;
            scene.add(model);
            loadedModels.push(model);
            // Manage scaling or positioning as needed
            model.position.set(0, 0, 0); // Example position
        }, undefined, error => {
            console.error('Error loading model:', error);
        });
    });
}

loadModels();

Notes:

  • Ensure each model is not accidentally overwriting others; you may want to adjust their positions or create unique parent objects to manage their visibility separately.
  • You can then manage their visibility by iterating over the loadedModels array if some models should be hidden or shown based on user interaction or game logic.
  • Also consider how you handle animations, if applicable, for multiple models.

Feel free to adjust the code according to your specific project requirements. If you have further questions or need more specific examples, just let me know!

1 replies left - Get a PRO license for more AI replies.
thread_BtbVfxHwGcwzUkSQcWunb09X
Reply to this message to continue the conversation

3

Hi, yes here’s one example or you can use the SceneSwitcher component (or multiple of those)

4

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.