Home > Software design >  How to find the diagonal length of a Box3 in Three.js and Threebox
How to find the diagonal length of a Box3 in Three.js and Threebox

Time:08-12

I'm using Threebox (a Three.js plugin for Mapbox) to load 3D models of buildings to a map. There is support for a certain level of interactivity with the buildings (rotating and moving). The rotation functionality is accessed via a floating ring that when clicked, allows the model to be rotated. Example:

rotation-ring on house

Since my models are of different sizes, the ring needs to be sized accordingly, but I'm having some issues finding the correct measurements of the model to do this.

Ideally, it would looked like the following:

enter image description here

I create the ring with a Three.js TorusGeometry like this:

let geom = new THREE.TorusGeometry(ringSize, 0.01, 30, 25);
let material = new THREE.MeshStandardMaterial({ color: 0xffc000, side: THREE.DoubleSide });
let mesh = new THREE.Mesh(geom, material);

wherein I need to calculate the size the ring needs to be beforehand.

Here is the issue: the ring size (radius) for the house example above is about ~0.7, but I can't find a way to accurately derive that from anywhere in the models properties. I'm suspecting this has to do with Threebox having meters as units where Three has it's own map units.

Here are some properties I'm able to access in the object:

unitsPerMeter: 0.0600151
modelSize: { x: 13.9649, y: 11.4863, z: 9.1121 }
boundingBox.box: {
    "min": {
        "x": -6.982465131993985,
        "y": -5.743162421920143,
        "z": 0
    },
    "max": {
        "x": 6.982465131993986,
        "y": 5.743162421920143,
        "z": 9.112114852394226
    }
}
center: {
    "x": -1.4794275894722282,
    "y": 0.5752914186997362,
    "z": -0.0858976981176804
}

I have tried the following to get the size:

let box = new THREE.Box3().setFromObject(object);
let size = new THREE.Vector3();
box.getSize(size);
console.log(size)

which results in:

{
    "x": 153.10896959049688,
    "y": 125.93398806704032,
    "z": 99.90357914196488
}

and that doesn't seem very helpful since the length is like 0.7

CodePudding user response:

For square it's always a * sqrt(2) where a is side of rectangle

CodePudding user response:

Is this part of the documentation what you are looking for?

According to it, you can do:

tb.projectToWorld(lnglat)

to

calculate the corresponding THREE.Vector3 for a given lnglat

  • Related