How can I get 3 different taxonomy type terms in a div class element?

If using get_the_terms, you can just do your if loop once for each taxonomy and then join them after the three loops.

Of course, it would probably be more efficient to use:

wp_get_post_terms( $post_id, $taxonomy, $args );

You could then do something like:

wp_get_post_terms( $post_id, array( 'resource_roles', 'resource_media', 'resource_theme' ) );

Which would pull all of the terms in one query.

To echo them into your class attribute, use the code you use when they are all the same type:

$extra_classes="";
$terms = wp_get_post_terms( $post_id, array('resource_roles','resource_media','resource_theme');
if ( is_wp_error( $terms ) ) {
   # Log the error, notify someone, etc.
} else if ( 0 < count( $terms ) ) {
   $slugs = array();
   foreach ( $terms as $term ) {
      $slugs[] = $term->slug;
   }
   $extra_classes = implode(' ', $slugs);
}
$title = get_the_title();
echo <<<HTML
<div class="color-shape resource-block {$extra_classes}">
   <h1>{$title}</h1>
</div>
HTML;