Создание 3д ифрейма

Вопрос такой стоит задача сделать 3д интерфейс вот с такими окнами: использовал все что мог и знал :

css 3d:
возможная нагрузка: css > svg, css < canvas, css < three.js
+интерактивность
+возможность сделать ифрейм
-невозможность сделать 1 ифрейм на несколько элементов чтобы сделать данную геометрию в 3д (покрайней мере не нашел)

svg:
допустимая нагрузка: svg < *
+интерактивность
-невозможность сделать айфрайм (foreignObject не брать поскольку я не смог придать ему нужный объем чтобы было как в 3д)

canvas:
возможная нагрузка: canvas > svg, canvas > css , canvas < three.js
-нет итеративности
-невозможность сделать айфрайм (именно чтобы было пользоватся)
+(думаю если постараться то можно было бы сделать похожий эфект но тут все рухнуло из за итеративности)

three.js:
допустимая нагрузка:three.js > * +итеративность
+удобство создании геометрии
+возможность пользоваться canvas
-невозможность сделать айфрайм(поскольку айфрайм вышел бы текстурой то итеративность становится как у canvas)

Может найдутся еще варианты что можно попробовать? Есть еще не плохая статейка о этих библиотеках но врятли они решат мою задачу https://habrahabr.ru/post/140286/

Если пытаться делать на том что перечислил то в:
canvas и three.js нужно как то в айфрайме сделать псевдо курсор который движется от положения точки в картинке.

В css 3d разделить айфрайм на части чтобы отобразить на блоках которые будут строить геометрию + должна быть синхронизация между кусочками чтобы выглядело как 1. А svg наверно вобще надо как то вывернутся на изнанку чтобы сделать.