Constructing a digital replica of an industrial facility requires core components: a render loop, camera, and a scene instance. Alongside these, defining the workspace ground plane provides immediate spatial context.

External assets created in tools like Blender form the basis of the environment. The factory infrastructure is loaded via GLTFLoader and positioned with in the scene.

const setupEnvironment = () => {
  const parser = new GLTFLoader();
  parser.load("/static/models/product/make.glb", (data) => {
    const layout = data.scene;
    layout.scale.set(10, 10, 10);
    layout.position.set(0, 0, 18);
    layout.rotation.set(Math.PI / 2, Math.PI / 2, 0);
    currentScene.add(layout);
  });
};

Next, dynamic elements such as a forklift and a cargo container are introduced. Each asset follows a similar loading pattern, with adjustments to placement to align with the factory floor.

const placeVehicle = () => {
  const parser = new GLTFLoader();
  parser.load("/static/models/product/agv.glb", (data) => {
    const truck = data.scene;
    truck.scale.set(10, 10, 10);
    truck.position.set(-10, -94, 3);
    truck.rotation.set(Math.PI / 2, Math.PI / 2, 0);
    truck.name = "truck";
    currentScene.add(truck);
  });
};

const placeContainer = () => {
  const parser = new GLTFLoader();
  parser.load("/static/models/product/box.glb", (data) => {
    const crate = data.scene;
    crate.scale.set(10, 10, 10);
    crate.position.set(10, -94.5, 9);
    crate.rotation.set(Math.PI / 2, Math.PI / 2, 0);
    crate.name = "crate";
    currentScene.add(crate);
  });
};

To move a fork truck together with its payload, both mesh are attached as children of a single THREE.Group. Any transformation applied to this group affects the entire assembly uniformly.

const createVehicleWithCargo = () => {
  const parser = new GLTFLoader();
  const bundle = new THREE.Group();
  bundle.name = "vehicleBundle";

  parser.load("/static/models/product/agv.glb", (truckData) => {
    const secondTruck = truckData.scene;
    secondTruck.scale.set(10, 10, 10);
    secondTruck.position.set(-120, 79, 3);
    secondTruck.rotation.set(Math.PI / 2, Math.PI / 2, 0);
    secondTruck.name = "auxTruck";

    bundle.add(secondTruck);

    parser.load("/static/models/product/box.glb", (crateData) => {
      const secondCrate = crateData.scene;
      secondCrate.scale.set(10, 10, 10);
      secondCrate.position.set(-105, 76, 3);
      secondCrate.rotation.set(Math.PI / 2, Math.PI / 2, 0);
      secondCrate.name = "auxCrate";

      bundle.add(secondCrate);
      currentScene.add(bundle);
    });
  });
};

Object motion is handled inside the animation loop by updating positional coordinates over time. The container glides along a conveyor path, resetting its x-coordinate after exceeding a threshold. Similarly, the combined vehicle-and-cargo group travels laterally and loops back seamlessly.

const animateFrame = () => {
  performanceMonitor.update();
  requestAnimationFrame(animateFrame);

  currentScene.children.forEach((node) => {
    if (node.name === "crate") {
      node.position.x += 0.2;
      if (node.position.x > 150) {
        node.position.x = 10;
      }
    }

    if (node.name === "vehicleBundle") {
      node.position.x += 0.2;
      if (node.position.x > 120) {
        node.position.x = -80;
      }
    }
  });

  renderer.render(currentScene, activeCamera);
};

Assembly conveyors and automated guided vehicles execute their repetitive travel, forming a continuous loop of factory operation visualization.