TransformControls translate get mesh geometries

[ulisescarreonalvarez]

Hi team,

Im making some test on a GLB model and using some CSG for subtraction.

Im using tranformsControls and selecting the mesh and assigning the reference. But I need the new location geometries when I move one of the meshes but I can't find anything on the documentation.

This is a sample.

export default function ThumbnailScene() {
    const { target, setTarget } = useStore()
    const transform = useRef()

    const { mode } = useControls({ mode: { value: 'translate', options: ['translate', 'rotate', 'scale'] } })
    return (
        <div style={{ width: '100vh', height: '100vh' }}>
            <Canvas shadows dpr={[1, 2]}>
                <pointLight position={[100, 100, 100]} intensity={0.8} />
                <hemisphereLight color="#ffffff" groundColor="#b9b9b9" position={[-7, 25, 13]} intensity={0.85} />
                <Suspense fallback={null}>
                    <group>
                        <ModelHueco name="Hueco" />
                        <ModelPared name="MS_Muro" />
                    </group>
                    {target && <TransformControls object={target} mode={mode} ref={transform} />}
                    <OrbitControls makeDefault />
                </Suspense>
            </Canvas>
        </div>
    )
}

My model function

function ModelPared({ name, ...props }) {
    const snap = useSnapshot(state)
    const { nodes } = useGLTF('./Muro_Prueba_conVentanaSINhuecoBlender_Last.glb')
    const setTarget = useStore((state) => state.setTarget)

    const [hovered, setHovered] = useState(false)
    useCursor(hovered)

    let muro = new THREE.Mesh(nodes.MS_Muro.geometry);
    muro.position.setX(nodes.MS_Muro.position.x);
    muro.position.setY(nodes.MS_Muro.position.y);
    muro.position.setZ(nodes.MS_Muro.position.z);
    muro.scale.set(0.01, 0.01, 0.01);
    muro.updateMatrix()

    let hueco = new THREE.Mesh(nodes.Hueco.geometry);
    hueco.position.setX(nodes.Hueco.position.x);
    hueco.position.setY(nodes.Hueco.position.y);
    hueco.position.setZ(nodes.Hueco.position.z);
    hueco.scale.set(0.01, 0.01, 0.01);
    hueco.updateMatrix()

    // const material_cube = new THREE.MeshBasicMaterial({ color: 'grey' });
    // material_cube.opacity = 1;

    const meshFinal = CSG.subtract(muro, hueco);
    // meshFinal.material = material_cube;
    meshFinal.geometry.verticesNeedUpdate = true;

    const edges = useMemo(() => new THREE.EdgesGeometry(meshFinal.geometry, 15), [nodes])

    const { targetData } = useRef()
    const update = useCallback((self, targetData) => {

        console.log(meshFinal.position, targetData);
    }, [])
    

    return (
        <group>
            <mesh
                ref={targetData}
                onClick={(e) => setTarget(e.object)}
                onPointerMissed={(e) => e.type === 'click' && (state.current = null)}
                onContextMenu={(e) => snap.current === name && (e.stopPropagation(), (state.mode = (snap.mode + 1) % modes.length))}
                onPointerOver={(e) => (e.stopPropagation(), setHovered(true))}
                onPointerOut={(e) => setHovered(false)}
                name={name}
                geometry={meshFinal.geometry}
                material={meshFinal.material}
                position={meshFinal.position}
                scale={meshFinal.scale}
                {...props}
                dispose={null}
                onUpdate={update}
            >
            </mesh>
        </group>
    )
}

Any advice?

Regards

[CodyJasonBennett]

What are you trying to do here? Do you want the location of the controls' gizmo or of the selected meshes?