Gltf aren't appearing on view, even though it is already added to the scene

Questions
,
1

Hello everybody!
I’m learning how to use three.js and I’m having a problem when I try to load a model with some information from database as soon as the page loads. When I click to add a new model, it flows normally and a new model is added - but only this specific model, the others models that are saved in scene are not loading with it.

image
image1401×343 156 KB

How can you see, just the Model that i click to add after all load page appers on view…

    const container = document.getElementById('sceneThreeJs');

    container_Width = container.clientWidth;
    container_Height = container.clientHeight;

    let canvas_width = container.offsetWidth;
    let canvas_height = container.offsetHeight;

    const renderer = new THREE.WebGLRenderer({ antialias: true });

    renderer.setSize(canvas_width, canvas_height);
    renderer.setClearColor(0xffffff, 0);

    container.appendChild(renderer.domElement);

    const scene = new THREE.Scene();

    const LightParams = {
      shadows: true,
      exposure: 0.27,
      power: 800,
      hemiIrradiance: 0.5,
    };

    let light = new THREE.PointLight(0xf1e1ed, 2, 100, 1);
    light.castShadow = LightParams.shadows;
    light.position.set(0, 30, 0);
    light.power = LightParams.power;

    scene.add(light);

    let hemiLight = new THREE.HemisphereLight(
      0xf1e1ed /*tom claro*/,
      0xe6e2e4 /*tom escuro*/,
      0.05
    );
    hemiLight.intensity = LightParams.hemiIrradiance;

    scene.add(hemiLight);

    let lightProbe = new THREE.LightProbe();
    scene.add(lightProbe);

    const objectMaterial = new THREE.MeshStandardMaterial({ color: 0xe6e2e4 });
    const objects = [];
    const objectsToSave = [];

    const camera = new THREE.PerspectiveCamera(
      45,
      container_Width / container_Height,
      0.1,
      1000
    );

    const orbit = new OrbitControls(camera, renderer.domElement);
    camera.position.set(0, 15, 20);
    orbit.update();

	const model3d = async (model_data) => {
      const glftLoader = new GLTFLoader();

      let position, path, uuid, name;

      if (model_data.position) {
        position = model_data.position;
      } else {
        position = highlightMesh.position;
      }

      if (model_data.position) {
        position = model_data.position;
      } else {
        position = highlightMesh.position;
      }

      if (model_data.asset_path) {
        path = model_data.asset_path;
      } else {
        path = String('/assets/' + station_data.model);
      }

      if (model_data.name) {
        name = model_data.name;
      } else {
        name = model_data.station_name;
      }

      // - Adding gltf scene
      glftLoader.load(path, (gltfScene) => {
        gltfScene.scene.position.copy(position);
        gltfScene.scene.name = name;
        gltfScene.scene.scale.set(0.3, 0.3, 0.3);

        if (station_data.scene_uuid) {
          uuid = model_data.scene_uuid;
        } else {
          uuid = gltfScene.scene.uuid;
        }

        gltfScene.scene.traverse((o) => {
          if (o.isMesh) o.material = objectMaterial;
        });

        let new_object = {
          scene_uuid: uuid,
          position: position,
          station_name: name,
          asset_path: path,
        };

        objectsToSave.push(new_object);
        objects.push(gltfScene.scene);

        scene.add(gltfScene.scene);
        highlightMesh.material.color.setHex(0xf1e1ed);
      });
    };
	
    document.addEventListener('add_model_event', (event) => {
         model3d(event.detail.data);
    });

   // - Load previous saved Models
    const loadSavedData = () => {
      getData()
        .then((result) => {
          savedInfoModels = result.data.models;
          for (var i = 0; i < savedInfoModels.length; i++) {
            model3d(savedInfoModels[i]);
          }
        })
        .catch((error) => {
          console.log('Error getting models information.', error);
        });
    };

    loadSavedData();
, []);
2

Sounds a bit abstract - what do you mean by “saved in the scene” ? If you’re 101% sure the objects are in the scene, you’ve console logged scene.children and everything looks ok there:

  1. Make sure positioning and scale makes sense. Try adding (in the root level of the scene) a mock box / sphere in the same location as your model - does the mock appear? If not - the position is off.
  2. Make sure you’re rendering the correct scene.