Three.js中CSS3D对象的循环剪裁

我正在使用出色的Three.js CSS3D渲染器在手机、平板电脑以及台式机上获得出色的性能

我已经添加了一个概述谷歌地图作为一个CSS3D对象，随着相机的标题旋转，这是非常好的工作

//// add the mini map to CSS3D scene
    var element = document.createElement( 'div' );
    element.style.width = '300px';
    element.style.height = '300px';
    element.setAttribute("id", "miniMap");
    document.getElementById('containerMiniMap').appendChild( element );         
    var gMapObject = new THREE.CSS3DObject( element );

，但我希望地图有一个圆形剪辑，以适合要求地图为圆形的设计。我有一张很好的照片展示了它，但作为stackoverflow的新手，我还不能发布图片，所以我希望我的描述足够精确，让你明白；）

在调查之后，我发现CSS方法可以使用PNG掩码或SVG路径来实现这一点，如中所示，但这似乎有些过分，即使可以剪裁amp，仍然会造成方形容器的问题。 另外，一个快速测试表明它可以与图像一起工作，但我无法使它与交互式google地图一起工作，请参见JSFIDLE

我想做的是将map CSS3D对象（类似于一种纹理）投影到圆形对象上，该对象就像我的谷歌地图上的遮罩

 circle = createMesh(new THREE.CircleGeometry(...

有人做过这件事或提出过任何建议吗

---

提前谢谢

根据那篇文章。。。我想应该是这样的

var element = document.createElement( 'div' );
element.style.width = '300px';
element.style.height = '300px';
element.style.clipPath = 'polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...)';

---

谢谢Doob先生，我想如果你建议用CSS的方式使用Three.js API是不容易的。我将尝试并发布结果。好吧，我尝试了，但运气不好，这里是JSFIDLE，您可以看到循环剪辑成功应用于图像，但是google地图似乎忽略了循环路径，即使循环剪辑同时应用于google地图剪辑和父容器剪辑。我重新打开了箱子；）