Reset useGLTF / 3D-Model

Questions
, ,
1

Hello everyone, I’m currently trying to apply a transformation to a 3D model.
Whenever the data value changes, the data should be reloaded so the new transformation can be applied.

The first time I load the model, it looks perfectly fine:

image
image708×717 63.6 KB

But as soon as the data changes, the pos and rot transformations get applied again, to the already transformed model (at least that’s what I think, that’s what happens).

image
image787×763 82.3 KB

Can I reload the model somehow so that I can start every transformation from the base transformation?

Here is my current implementation:

type GLTFResult = GLTF & {
nodes: {
Object_2: THREE.Mesh
}
materials: {
[‘Scene_-Root’]: THREE.MeshStandardMaterial
['Scene-_Root’]: THREE.MeshStandardMaterial
}
}

interface PelvisProps{
data: Folder
pos: [number, number, number];
rot: [number, number, number];
opacityParameter: number;
}
export const PelvisDynamic: React.FC = React.memo(({ data, pos, rot, opacityParameter, …props }) => {
const {nodes} = useGLTF(‘/models/female_texture.glb’) as GLTFResult

function calculateWeight(distance, influenceRadius) {
    if (distance > influenceRadius) {
        return 0;
    }
    return Math.exp(-Math.pow(distance / influenceRadius, 20));
}

React.useEffect(() => {
    if(data){
        const {nodes} = useGLTF('/models/female_texture.glb') as GLTFResult

        const vector_model_symphysis_position: number[] = [0, 0, 0]
        const vector_model_coccyg_position: number[] = [-98, 60, 0]
        const vector_model_ischial_spine_left_position: number[] = [-55, 27, 57]
        const vector_model_ischial_spine_right_position: number[] = [-57, 28, -55]

        const positionAttribute = nodes.Object_2.geometry.attributes.position;
        const positions = positionAttribute.array as number[];
        const vertexCount = positionAttribute.count;

        const rotationMatrix = new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(-Math.PI / 2, 0 , Math.PI / 2, 'XYZ'));
        const translationMatrix = new THREE.Matrix4().makeTranslation(0, 555, -2);
        const transformationMatrix = new THREE.Matrix4().multiplyMatrices(translationMatrix, rotationMatrix);

        const symphysis_datapoint = data.children.find(child => child.name === "Symphysis") as Datapoint | undefined;
        const coccyg_datapoint = data.children.find(child => child.name === "Coccyg") as Datapoint | undefined;
        const ischial_spine_left_datapoint = (data.children.find(child => child.name === "Ischial spine") as Folder | undefined)?.children.find(child => child.name === "left") as Datapoint | undefined;
        const ischial_spine_right_datapoint = (data.children.find(child => child.name === "Ischial spine") as Folder | undefined)?.children.find(child => child.name === "right") as Datapoint | undefined;

        const x_scale_distance: number = coccyg_datapoint && symphysis_datapoint ? Math.abs(coccyg_datapoint?.pics_x - symphysis_datapoint?.pics_x) : 0;
        const y_scale_distance: number = coccyg_datapoint && symphysis_datapoint ? Math.abs(coccyg_datapoint?.pics_y - symphysis_datapoint?.pics_y) : 0;
        const z_scale_distance: number = ischial_spine_left_datapoint && ischial_spine_right_datapoint && symphysis_datapoint ? (Math.abs(ischial_spine_left_datapoint?.pics_z) > Math.abs(ischial_spine_right_datapoint?.pics_z)) ? (Math.abs(ischial_spine_left_datapoint?.pics_z - symphysis_datapoint?.pics_z)) : (Math.abs(ischial_spine_right_datapoint?.pics_z - symphysis_datapoint?.pics_z)) : 0

        const x_model_distance: number = Math.abs(vector_model_coccyg_position[0] - vector_model_symphysis_position[0])
        const y_model_distance: number = Math.abs(vector_model_coccyg_position[1] - vector_model_symphysis_position[1])
        const z_model_distance: number = Math.abs(vector_model_ischial_spine_left_position[2]) > Math.abs(vector_model_ischial_spine_right_position[2]) ? Math.abs(vector_model_ischial_spine_left_position[2] - vector_model_symphysis_position[2]) : Math.abs(vector_model_ischial_spine_right_position[2] - vector_model_symphysis_position[2])

        const x_scale = x_scale_distance / x_model_distance
        const y_scale = y_scale_distance / y_model_distance
        const z_scale = (z_scale_distance / z_model_distance)

        for (let i = 0; i < vertexCount; i++) {
            let vertex = new THREE.Vector3(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]);
            vertex.applyMatrix4(transformationMatrix);

            positions[i * 3] = vertex.x * x_scale;
            positions[i * 3 + 1] = vertex.y * y_scale;
            positions[i * 3 + 2] = vertex.z * z_scale;
        }
        positionAttribute.needsUpdate = true;
    }
}, [data]);


return (
    <>
        <group {...props} dispose={null}>
            <mesh frustumCulled = {false} geometry={nodes.Object_2.geometry}>
                <meshMatcapMaterial
                    color={'white'}  transparent={true}
                    depthWrite={opacityParameter > 50 ? true: false}
                    opacity={opacityParameter / 100}/>
            </mesh>
        </group>
    </>
)

})

useGLTF.preload(‘/models/female_texture.glb’)

Thank you in advance!

2

when you overwrite the geometry buffers than there’s no reset. usegltf refers to a cached model, every call to usegltf with the same url refers to the same data. if possible use scaling on the mesh, as well as position, rotation. if you absolutely must mess with vertex data you are responsible for the changes you made. either clone the model or save the original data somewhere.

3

A simple solution here could be to just reset the translate, rotation and scale of the model to [0,0,0] [0,0,0] [1,1,1] (respectively) before applying the newest transforms…