Why Gltf object's actual width value is too long?

Questions
1

Hello Experts,
I’ve loaded two different gltf object on the scene and I need to get actual width of theese 3D objects. I’m using the following code be able to add an 3D object the scene. When I use the THREE.Box3().setFromObject(object).getSize(new THREE.Vector3()).x one of the 3D object’s width value is accurate. But the other 3D object’s with value is too long. I’ve tried many things be able to solve this. But I couldn’t do that. What should I do at this point ? How can I get the accurate width value of the 3D Gltf objects ?

Here is my code:

setupVehicle: function () {
     //Setup Vehicle
     var oVehicleGroup = new THREE.Group();
     var [oFlag, oSphere] = base.setVehicleCountryFlag();
     oLoader.load("./resources/models/turkuaz/scene.gltf", function (oGltf) {
        if (oGltf.scene.children[0].isObject3D) {
           var oObject3D = oGltf.scene.children[0];
           // oObject3D.scale.set(0.004, 0.004, 0.004);
           oObject3D.scale.multiplyScalar(5);
           oVehicleGroup.type = "Midibus";
           oVehicleGroup.name = "Midibus Turkuaz";
           oVehicleGroup.userData.id = "midibus-" + jQuery.sap.uid();
           oVehicleGroup.userData.name = "Midibus Turkuaz";
           oVehicleGroup.userData.flag = oFlag;
           oVehicleGroup.userData.sphere = oSphere;
           oVehicleGroup.add(oObject3D);
           oVehicleGroup.add(oFlag);
           oVehicleGroup.add(oSphere);
           oScene.add(oVehicleGroup);
           oVehicleGroup.position.y = new THREE.Box3().setFromObject(oLayout).min.y;
           oVehicleGroup.position.z = 27;
           oVehicleGroup.rotation.y = Math.PI;
           if (!allMidibusVehicles.length) {
              oVehicleGroup.position.x = -620;
           } else {
              oVehicleGroup.position.x = (allMidibusVehicles[allMidibusVehicles.length - 1].position.x - new THREE.Box3().setFromObject(allMidibusVehicles[allMidibusVehicles.length - 1]).getSize(new THREE.Vector3()).x) - (turkuazVehicleCount * 50);
           }
           oFlag.rotation.y = -Math.PI;
           oFlag.geometry.center();
           oFlag.position.y = new THREE.Box3().setFromObject(oVehicleGroup).max.y + 30;
           oSphere.geometry.center();
           oSphere.position.y = new THREE.Box3().setFromObject(oVehicleGroup).max.y + 30;
           allMidibusVehicles.push(oVehicleGroup);
        }
     });
  },

Here is the image:

Issue
Issue1440×592 268 KB

Thanks a lot for your help.

2

It would be easier to help you if you’d clean up the code. You have a lot of complex calculations on Box3’s somewhere in-between - it is easy to make a mistake this way.

It’s best if you declare a box3 as a separate variable and then using its methods and values in calculations.

3

Actually, I have a road and vehicles. First of all I would like to set bus’s front side to the road’s beginning point (minimum x point). But there is a space between the bus and road. I can’t align bus’s end point to the road’s begining point ? I’m using the following code. Where am I doing mistake ?

setupVehicle: function () {
     //Setup Vehicle
     let oVehicleGroup = new THREE.Group();
     oLoader.load("./resources/models/bus/scene.gltf", function (oGltf) {
        // oVehicleGroup.multiplyScalar(15);
        oVehicleGroup.scale.set(15,15,15);
        oVehicleGroup.rotation.y = Math.PI;
        oVehicleGroup.add(oGltf.scene);
        oVehicleGroup.position.x = new THREE.Box3().setFromObject(oLayout).min.x - new THREE.Box3().setFromObject(oVehicleGroup).getSize(new THREE.Vector3()).x / 2;
        oVehicleGroup.position.y = new THREE.Box3().setFromObject(oLayout).max.y;
        oScene.add(oVehicleGroup);
        base.renderScene();
        var vehicleCoordinates = new THREE.Box3().setFromObject(oVehicleGroup).getCenter(new THREE.Vector3());
     });
  },

oLayout variable is represeting the my road

bus
bus1440×639 394 KB