Well, I have a big problem and it’s about how to put glTF´s measurements given by blender on a loaded model.
This is what i did:
I used the default cube model that Blender gives you when you open it, the I got the cube´s measurements.
I made a program and its function is to get the loaded object´s measurements so it could get the surface´s area. (cube´s surface area = 24m^)
This is the way i get the area
gltf.scene.traverse( function ( child ) {
if ( child.isMesh) {
//Setting the buffer geometry
const bg = child.geometry;
child.geometry = (new THREE.Geometry()).fromBufferGeometry(bg)
glTFGeometry = child.geometry;
console.log(glTFGeometry);
var caras = glTFGeometry.faces;
console.log(caras);
var area = 0.00;
for (let i = 0; i < caras.length; i++) {
var face = caras[i];
var va = geometry.vertices[face.a];
var vb = geometry.vertices[face.b];
var vc = geometry.vertices[face.c];
var t = new THREE.Triangle(va,vb,vc);
console.log(t);
var tarea = t.getArea();
area += tarea;
}
console.log(area);
the last console.log() is the “2” on the image below
then i tried uploading a 5x5 face cube and I got the same number so I supose that by default three.js gives to the loaded objects specific bounds or something like that. So here I am asking for help, if you got here thanks for reading anyway (:
It seems to work with this code: https://jsfiddle.net/u3voz025/
I have just exported the default Blender cube to gltf, embedded it to the fiddle and used the following code for the actual computation:
function computeArea( mesh ) {
var geometry = mesh.geometry;
var index = geometry.index;
var position = geometry.attributes.position;
var area = 0;
if ( index ) {
for ( var i = 0; i < index.count; i += 3 ) {
var a = index.getX( i + 0 );
var b = index.getX( i + 1 );
var c = index.getX( i + 2 );
vA.fromBufferAttribute( position, a );
vB.fromBufferAttribute( position, b );
vC.fromBufferAttribute( position, c );
area += computeTriangleArea( vA, vB, vC );
}
} else {
for ( var i = 0; i < position.count; i += 3 ) {
vA.fromBufferAttribute( position, i + 0 );
vB.fromBufferAttribute( position, i + 1 );
vC.fromBufferAttribute( position, i + 2 );
area += computeTriangleArea( vA, vB, vC );
}
}
return area;
}
function computeTriangleArea( a, b, c ) {
return t.set( a, b, c ).getArea();
}
It might be necessary to transform the vertices with the world matrix of the object depending on whether you apply any transformations in Blender or not. If so, just multiply the vertices with the object’s world matrix:
vA.applyMatrix4( mesh.matrixWorld );
vB.applyMatrix4( mesh.matrixWorld );
vC.applyMatrix4( mesh.matrixWorld );
1 Like
Thank you for replying, well it doesn’t seem to work, when I load a rescaled cube to a 5x5x5 for example, it still giving me that 24 as the result, even though when I transform the vertices.
Can you please update the fiddle with the scaled cube?
how can I get a data var from a glTF?
You can also share the exported glTF file here.
107.gltf (4.7 KB)
there it is, it’s not 5x5x5 exactly but its area is around 107
My fault, the world matrix was not up-to-date. You have to call gltf.scene.updateMatrixWorld(); once.
https://jsfiddle.net/y2kg4wxd/
3 Likes
You just saved my final project, ywewvghgvjhyszehgewxh. Thank you so much and sorry if am kinda dumb. Im still learning English, this is my first time asking on a forum, im kinda new on js and Im sleepy
